例
設置帶有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()