简介
在了解 DOM 树和节点中，我们已经知道 DOM 是由称为节点的对象树结构组成的，节点可以是文本、注释或元素。通常情况下，当我们访问 DOM 中的内容时，会通过 HTML 元素节点进行访问。
为了能够自信地访问 DOM 中的元素，最好具备对 CSS 选择器、语法和术语的工作知识，以及对 HTML 元素的理解。在本教程中，您将学习几种访问 DOM 中元素的方法：通过 ID、class、tag 和查询选择器。
概览
以下是本教程中将涵盖的五种方法的表格概览。
| 获取方式 | 选择器语法 | 方法 |
| ID | #demo |
getElementById() |
| Class | .demo |
getElementsByClassName() |
| Tag | demo |
getElementsByTagName() |
| 选择器（单个） | querySelector() |
|
| 选择器（全部） | 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>访问 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>访问 DOM 中的元素</h1> <h2>ID (#demo)</h2> <div id="demo">通过 ID 访问我</div> <h2>Class (.demo)</h2> <div class="demo">通过 class 访问我 (1)</div> <div class="demo">通过 class 访问我 (2)</div> <h2>Tag (article)</h2> <article>通过标签访问我 (1)</article> <article>通过标签访问我 (2)</article> <h2>查询选择器</h2> <div id="demo-query">通过查询访问我</div> <h2>查询选择器全部</h2> <div class="demo-query-all">通过全部查询访问我 (1)</div> <div class="demo-query-all">通过全部查询访问我 (2)</div> </body> </html>
在这个 HTML 文件中，我们有许多元素，我们将使用不同的 document 方法来访问这些元素。当我们在浏览器中渲染文件时，它将类似于这样：
!access.html 页面在浏览器中的渲染效果
我们将使用上面概览中概述的不同方法来访问文件中可用的元素。
通过 ID 访问元素
在 DOM 中访问单个元素的最简单方式是通过其唯一的 ID。您可以使用 document 对象的 getElementById() 方法按 ID 获取元素。
document.getElementById();
要通过 ID 访问，HTML 元素必须具有一个 id 属性。您可以使用具有 ID 为 demo 的 div 元素：
<div id="demo">通过 ID 访问我</div>
在 Console 中，获取该元素并将其分配给 demoId 变量。
const demoId = document.getElementById('demo');
将 demoId 记录到控制台将返回整个 HTML 元素。
console.log(demoId);
<div id="demo">通过 ID 访问我</div>
通过将 border 属性更改为 purple，您可以确保自己正在访问正确的元素。
demoId.style.border = '1px solid purple';
这样做后，您的实时页面将如下所示：
!ID 元素样式的浏览器渲染
通过 ID 访问元素是在 DOM 中快速获取元素的有效方式。但是，它也有缺点：ID 必须始终是页面上唯一的，因此您只能使用 getElementById() 方法一次访问单个元素。如果您想要在整个页面上添加功能到多个元素，您的代码将很快变得重复。
通过类名访问元素
类属性用于访问 DOM 中的一个或多个特定元素。您可以使用 getElementsByClassName() 方法获取所有具有给定类名的元素。
document.getElementsByClassName();
现在我们想要访问多个元素，在我们的示例中，有两个具有 demo 类的元素。
<div class="demo">通过类访问我 (1)</div> <div class="demo">通过类访问我 (2)</div>
在 Console 中访问这些元素，并将它们放入名为 demoClass 的变量中。
const demoClass = document.getElementsByClassName('demo');
此时，可能会尝试以与 ID 示例相同的方式修改元素。然而，如果您尝试运行以下代码，并将类 demo 元素的 border 属性更改为橙色，您将收到错误消息。
demoClass.style.border = '1px solid orange';
Uncaught TypeError: Cannot set property 'border' of undefined
这不起作用的原因是，您不是只获取一个元素，而是获取了一个类似数组的对象。
console.log(demoClass);
(2) [div.demo, div.demo]
JavaScript 数组必须使用索引号访问。您可以使用索引 0 更改此数组的第一个元素。
demoClass[0].style.border = '1px solid orange';
通常，当通过类访问元素时，我们希望对具有特定类的文档中的所有元素应用更改，而不仅仅是一个。您可以通过创建一个 for 循环来实现这一点，并循环遍历数组中的每个项目。
for (i = 0; i < demoClass.length; i++) { demoClass[i].style.border = '1px solid orange'; }
运行此代码后，您的实时页面将呈现如下：
!类元素样式的浏览器渲染
您现在已选择了页面上具有 demo 类的每个元素，并将其 border 属性更改为 orange。
通过标签访问元素
访问页面上多个元素的一种不太具体的方式是通过其 HTML 标签名称。您可以使用 getElementsByTagName() 方法按标签访问元素。
document.getElementsByTagName();
对于我们的标签示例，我们使用 article 元素。
<article>通过标签访问我 (1)</article> <article>通过标签访问我 (2)</article>
就像通过类访问元素一样，getElementsByTagName() 将返回一个类似数组的元素对象，您可以使用 for 循环修改文档中的每个标签。
const demoTag = document.getElementsByTagName('article'); for (i = 0; i < demoTag.length; i++) { demoTag[i].style.border = '1px solid blue'; }
运行代码后，实时页面将被修改如下：
!标签元素样式的浏览器渲染
该循环将所有 article 元素的 border 属性更改为 blue。
查询选择器
如果您有使用 jQuery API 的经验，您可能熟悉 jQuery 使用 CSS 选择器访问 DOM 的方法。
$('#demo'); // 返回 jQuery 中的 demo ID 元素
您可以使用 querySelector() 和 querySelectorAll() 方法在纯 JavaScript 中执行相同操作。
document.querySelector(); document.querySelectorAll();
要访问单个元素，您可以使用 querySelector() 方法。在我们的 HTML 文件中，有一个具有 demo-query id 的元素
<div id="demo-query">通过查询访问我</div>
id 属性的选择器是井号 (#)。您可以将具有 demo-query id 的元素分配给 demoQuery 变量。
const demoQuery = document.querySelector('#demo-query');
对于具有多个元素的选择器，例如类或标签，querySelector() 将返回与查询匹配的第一个元素。您可以使用 querySelectorAll() 方法收集所有与特定查询匹配的元素。
在示例文件中，有两个应用了 demo-query-all 类的元素。
<div class="demo-query-all">通过查询全部访问我 (1)</div> <div class="demo-query-all">通过查询全部访问我 (2)</div>
class 属性的选择器是句号 (.)，因此您可以使用 .demo-query-all 访问类。
const demoQueryAll = document.querySelectorAll('.demo-query-all');
使用 forEach() 方法，您可以将颜色 green 应用于所有匹配元素的 border 属性。
demoQueryAll.forEach(query => { query.style.border = '1px solid green'; });
!querySelector() 样式的浏览器渲染
使用 querySelector()，逗号分隔的值充当 OR 运算符。例如，querySelector('div, article') 将匹配文档中首先出现的 div 或 article。使用 querySelectorAll()，逗号分隔的值充当 AND 运算符，querySelectorAll('div, article') 将匹配文档中所有 div 和 article 值。
使用查询选择器方法非常强大，因为您可以以与在 CSS 文件中相同的方式访问 DOM 中的任何元素或一组元素。有关选择器的完整列表，请查看 Mozilla 开发者网络上的 CSS 选择器。
完整的 JavaScript 代码
以下是你上面所做工作的完整脚本。你可以使用它来访问我们示例页面上的所有元素。将文件保存为 access.js，并在 HTML 文件中在闭合的 body 标签之前加载它。
// 分配所有元素 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'); // 将 ID 为 demo 的边框改为紫色 demoId.style.border = '1px solid purple'; // 将类为 demo 的边框改为橙色 for (i = 0; i < demoClass.length; i++) { demoClass[i].style.border = '1px solid orange'; } // 将标签为 demo 的边框改为蓝色 for (i = 0; i < demoTag.length; i++) { demoTag[i].style.border = '1px solid blue'; } // 将 ID 为 demo-query 的边框改为红色 demoQuery.style.border = '1px solid red'; // 将类为 query-all 的边框改为绿色 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>访问 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>访问 DOM 中的元素</h1> <h2>ID (#demo)</h2> <div id="demo">通过 ID 访问我</div> <h2>Class (.demo)</h2> <div class="demo">通过类访问我 (1)</div> <div class="demo">通过类访问我 (2)</div> <h2>Tag (article)</h2> <article>通过标签访问我 (1)</article> <article>通过标签访问我 (2)</article> <h2>查询选择器</h2> <div id="demo-query">通过查询访问我</div> <h2>查询选择器全部</h2> <div class="demo-query-all">通过全部查询访问我 (1)</div> <div class="demo-query-all">通过全部查询访问我 (2)</div> <script src="access.js"></script> </body> </html>
你可以继续使用这些模板文件进行额外的更改，以访问 HTML 元素。
结论
在本教程中，我们介绍了在 DOM 中访问 HTML 元素的 5 种方式 — 通过 ID、通过类、通过 HTML 标签名称和通过选择器。你将使用的方法取决于浏览器支持以及你将操作的元素数量。现在，你应该有信心通过 DOM 用 JavaScript 访问文档中的任何 HTML 元素。
