HTML DOM querySelectorAll() 方法

HTML DOM Document對象

querySelectorAll()返回與指定的選擇器組匹配的文檔中的元素列表 (使用深度優(yōu)先的先序遍歷文檔的節(jié)點)。返回的對象是 NodeList 。

返回的NodeList中的元素按照它們在源代碼中出現(xiàn)的順序進行排序。

返回的NodeList可以通過索引號訪問。索引從0開始。

NodeList是一個靜態(tài)集合，這意味著DOM中的更改對該集合無效。

使用NodeList的length屬性來確定具有指定選擇器的元素數(shù)量，然后可以遍歷所有元素并提取所需的信息。

語法：

document.querySelectorAll(selectors)

document.querySelectorAll("div");

瀏覽器兼容性

表格中的數(shù)字指定了完全支持querySelectorAll()方法的第一個瀏覽器版本：

方法
querySelectorAll()	1	3.5	10	3.2	8

參數(shù)值

技術(shù)細節(jié)

更多實例

獲取所有帶有class="demo"的元素：

document.querySelectorAll(".demo");

此示例返回帶有“ note”類的文檔中所有<div>元素的列表：

document.querySelectorAll("div.note");

設置文檔中所有<h1>，<p>和<div>元素的背景色：

document.querySelectorAll("h1, p, div");

相關(guān)參考

CSS教程：CSS選擇器

CSS參考：CSS#id選擇器

CSS Reference: CSS .class 選擇器

DOM Document querySelector() 方法

DOM Document getElementsByClassName() 方法

DOM Document getElementsByTagName() 方法

HTML DOM Document對象