例
设置带有class =“示例”的第一个元素的背景颜色的内部<div>元素：
// Get the element with id="myDIV" (a div), then get all elements inside div
with class="example"
var x =
document.getElementById("myDIV").querySelectorAll(".example");
// Set the background color of the first element with class="example" (index
0) in div
x[0].style.backgroundColor = "red"; 试一试» 更多"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和支持。
句法
element .querySelectorAll( CSS selectors )参数值
| 参数 | 类型 | 描述 |
|---|---|---|
| CSS selectors | String | 需要。 指定一个或多个CSS选择器来匹配元素。 这些用于基于它们的ID，类类型，属性，属性值等来选择HTML元素 对于多个选择器，每个选择用逗号分开。 提示：对于所有的CSS选择列表，看看我们的CSS选择参考 。 |
技术细节
| DOM版本： | 选择1级文档对象 |
|---|---|
| 返回值： | 甲NodeList对象，代表一个指定的CSS匹配当前元素的所有后代元素selector(s) 该节点列表是一个静态的集合，这意味着在DOM变化具有收藏中没有任何影响。 注意：抛出一个SYNTAX_ERR异常，如果指定的selector(s)是无效的 |
更多示例
例
获取所有<p>一内部元件<div>元素，并设置第一背景颜色<p>元素(index 0)
// Get the element with id="myDIV" (a div), then get all p elements inside
div
var x =
document.getElementById("myDIV").querySelectorAll("p");
// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red"; 试一试» 例
获取所有<p>在一个元素<div>带有class =“示例”，并设置第一背景<p>元素：
// Get the element with id="myDIV" (a div), then get all p elements with
class="example" inside div
var x =
document.getElementById("myDIV").querySelectorAll("p.example");
// Set the background color of the first <p> element with class="example"
(index 0) in div
x[0].style.backgroundColor = "red"; 试一试» 例
找出带有class =“示例”多少个元素有一个<div>元件（使用NodeList对象的长度属性）：
/* Get the element with id="myDIV" (a div), then get all p
elements with class="example" inside div, and return the number of elements
found */
var x =
document.getElementById("myDIV").querySelectorAll(".example").length; 试一试» 例
设置在一个带有class =“示例”的所有元素的背景色<div>元素：
// Get the element with id="myDIV" (a div), then get all elements
with class="example" inside div
var x =
document.getElementById("myDIV").querySelectorAll(".example");
// Create a for loop and set the background color of all elements with
class="example" in div
var i;
for (i = 0; i < x.length; i++)
{
x[i].style.backgroundColor = "red";
} 试一试» 例
将所有的背景颜色<p>在一个元素<div>元素：
// Get the element with id="myDIV" (a div), then get all p elements inside
div
var x =
document.getElementById("myDIV").querySelectorAll("p");
// Create a for loop and set the background color of all p elements in
div
var i;
for (i = 0; i < x.length; i++)
{
x[i].style.backgroundColor = "red";
} 试一试» 例
设置所有的边框样式<a>在元素<div>有一个元素"target"属性：
// Get the element with id="myDIV" (a div), then get all <a> elements with a
"target" attribute inside div
var x =
document.getElementById("myDIV").querySelectorAll("a[target]");
// Create a for loop and set the border of all <a> elements with a
target attribute in div
var i;
for (i = 0; i < x.length; i++)
{
x[i].style.border = "10px solid red";
} 试一试» 例
设置的背景颜色的所有<H2>， <div>和<span>在一个元素<div>元素：
// Get the element with id="myDIV" (a div), then get all <h2>,
<div> and <span> elements inside <div>
var x =
document.getElementById("myDIV").querySelectorAll("h2,
div, span");
// Create a for loop and set the background color of all <h2>, <div> and
<span> elements in
<div>
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()