In 了解 DOM 树和节点中，我们回顾了 DOM 如何构建为称为节点的对象树，这些节点可以是文本、注释或元素。通常当我们访问 DOM 中的内容时，会通过 HTML 元素节点。
为了能够自信地访问 DOM 中的元素，最好具备 CSS 选择器、语法和术语的应用知识以及对 HTML 元素的理解。在本教程中，您将学习访问 DOM 中元素的多种方法：通过 ID、类、标签和查询选择器。
下面是我们将在本教程中介绍的五种方法的表格概述。
| Gets | Selector Syntax | Method |
|---|---|---|
| ID | #demo |
getElementById() |
| Class | .demo |
getElementsByClassName() |
| Tag | demo |
getElementsByTagName() |
| Selector (single) | querySelector() |
|
| Selector (all) | querySelectorAll() |
在学习 DOM 时，自己使用示例会很有帮助，以确保您理解并记住所学的信息。
创建一个新文件，access.html，在您自己的项目中完成本文中的示例。如果您不确定如何在本地使用 JavaScript 和 HTML，请查看我们的如何将 JavaScript 添加到 HTML教程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing Elements in the DOM</title>
<style>
html { font-family: sans-serif; color: #333; }
body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
</style>
</head>
<body>
<h1>Accessing Elements in the DOM</h1>
<h2>ID (#demo)</h2>
<div id="demo">Access me by ID</div>
<h2>Class (.demo)</h2>
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
<h2>Tag (article)</h2>
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
<h2>Query Selector</h2>
<div id="demo-query">Access me by query</div>
<h2>Query Selector All</h2>
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
</body>
</html>
在此 HTML 文件中，我们有许多元素，我们将使用不同的方式访问这些元素document方法。当我们在浏览器中渲染该文件时，它将类似于以下内容：
我们将使用我们在Overview访问文件中的可用元素。
访问 DOM 中单个元素的最简单方法是通过其唯一的ID。您可以通过 ID 获取元素getElementById()的方法document object.
document.getElementById();
为了通过 ID 访问，HTML 元素必须有一个id属性。你有一个divID 为的元素demo您可以使用：
<div id="demo">Access me by ID</div>
In the Console，获取元素并将其分配给demoId多变的。
- 常量解冻=document.getElementById('demo');
Logging demoId控制台将返回整个 HTML 元素。
- 控制台日志(demoId);
Output<div id="demo">Access me by ID</div>
您可以通过更改来确保您正在访问正确的元素border财产给purple.
- demoId.style.border= '1px纯紫色';
完成此操作后，您的实时页面将如下所示：
通过ID访问元素是在DOM中快速获取元素的有效方法。但是，它也有缺点：ID 对于页面必须始终是唯一的，因此您一次只能访问单个元素getElementById()方法。如果您想向整个页面的许多元素添加功能，您的代码很快就会变得重复。
The class属性用于访问 DOM 中的一个或多个特定元素。您可以使用给定类名获取所有元素getElementsByClassName() method.
document.getElementsByClassName();
现在我们想要访问多个元素，在我们的示例中，我们有两个带有 a 的元素demo class.
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
访问这些元素Console并将它们放入一个名为的变量中demoClass.
- 常量演示类=document.getElementsByClassName('demo');
此时，您可能会很想按照与 ID 示例相同的方式修改元素。但是，如果您尝试运行以下代码并更改border将类演示元素的属性设置为橙色，您将收到错误。
- demoClass.style.border= '1px 纯橙色';
OutputUncaught TypeError: Cannot set property 'border' of undefined
这不起作用的原因是因为您不只是获取一个元素，而是拥有一个类似数组的元素对象。
- 控制台日志(演示类);
Output(2) [div.demo, div.demo]
JavaScript 数组必须使用索引号进行访问。您可以使用索引更改此数组的第一个元素0.
- 演示类[0].style.border= '1px 纯橙色';
通常，当按类访问元素时，我们希望对文档中具有该特定类的所有元素应用更改，而不仅仅是一个。您可以通过创建一个来做到这一点for循环，并循环遍历数组中的每个项目。
-
for (i = 0; i <demoClass.length; i++) {
- 演示类[i].style.border= '1px 纯橙色';
-
}
当您运行此代码时，您的实时页面将呈现如下：
您现在已经选择了页面上具有demo类，并改变了border财产给orange.
访问页面上多个元素的一种不太具体的方法是通过其 HTML 标签名称。您可以通过标签访问元素getElementsByTagName() method.
document.getElementsByTagName();
对于我们的标签示例，我们使用article元素。
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
就像通过元素的类访问元素一样，getElementsByTagName()将返回一个类似数组的元素对象，您可以使用以下命令修改文档中的每个标签for loop.
- 常量演示标签=document.getElementsByTagName('文章');
-
-
for (i = 0; i <demoTag.length; i++) {
- 演示标签[i].style.border= '1px 纯蓝色';
-
}
运行代码后，实时页面将被修改如下：
循环改变了border所有人的财产article元素到blue.
如果您有任何相关经验jQueryAPI，您可能熟悉 jQuery 使用 CSS 选择器访问 DOM 的方法。
$('#demo'); // returns the demo ID element in jQuery
您可以使用纯 JavaScript 执行相同的操作querySelector() and querySelectorAll()方法。
document.querySelector();
document.querySelectorAll();
要访问单个元素，您可以使用querySelector()方法。在我们的 HTML 文件中，我们有一个demo-query element
<div id="demo-query">Access me by query</div>
选择器id属性是哈希符号（#）。您可以使用以下方式分配元素demo-queryid 到demoQuery多变的。
- const demoQuery=文档.querySelector('#demo-query');
对于具有多个元素（例如类或标签）的选择器，querySelector()将返回与查询匹配的第一个元素。您可以使用querySelectorAll()方法来收集与特定查询匹配的所有元素。
在示例文件中，有两个元素demo-query-all类适用于他们。
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
选择器class属性是句点或句号 (.），这样你就可以通过以下方式访问该类.demo-query-all.
- const demoQueryAll=文档.querySelectorAll('.demo-query-all');
使用forEach()方法，你可以应用颜色green to the border所有匹配元素的属性。
- demoQueryAll.forEach(query => {
- 查询.样式.边框= '1px 纯绿色';
-
});
With querySelector(), 逗号分隔值用作 OR 运算符。例如，querySelector('div, article')将匹配div or article，以文档中最先出现的为准。和querySelectorAll(), 逗号分隔值用作 AND 运算符，并且querySelectorAll('div, article')将匹配所有div and article文档中的值。
使用查询选择器方法非常强大，因为您可以像在 CSS 文件中一样访问 DOM 中的任何元素或元素组。有关选择器的完整列表，请查看CSS 选择器在 Mozilla 开发者网络上。
以下是您上面所做工作的完整脚本。您可以使用它来访问示例页面上的所有元素。将文件另存为access.js并在关闭之前将其加载到 HTML 文件中body tag.
// Assign all elements
const demoId = document.getElementById('demo');
const demoClass = document.getElementsByClassName('demo');
const demoTag = document.getElementsByTagName('article');
const demoQuery = document.querySelector('#demo-query');
const demoQueryAll = document.querySelectorAll('.demo-query-all');
// Change border of ID demo to purple
demoId.style.border = '1px solid purple';
// Change border of class demo to orange
for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange';
}
// Change border of tag demo to blue
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue';
}
// Change border of ID demo-query to red
demoQuery.style.border = '1px solid red';
// Change border of class query-all to green
demoQueryAll.forEach(query => {
query.style.border = '1px solid green';
});
您的最终 HTML 文件将如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing Elements in the DOM</title>
<style>
html { font-family: sans-serif; color: #333; }
body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
</style>
</head>
<body>
<h1>Accessing Elements in the DOM</h1>
<h2>ID (#demo)</h2>
<div id="demo">Access me by ID</div>
<h2>Class (.demo)</h2>
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
<h2>Tag (article)</h2>
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
<h2>Query Selector</h2>
<div id="demo-query">Access me by query</div>
<h2>Query Selector All</h2>
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
<script src="access.js"></script>
</body>
</html>
您可以继续处理这些模板文件，通过访问 HTML 元素进行其他更改。
在本教程中，我们介绍了 5 种访问 DOM 中 HTML 元素的方法 - 按 ID、按类、按 HTML 标签名称和按选择器。您用于获取一个元素或一组元素的方法将取决于浏览器支持以及您将操作的元素数量。现在，您应该可以放心地使用 JavaScript 通过 DOM 访问文档中的任何 HTML 元素。