Metodong querySelectorAll() ng HTML DOM Element

定义和用法

querySelectorAll() 方法返回与指定 CSS 选择器匹配的元素的子元素的集合，以静态 NodeList 对象。

NodeList

NodeList 是类数组的节点集合（列表）。

列表中的节点可以通过索引（下标）访问。索引从 0 开始。

length 属性可返回列表中的节点数。

另请参阅：

参考手册：

classList 属性

className 属性

querySelector() 方法

getElementsByTagName() 方法

getElementsByClassName() 方法

HTML DOM Style Object

教程：

CSS 语法

CSS 选择器

CSS 选择器参考手册

实例

例子 1

设置 <div> 元素中 class="example" 的第一个元素的背景颜色：

// 获取 id="myDIV" 的元素（div），然后获取 div 中 class="example" 的的所有元素
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// 设置 div 中第一个 class="example" (index 0) 的元素的背景颜色
x[0].style.backgroundColor = "red";

Try It Yourself

提示：页面下方提供更多实例。

语法

element.querySelectorAll(cssSelectors)

参数

参数 描述
cssSelectors

必需。字符串。规定一个或多个 CSS 选择器来匹配元素。

CSS 选择器用于根据 id、类、类型、属性、属性值等选择 HTML 元素。

对于多个选择器，用逗号分隔每个选择器。

提示：有关所有 CSS 选择器的列表，请查看我们的 CSS 选择器参考手册。

技术细节

返回值：

NodeList 对象，表示与指定 CSS 选择器匹配的当前元素的所有后代元素。

NodeList 是静态的集合，这意味着 DOM 中的改变对集合没有影响。

Note:如果指定的选择器无效，则抛出 SYNTAX_ERR 异常
DOM 版本： Selectors Level 1 Document Object

更多实例

例子 2

获取 <div> 元素内的所有 <p> 元素，并设置第一个 <p> 元素（索引 0）的背景颜色：

// Maghanap ng elemento na may id="myDIV" (div), pagkatapos ay hanapin ang lahat ng p na elemento sa loob ng div
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// 设置 div 中第一个 <p> 元素（索引 0）的背景颜色
x[0].style.backgroundColor = "red";

Try It Yourself

例子 3

获取 <div> 中 class="example" 的所有 <p> 元素，并设置第一个 <p> 元素的背景：

// Maghanap ng elemento na may id="myDIV" (div), pagkatapos ay hanapin ang lahat ng p na elemento na may class="example" sa loob ng div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Iset ang kulay ng background ng unang <p> elemento na may class="example" sa div (index 0)
x[0].style.backgroundColor = "red";

Try It Yourself

Halimbawa 4

Hanapin kung gaano karami ang elemento na may class="example" sa <div> elemento (gamit ang length attribute ng NodeList object):

/* Hanapin ang elemento na may id="myDIV" (div), pagkatapos ay hanapin ang lahat ng p na elemento na may class="example" sa loob ng div, ibalik ang bilang ng naakong elemento */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Try It Yourself

Halimbawa 5

Iset ang kulay ng background ng lahat ng elemento na may class="example" sa <div> elemento:

// Maghanap ng elemento na may id="myDIV" (div), pagkatapos ay hanapin ang lahat ng elemento na may class="example" sa loob ng div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Lumikha ng for loop at itakda ang kulay ng background ng lahat ng elemento na may class="example" sa div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Try It Yourself

Halimbawa 6

Iset ang kulay ng background ng lahat ng <p> elemento sa <div> elemento:

// Maghanap ng elemento na may id="myDIV" (div), pagkatapos ay hanapin ang lahat ng p na elemento sa loob ng div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Lumikha ng for loop at itakda ang kulay ng background ng lahat ng p elemento sa div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Try It Yourself

Halimbawa 7

Iset ang estilo ng border ng lahat ng <a> na may target attribute sa <div> elemento:

// Maghanap ng elemento na may id="myDIV" (div), pagkatapos ay hanapin ang lahat ng <a> na may attribute na target sa loob ng div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Create a for loop and set the border of all <a> elements with the target attribute within div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Try It Yourself

Example 8

Set the background color of all <h2>, <div>, and <span> elements within <div>:

// Get the element with id="myDIV" (div), then get all <h2>, <div>, and <span> elements within <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Create a for loop and set the background color of all <h2>, <div>, and <span> elements within <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Try It Yourself

Browser Support

The numbers in the table indicate the first browser version that fully supports this method.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Note:Internet Explorer 8 supports CSS2 selectors. IE9 and higher versions also support CSS3.

Related Pages

CSS Tutorial:CSS 选择器

CSS Reference Manual:CSS 选择器参考手册

JavaScript Tutorial:JavaScript HTML DOM Node List

JavaScript Reference Manual:element.querySelector()

HTML DOM Reference Manual:document.querySelectorAll()