上一篇：HTML DOM querySelector() 方法下一篇：HTML DOM readyState 屬性

HTML DOM querySelectorAll() 方法

Document 對(duì)象參考手冊(cè) Document 對(duì)象

實(shí)例

獲取文檔中 class="example" 的所有元素:

var x = document.querySelectorAll(".example");

運(yùn)行代碼 ?

定義與用法

querySelectorAll() 方法返回文檔中匹配指定 CSS 選擇器的所有元素，返回 NodeList 對(duì)象。

NodeList 對(duì)象表示節(jié)點(diǎn)的集合?？梢酝ㄟ^索引訪問，索引值從 0 開始。

提示: 你可以使用 NodeList 對(duì)象的 length 屬性來獲取匹配選擇器的元素屬性，然后你可以遍歷所有元素，從而獲取你想要的信息。

更多 CSS 選擇器可以參考 CSS 選擇器教程， CSS 選擇器參考手冊(cè)。

瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。

方法
querySelectorAll()	4.0	8.0	3.5	3.2	10.0

注意: Internet Explorer 8 支持 CSS2 選擇器。 IE9 及更高版本的瀏覽器已經(jīng)支持 CSS3 選擇器。

語法

elementList = document.querySelectorAll(selectors);

elementList 是一個(gè)靜態(tài)的 NodeList 類型的對(duì)象。
selectors 是一個(gè)由逗號(hào)連接的包含一個(gè)或多個(gè) CSS 選擇器的字符串。

屬性值

參數(shù)	類型	描述
CSS 選擇器	String	必須。指定一個(gè)或多個(gè)匹配 CSS 選擇器的元素?？梢酝ㄟ^ id, class, 類型, 屬性, 屬性值等作為選擇器來獲取元素。多個(gè)選擇器使用逗號(hào)(,)分隔。提示: CSS 選擇器更多內(nèi)容可以參考 CSS 選擇器參考手冊(cè)。

方法

DOM 版本:	Level 1 Document Object
返回值:	一個(gè) NodeList 對(duì)象，表示文檔中匹配指定 CSS 選擇器的所有元素。 NodeList 是一個(gè)靜態(tài)的 NodeList 類型的對(duì)象。如果指定的選擇器不合法，則拋出一個(gè) SYNTAX_ERR 異常。

實(shí)例

獲取文檔中所有的 <p> 元素，并為匹配的第一個(gè) <p> 元素 (索引為 0) 設(shè)置背景顏色:

// 獲取文檔中所有的 <p> 元素 var x = document.querySelectorAll("p"); // 設(shè)置第一個(gè) <p> 元素的背景顏色 x[0].style.backgroundColor = "red";

運(yùn)行代碼 ?

實(shí)例

獲取文檔中所有 class="example" 的 <p> 元素，并為匹配的第一個(gè) <p> 元素 (索引為 0) 設(shè)置背景顏色:

// 獲取文檔中所有 class="example" 的 <p> 元素 var x = document.querySelectorAll("p.example"); // 設(shè)置 class="example" 的第一個(gè) <p> 元素的背景顏色 x[0].style.backgroundColor = "red";

運(yùn)行代碼 ?