JavaScript querySelectorAll
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 querySelectorAll 方法。这个强大的方法允许开发人员使用 CSS 选择器来选择多个 DOM 元素，从而在元素选择方面提供了灵活性。
基本定义
querySelectorAll 方法返回一个静态 NodeList，代表与指定选择器组匹配的元素列表。与 getElementById 不同，它可以一次选择多个元素。
此方法在 document 对象和单个元素上都可用。它接受任何有效的 CSS 选择器作为其参数，使其在 DOM 操作任务中具有极高的通用性。
基本 querySelectorAll
此示例演示了如何选择具有特定类名的所有元素。
<!DOCTYPE html>
<html>
<head>
<title>Basic querySelectorAll</title>
</head>
<body>
<p class="note">First note</p>
<p class="note">Second note</p>
<p class="note">Third note</p>
<script>
const notes = document.querySelectorAll('.note');
notes.forEach(note => {
console.log(note.textContent);
});
</script>
</body>
</html>
在这个基本示例中，我们有三个类名为“note”的段落元素。JavaScript 代码使用 querySelectorAll 选择所有这些元素，并将它们的文本内容记录到控制台。
该方法返回一个 NodeList，它是一个类数组对象，可以使用 forEach 进行迭代。这展示了 querySelectorAll 用于一次访问多个元素的基本用法。
选择多个元素类型
此示例显示了如何通过一次调用选择不同类型的元素。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Element Types</title>
</head>
<body>
<h2>Section Title</h2>
<p class="intro">Introduction text</p>
<div id="content">Main content here</div>
<script>
const elements = document.querySelectorAll('h2, .intro, #content');
elements.forEach(el => {
el.style.color = 'blue';
});
</script>
</body>
</html>
在这里，我们通过一次 querySelectorAll 调用选择一个 h2 元素、一个类名为“intro”的元素以及一个 ID 为“content”的元素。然后我们将它们的文本颜色更改为蓝色。
这表明 querySelectorAll 可以接受多个由逗号分隔的选择器，类似于 CSS 选择器语法。返回的 NodeList 包含文档顺序中的所有匹配元素。
嵌套元素选择
此示例演示了在特定容器内选择元素。
<!DOCTYPE html>
<html>
<head>
<title>Nested Selection</title>
</head>
<body>
<div id="container">
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<p>Outside paragraph</p>
<script>
const container = document.getElementById('container');
const innerParagraphs = container.querySelectorAll('p');
innerParagraphs.forEach(p => {
p.style.fontWeight = 'bold';
});
</script>
</body>
</html>
在此示例中，我们首先选择一个容器 div，然后在该元素上使用 querySelectorAll 来查找其中的所有段落元素。我们使这些段落加粗，同时保持外部段落不变。
这表明 querySelectorAll 可以在特定元素上调用，以仅在其后代中进行搜索。这种范围搜索在基于组件的开发中尤其有用。
属性选择器
此示例展示了如何将属性选择器与 querySelectorAll 一起使用。
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
</head>
<body>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="submit" value="Login">
<script>
const textInputs = document.querySelectorAll('input[type="text"]');
textInputs.forEach(input => {
input.style.border = '2px solid green';
});
</script>
</body>
</html>
在这里，我们使用属性选择器选择所有 type="text" 的 input 元素。然后，我们为这些特定的输入字段添加绿色边框，而使其他字段不受影响。
这展示了 querySelectorAll 的 CSS 样式属性选择器的强大功能。您可以使用任何 CSS 属性选择器模式，包括部分匹配，例如 [name^="user"] 用于以“user”开头的名称。
复杂选择器
此示例演示了如何将复杂的 CSS 选择器与 querySelectorAll 一起使用。
<!DOCTYPE html>
<html>
<head>
<title>Complex Selectors</title>
</head>
<body>
<ul class="menu">
<li>Home</li>
<li class="active">Products</li>
<li>Services</li>
<li>Contact</li>
</ul>
<script>
const items = document.querySelectorAll('ul.menu li:not(.active)');
items.forEach(item => {
item.style.opacity = '0.7';
});
</script>
</body>
</html>
在此示例中，我们选择 ul.menu 中所有不具有“active”类的 li 元素。然后，我们降低它们的透明度，以使活动项更加突出。
这表明 querySelectorAll 可以处理复杂的 CSS 选择器，包括组合器、伪类和否定。选择器引擎支持几乎所有的 CSS3 选择器语法，以实现强大的元素选择。
来源
在本文中，我们展示了如何在 JavaScript 中使用 querySelectorAll。此方法对于现代 DOM 操作和 Web 开发中的元素选择至关重要，并提供了 CSS 选择器的灵活性。
作者
列出 所有 JS DOM 教程。