更多"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()