JavaScript querySelectorAll
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 document.querySelectorAll 方法。这个强大的方法允许开发人员使用 CSS 选择器来选择多个 DOM 元素，从而提供了灵活的元素选择功能。
基本定义
document.querySelectorAll 方法返回一个静态 NodeList，表示与指定选择器组匹配的元素列表。与 getElementById 不同，它可以一次选择多个元素。
此方法接受任何有效的 CSS 选择器作为其参数。它返回所有匹配选择器的元素，而不仅仅是第一个。返回的 NodeList 不是实时的，这意味着如果 DOM 发生更改，它不会自动更新。
按标签名选择元素
此示例演示如何选择特定标签类型的所有元素。
<!DOCTYPE html>
<html>
<head>
<title>Selecting by Tag Name</title>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<div>A div element</div>
<p>Third paragraph</p>
<script>
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => {
console.log(p.textContent);
});
</script>
</body>
</html>
在此示例中，我们使用 querySelectorAll('p') 来选择文档中的所有段落元素。该方法返回一个包含所有匹配元素的 NodeList，然后我们使用 forEach 遍历它。
这演示了 querySelectorAll 按标签名选择元素的基本用法。NodeList 可以像数组一样进行迭代，尽管它不具备所有数组方法。
按类名选择元素
此示例展示了如何选择具有特定类名的元素。
<!DOCTYPE html>
<html>
<head>
<title>Selecting by Class</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p class="highlight">Highlighted paragraph</p>
<div>Regular div</div>
<p class="highlight">Another highlighted paragraph</p>
<script>
const highlighted = document.querySelectorAll('.highlight');
highlighted.forEach(el => {
el.style.fontWeight = 'bold';
});
</script>
</body>
</html>
在这里，我们使用 CSS 类选择器语法 (.highlight) 选择所有类名为 "highlight" 的元素。然后，我们修改每个元素的样式，使其文本加粗。
此示例展示了如何将 querySelectorAll 与类选择器结合使用，以一次性设置多个元素的样式。点前缀表示我们正在按类名而不是标签名进行选择。
按属性选择元素
此示例演示了如何根据属性选择元素。
<!DOCTYPE html>
<html>
<head>
<title>Selecting by Attribute</title>
</head>
<body>
<input type="text" placeholder="Enter name">
<input type="password" placeholder="Enter password">
<input type="text" placeholder="Enter email">
<script>
const textInputs = document.querySelectorAll('input[type="text"]');
textInputs.forEach(input => {
input.style.border = '2px solid blue';
});
</script>
</body>
</html>
在此示例中，我们使用属性选择器 (input[type="text"]) 来选择所有文本输入元素。然后，我们为每个元素应用蓝色边框。
这演示了 querySelectorAll 如何根据属性定位元素，从而提供对元素选择的精确控制。属性选择器对于处理表单元素尤其强大。
复杂选择器
此示例展示了如何使用复杂的 CSS 选择器配合 querySelectorAll。
<!DOCTYPE html>
<html>
<head>
<title>Complex Selectors</title>
</head>
<body>
<ul id="menu">
<li>Item 1</li>
<li class="special">Item 2</li>
<li>Item 3</li>
<li class="special">Item 4</li>
</ul>
<script>
const specialItems = document.querySelectorAll('#menu li.special');
specialItems.forEach(item => {
item.style.color = 'red';
});
</script>
</body>
</html>
在这里，我们使用一个复杂的选择器 (#menu li.special) 来选择 "menu" ID 元素下的所有类名为 "special" 的列表项。然后，我们将它们的文本颜色更改为红色。
此示例演示了 querySelectorAll 如何组合多种选择器类型以进行精确的元素定位。该方法支持所有 CSS 选择器语法，允许进行复杂的元素选择。
组合多个选择器
此示例展示了如何选择匹配多个选择器中任何一个的元素。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Selectors</title>
</head>
<body>
<h2>Section 1</h2>
<p>Paragraph in section 1</p>
<h3>Subsection</h3>
<p>Paragraph in subsection</p>
<h2>Section 2</h2>
<p>Paragraph in section 2</p>
<script>
const headings = document.querySelectorAll('h2, h3');
headings.forEach(heading => {
heading.style.textDecoration = 'underline';
});
</script>
</body>
</html>
在此示例中，我们使用逗号分隔的选择器列表 (h2, h3) 来选择所有 h2 和 h3 元素。然后，我们为这些标题元素添加下划线。
这演示了 querySelectorAll 如何在一次调用中匹配多个选择器的元素。逗号运算符的作用与 CSS 中的相同，选择与提供的任何选择器匹配的元素。
来源
在本文中，我们展示了如何在 JavaScript 中使用 document.querySelectorAll。此方法对于现代 DOM 操作至关重要，它使用 CSS 选择器提供了灵活的元素选择功能。
作者
列出 所有 JS DOM 教程。