Document.querySelector 教程
最后修改: 2025 年 3 月 20 日
在本文中，我们将通过实际例子演示如何使用 querySelector 在 JavaScript 中选择 HTML 元素。
Document.querySelector
querySelector 方法是 Document 对象的一部分，它检索文档中与指定的 CSS 选择器匹配的第一个元素。 如果未找到匹配项，则返回 null。
相比之下，querySelectorAll 返回一个静态的 NodeList，其中包含与给定选择器组匹配的所有元素。 此列表不会随文档更改而更新。
Document.querySelector 示例
以下示例说明了如何使用 querySelector 和 querySelectorAll 动态地操作 HTML 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document.querySelector</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/components/button.min.css">
<style>
body { margin: 3em }
.selected { background-color: #eee }
.container {
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 50px;
grid-column-gap:5px;
margin-bottom: 1em;
}
div>div {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<button id="first" type="submit" class="ui grey button">First</button>
<button id="all" type="submit" class="ui brown button">All</button>
<button id="clear" type="submit" class="ui brown button">Clear</button>
<script src="main.js"></script>
</body>
</html>
此 HTML 文档包含一个容器内的五个带边框的 div 元素，它们被样式化为网格。 三个按钮触发对这些 div 的视觉更改。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/components/button.min.css">
我们使用 Semantic UI 框架来增强文档的外观，以获得一致的按钮样式。
.selected { background-color: #eee }
.selected 类将浅灰色背景应用于高亮的 div 元素。
.container {
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 50px;
grid-column-gap:5px;
margin-bottom: 1em;
}
.container 类使用 CSS Grid 将五个 div 排列在单行中，具有相等的列宽和它们之间的小间隙。
div>div {
border: 1px solid #ccc;
}
容器内的内部 div 具有浅灰色边框，以便清晰的视觉分隔。
<div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
五个空的 div 元素嵌套在一个具有 container 类的父 div 中。
<button id="first" type="submit" class="ui grey button">First</button> <button id="all" type="submit" class="ui brown button">All</button> <button id="clear" type="submit" class="ui brown button">Clear</button>
三个按钮控制 div 元素：“First”突出显示第一个 div，“All”突出显示所有 div，而“Clear”删除突出显示。 Semantic UI 样式增强了它们的外观。
<script src="main.js"></script>
JavaScript 逻辑驻留在外部 main.js 文件中，该文件链接在文档的末尾。
document.getElementById("first").onclick = (e) => {
let tag = document.querySelector(".container div:first-child");
tag.className = "selected";
};
document.getElementById("all").onclick = (e) => {
let tags = document.querySelectorAll(".container div");
tags.forEach( tag => {
tag.className = "selected";
});
};
document.getElementById("clear").onclick = (e) => {
let tags = document.querySelectorAll(".container div");
tags.forEach( tag => {
tag.classList.remove("selected");
});
};
main.js 文件定义了每个按钮的行为，使用 querySelector 和 querySelectorAll 来操作 DOM。
document.getElementById("first").onclick = (e) => {
一个事件监听器使用 onclick 属性附加到“First”按钮，该属性通过 getElementById 选中。
let tag = document.querySelector(".container div:first-child");
querySelector 方法使用 :first-child 伪类，以第一个 div 为目标，该 div 位于 .container 内部。
tag.className = "selected";
selected 类被分配给目标 div，应用灰色背景。
let tags = document.querySelectorAll(".container div");
querySelectorAll 方法将 .container 内的所有 div 元素作为 NodeList 检索。
tags.forEach( tag => {
tag.className = "selected";
});
使用 forEach，我们遍历 NodeList 并将 selected 类应用于每个 div 元素。
此屏幕截图显示在单击“First”按钮后，第一个 div 以灰色背景突出显示，演示了该效果。
来源
在本教程中，我们探讨了使用 querySelector 和 querySelectorAll 选择和操作 HTML 元素的方法。