JavaScript querySelector
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 document.querySelector 方法。这个强大的方法允许开发人员使用 CSS 选择器来选择 DOM 元素，提供了灵活的元素选择功能。
基本定义
document.querySelector 方法返回与指定 CSS 选择器或选择器组匹配的第一个元素。它会搜索整个文档，并且只返回第一个匹配的元素。
与 getElementById 不同，querySelector 可以使用任何 CSS 选择器，包括类、属性、伪类和复杂选择器。这使得它在 DOM 操作任务中更加通用。
基本 querySelector
此示例演示了如何使用 querySelector 按类名选择元素。
<!DOCTYPE html>
<html>
<head>
<title>Basic querySelector</title>
</head>
<body>
<div class="content">Hello there!</div>
<script>
const element = document.querySelector('.content');
console.log(element.textContent);
</script>
</body>
</html>
在这个基本示例中，我们有一个带有 "content" 类的 div 元素。JavaScript 代码使用类选择器 (.) 的 querySelector 来检索此元素，并将其文本内容记录到控制台。
这展示了 querySelector 通过 CSS 选择器访问元素的基本用法。该方法返回第一个匹配的元素，然后我们可以根据需要对其进行操作。
按 ID 选择
此示例演示了如何使用 querySelector 按 ID 选择元素，这类似于 getElementById。
<!DOCTYPE html>
<html>
<head>
<title>Selecting by ID</title>
</head>
<body>
<h1 id="main-heading">Welcome to our site</h1>
<script>
const heading = document.querySelector('#main-heading');
heading.style.color = 'blue';
heading.style.fontSize = '2.5rem';
</script>
</body>
</html>
在这里，我们使用 ID 选择器 (#) 按 ID 选择一个 h1 元素。然后，我们通过 JavaScript 直接修改其样式属性。
虽然这可以获得与 getElementById 类似的结果，但 querySelector 提供了一种更一致的方式，可以在代码中始终使用 CSS 选择器语法来选择元素。
复杂选择器
此示例演示了如何使用复杂的 CSS 选择器与 querySelector。
<!DOCTYPE html>
<html>
<head>
<title>Complex Selectors</title>
</head>
<body>
<ul class="menu">
<li>Home</li>
<li class="active">Products</li>
<li>About</li>
</ul>
<script>
const activeItem = document.querySelector('ul.menu li.active');
activeItem.style.fontWeight = 'bold';
activeItem.style.color = 'green';
</script>
</body>
</html>
在此示例中，我们使用后代选择器结合类选择器来定位菜单中的特定列表项。选择器 'ul.menu li.active' 会查找作为类为 "menu" 的 ul 元素后代的、类为 "active" 的 li 元素。
这展示了 querySelector 使用熟悉的 CSS 选择器语法在复杂 DOM 结构中定位特定元素的功能。
属性选择器
此示例演示了如何使用属性选择器与 querySelector。
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
</head>
<body>
<input type="text" placeholder="Enter your email" data-required="true">
<button onclick="validateInput()">Validate</button>
<script>
function validateInput() {
const input = document.querySelector('input[data-required="true"]');
if (!input.value) {
input.style.border = '2px solid red';
} else {
input.style.border = '';
}
}
</script>
</body>
</html>
在这里，我们使用属性选择器来查找具有特定 data 属性的 input 元素。选择器 'input[data-required="true"]' 会匹配任何具有值为 "true" 的 data-required 属性的 input 元素。
这表明 querySelector 可以与自定义 data 属性一起使用，以创建更具语义和可维护性的 JavaScript 代码。
伪类选择器
此示例演示了如何使用伪类选择器与 querySelector。
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-class Selectors</title>
</head>
<body>
<ul class="links">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
</ul>
<script>
const firstLink = document.querySelector('.links li:first-child a');
firstLink.style.color = 'purple';
firstLink.style.textDecoration = 'none';
</script>
</body>
</html>
在此示例中，我们使用 :first-child 伪类来选择列表中的第一个链接元素。选择器 '.links li:first-child a' 会定位类为 "links" 的元素内的第一个 li 元素的子元素 a。
这表明 querySelector 可以利用 CSS 伪类根据元素在文档中的位置或状态来选择元素。
来源
在本文中，我们展示了如何在 JavaScript 中使用 document.querySelector。此方法使用 CSS 选择器语法提供了强大的元素选择功能，使其成为现代 Web 开发的重要组成部分。
作者
列出 所有 JS DOM 教程。