HTML DOM querySelectorAll() 方法

HTML DOM Document對(duì)象

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

返回的NodeList中的元素按照它們?cè)谠创a中出現(xiàn)的順序進(jìn)行排序。

返回的NodeList可以通過索引號(hào)訪問。索引從0開始。

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

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

語法：

document.querySelectorAll(selectors)

document.querySelectorAll("div");

瀏覽器兼容性

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

方法
querySelectorAll()	1	3.5	10	3.2	8

參數(shù)值

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

更多實(shí)例

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

document.querySelectorAll(".demo");

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

document.querySelectorAll("div.note");

設(shè)置文檔中所有<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對(duì)象