JavaScript的querySelectorAll()

在JavaScript中，querySelectorAll()方法允许开发人员按照CSS选择器的模式查找匹配的元素。这个方法返回一个NodeList对象，其中包含符合选择器模式的所有元素。

语法

var elements = document.querySelectorAll(selectors);

• elements：一个NodeList对象，其中包含了所有匹配选择器模式的元素。
• selectors：一个CSS样式选择器字符串，用于要查找的元素。

示例

假设我们有如下的HTML代码：

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

我们可以使用querySelectorAll()方法来选择所有class为“item”的元素：

var items = document.querySelectorAll(".item");

这个方法返回的是一个NodeList对象，可以通过它来访问匹配元素的属性和方法。例如，我们可以使用以下代码来改变所有元素的文本颜色：

for (var i = 0; i < items.length; i++) {
  items[i].style.color = 'blue';
}

选择器语法

querySelectorAll()方法支持大多数的CSS选择器语法，包括：

• 标签选择器：使用标签名作为选择器，例如“div”。
• 类选择器：使用类名作为选择器，例如“.item”。
• ID选择器：使用ID名作为选择器，例如“#user”。
• 属性选择器：使用元素属性作为选择器，例如“[type='submit']”。
• 相邻兄弟选择器：使用“+”符号来表示相邻的下一个兄弟元素，例如“div + p”。
• 后代选择器：使用空格来表示后代元素，例如“div p”。
• 子元素选择器：使用“>”符号表示子元素，例如“ul > li”。

兼容性

querySelectorAll()方法最早作为DOM标准的一部分出现在IE8和Firefox 3.5中。现在它被所有主流浏览器所支持。