HTML DOM querySelectorAll()用法及代码示例

HTML中的querySelectorAll()方法用于返回与指定CSS选择器匹配的元素子元素的集合，作为静态NodeList对象。 NodeList对象代表节点的集合。可以通过索引号访问节点。索引从0开始。注意：如果我们想将CSS属性应用于与指定选择器匹配的所有子节点，则可以遍历所有节点并应用该特定属性。

用法:

element.querySelectorAll(selectors)

选择器是必填字段。它指定一个或多个CSS选择器来匹配元素。这些选择器用于根据其ID，类，类型等选择HTML元素。
如果有多个选择器，则使用逗号分隔每个选择器。

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>DOM querySelectorAll() Method</title> 
        <style> 
            #geek { 
              border:1px solid black; 
              margin:5px; 
            } 
        </style> 
    </head> 
    <body style = "text-align:center;"> 
        <h1 style = "color:green;">GeeksforGeeks</h1> 
        <h2>querySelectorAll() Method</h2> 
        <div id="geek"> 
            <p>This is paragraph 1.</p> 
            <p>This is pragraph 2.</p> 
        </div> 
        <button onclick="myFunction()">Try it</button> 
        <script> 
            function myFunction() { 
                var x = document.getElementById("geek").querySelectorAll("p"); 
                var i; 
                for (i = 0; i < x.length; i++) { 
                x[i].style.backgroundColor = "green"; 
                x[i].style.color = "white"; 
                } 
            } 
        </script> 
    </body> 
</html>

输出：
queryselectorall1

单击按钮后：
queryselectorall2

支持的浏览器：下面列出了querySelector()方法支持的浏览器：

苹果Safari 3.2
谷歌浏览器4.0
Firefox 3.5
Opera 10.0
Internet Explorer 9.0

相关用法

注：本文由纯净天空筛选整理自Vishal Chaudhary 2大神的英文原创作品 HTML | DOM querySelectorAll() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。