溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript如何通過querySelectorAll()方法查找html元素的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript如何通過querySelectorAll()方法查找html元素文章都會有所收獲，下面我們一起來看看吧。
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>輸出結果：
獲取文檔中所有 class="example" 的 <p> 元素， 并為匹配的第一個 <p> 元素 (索引為 0) 設置背景顏色:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<h3 class="example">使用 class="example" 的標題</h3>
<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>輸出結果：
關于“JavaScript如何通過querySelectorAll()方法查找html元素”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript如何通過querySelectorAll()方法查找html元素”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
