更多"Try it Yourself"下面的例子。
定义和用法
所述querySelectorAll()方法返回在指定的CSS匹配的文档中的所有元件selector(s)作为静态节点列表对象。
该节点列表对象表示节点的集合。 节点可以通过索引号来访问。 该指数从0开始。
提示：您可以使用长度的NodeList对象的属性来确定特定的选择相匹配的元素数量，那么你可以遍历所有元素，并提取所需的信息。
有关CSS选择的更多信息，请访问我们的CSS选择器教程和我们的CSS选择参考 。
浏览器支持
在表中的数字规定，完全支持方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| querySelectorAll() | 4 | 9 | 3.5 | 3.2 | 10.0 |
注：Internet Explorer 8中对CSS2选择支持。 IE9及更高版本对CSS3和支持。
句法
document.querySelectorAll( CSS selectors )参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| CSS selectors | String | 需要。 指定一个或多个CSS选择器来匹配元素。 这些用于基于它们的ID，类类型，属性，属性值等来选择HTML元素 对于多个选择器，每个选择用逗号分开。 提示：对于所有的CSS选择列表，看看我们的CSS选择参考 。 |
技术细节
| DOM版本： | 选择1级文档对象 |
|---|---|
| 返回值： | 甲NodeList对象，代表指定CSS匹配的文档中的所有元件selector(s) 该节点列表是一个静态的集合，这意味着在DOM变化具有收藏中没有任何影响。 抛出一个SYNTAX_ERR异常，如果selector(s)是无效的 |
更多示例
例
获取所有<p>所述文档中的元素，并设置第一背景颜色<p>元素(index 0)
// Get all <p> elements in the document
var x =
document.querySelectorAll("p");
// Set the
background color of the first <p> element
x[0].style.backgroundColor = "red"; 试一试» 例
获取所有<p>带有class =“示例”的文件中的元素，并设置第一背景<p>元素：
// Get all <p> elements in the document with class="example"
var x =
document.querySelectorAll("p.example");
// Set the
background color of the first <p> element with class="example" (index
0)
x[0].style.backgroundColor = "red"; 试一试» 例
找出带有class =“示例”多少个元素有在文档中（使用NodeList对象的长度属性）：
var x =
document.querySelectorAll(".example").length; 试一试» 例
设置带有class =“示例”的文件中的所有元素的背景色：
var x = document.querySelectorAll(".example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} 试一试» 例
将所有的背景颜色<p>所述文档中的元素：
var x = document.querySelectorAll("p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} 试一试» 例
将所有的边界<a>有一个文件中的元素"target"属性：
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.border = "10px solid red";
} 试一试» 例
设置每一个的背景颜色<p>元件，其中该亲本是一个<div>元素：
var x = document.querySelectorAll("div > p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} 试一试» 例
将所有的背景颜色<H2>， <div>和<span>所述文档中的元素：
var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} 试一试» 相关页面
CSS教程： CSS选择器
CSS参考： CSS选择器参考
JavaScript的教程： JavaScript的HTML DOM节点列表
HTML DOM参考： 文件。 querySelector()
HTML DOM参考： 元素 。 querySelectorAll()