JavaScript怎麼通過querySelectorAll()方法查詢html元素

本篇文章給大家帶來了關於的相關知識，其中主要介紹了querySelectorAll方法的使用，該方法可以返回檔案中匹配指定 CSS 選擇器的所有元素，返回 NodeList 物件，下面一起來看一下，希望對大家有幫助。

【相關推薦：、】

querySelectorAll()方法的定義與用法

querySelectorAll() 方法返回檔案中匹配指定 CSS 選擇器的所有元素，返回 NodeList 物件。

NodeList 物件表示節點的集合。可以通過索引存取，索引值從 0 開始。

提示: 你可以使用 NodeList 物件的 length 屬性來獲取匹配選擇器的元素屬性，然後你可以遍歷所有元素，從而獲取你想要的資訊。

語法為：

elementList = document.querySelectorAll(selectors);

elementList 是一個靜態的 NodeList 型別的物件。

selectors 是一個由逗號連線的包含一個或多個 CSS 選擇器的字串。

其中的屬性值CSS 選擇器 String 必須。指定一個或多個匹配 CSS 選擇器的元素。可以通過 id, class, 型別, 屬性, 屬性值等作為選擇器來獲取元素。多個選擇器使用逗號(,)分隔。

返回值：

一個 NodeList 物件，表示檔案中匹配指定 CSS 選擇器的所有元素。 NodeList 是一個靜態的 NodeList 型別的物件。如果指定的選擇器不合法，則丟擲一個 SYNTAX_ERR 異常。

範例如下：

獲取檔案中所有的 <p> 元素，併為匹配的第一個 <p> 元素 (索引為 0) 設定背景顏色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<p>這是一個 p 元素。</p>
<p>這也是一個 p 元素。</p>
<p>點選按鈕為檔案中第一個 p (索引為 0) 元素設定背景顏色。</p>
<button onclick="myFunction()">點我</button>
<p><strong>注意:</strong>Internet Explorer 8  及更早版本不支援 querySelectorAll() 方法。</p>
<script>
function myFunction() {
    var x = document.querySelectorAll("p");
    x[0].style.backgroundColor = "red";
}
</script>
</body>
</html>

輸出結果：

+3.gif

獲取檔案中所有 class="example" 的 <p> 元素，併為匹配的第一個 <p> 元素 (索引為 0) 設定背景顏色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<h2 class="example">使用 class="example" 的標題</h2>
<p class="example">使用 class="example" 的段落</p> 
<p class="example">另外一個使用 class="example" 的段落</p> 
<p>點選按鈕為第一個 class="example" (索引為 0) 的 p 元素設定背景顏色。</p>
<button onclick="myFunction()">點我</button>
<p><strong>注意:</strong>Internet Explorer 8  及更早版本不支援 querySelectorAll() 方法。</p>
<script>
function myFunction() {
    var x = document.querySelectorAll("p.example");
    x[0].style.backgroundColor = "red";
}
</script>
</body>
</html>

輸出結果：

+4.gif

【相關推薦：、】

以上就是JavaScript怎麼通過querySelectorAll()方法查詢html元素的詳細內容，更多請關注TW511.COM其它相關文章！