如何访问 DOM 中的元素

简介

在理解DOM树和Nodes，》中，我们讨论了如何将DOM构造为称为节点的对象树，这些节点可以是文本、注释或元素。通常，当我们访问DOM中的内容时，它将通过一个HTML元素节点。

为了能够放心地访问DOM中的元素，最好是具备CSS选择器、语法和术语的实用知识，并理解HTML元素。在本教程中，您将学习访问DOM中的元素的几种方法：按ID、类、标记和查询选择器。

概述

下面是我们将在本教程中介绍的五种方法的表格概述。

| 获取 | 选择器语法|方法 | | ---|-- | - -| | ID | # demo | getElementById（) | | 类 | .demo | getElementsByClassName（)| | 标签 | 演示 | getElementsByTagName（) | | 单（single)| | query（) | | （全部) | | querySelectorAll（) |

在学习DOM时，自己使用示例以确保理解和保留所学的信息是很有帮助的。

在您自己的项目中创建一个新文件acces.html，以完成本文中的示例。如果您不确定如何在本地使用JAVASCRIPT和Html，请查看我们的如何将JAVASCRIPT添加到HTML]教程。

 1[label access.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4
 5<head>
 6  <meta charset="utf-8">
 7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8
 9  <title>Accessing Elements in the DOM</title>
10
11  <style>
12    html { font-family: sans-serif; color: #333; }
13    body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
14    div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
15  </style>
16
17</head>
18
19<body>
20
21  <h1>Accessing Elements in the DOM</h1>
22
23  <h2>ID (#demo)</h2>
24  <div id="demo">Access me by ID</div>
25
26  <h2>Class (.demo)</h2>
27  <div class="demo">Access me by class (1)</div>
28  <div class="demo">Access me by class (2)</div>
29
30  <h2>Tag (article)</h2>
31  <article>Access me by tag (1)</article>
32  <article>Access me by tag (2)</article>
33
34  <h2>Query Selector</h2>
35  <div id="demo-query">Access me by query</div>
36
37  <h2>Query Selector All</h2>
38  <div class="demo-query-all">Access me by query all (1)</div>
39  <div class="demo-query-all">Access me by query all (2)</div>
40
41</body>
42
43</html>

在这个HTML文件中，我们有许多元素，我们将通过不同的Document方法访问这些元素。当我们在浏览器中呈现该文件时，它将如下所示：

Access.html page的浏览器呈现

我们将使用在上面的Overview中概述的不同方法来访问文件中的可用元素。

按ID访问元素

访问DOM中的单个元素的最简单方法是通过其唯一的ID.您可以通过Document对象的getElementById()方法按ID获取元素。

1document.getElementById();

为了能够通过ID访问，HTML元素必须有一个id属性。您有一个ID为demo的div元素，可以使用：

1<div id="demo">Access me by ID</div>

在_CONSOLE_中获取元素并将其赋给demoId变量。

1const demoId = document.getElementById('demo');

将demoId记录到控制台将返回整个HTML元素。

1console.log(demoId);

1[secondary_label Output]
2<div id="demo">Access me by ID</div>

您可以通过将border属性更改为Purple来确保访问的元素是正确的。

1demoId.style.border = '1px solid purple';

执行此操作后，您的活动页面将如下所示：

ID元素styling的浏览器呈现

通过ID访问元素是在DOM中快速获取元素的有效方法。但是，它也有缺点：一个ID对于页面来说必须始终是唯一的，因此使用getElementById()方法一次只能访问一个元素。如果要向整个页面中的许多元素添加一个函数，您的代码很快就会变得重复。

按类访问元素

class属性用于访问DOM中的一个或多个特定元素。您可以使用getElementsByClassName()方法获取具有给定类名的所有元素。

1document.getElementsByClassName();

现在我们想要访问多个元素，在我们的例子中，我们有两个元素和一个demo类。

1<div class="demo">Access me by class (1)</div>
2<div class="demo">Access me by class (2)</div>

在_CONSOLE_中访问这些元素，并将其放入名为demoClass的变量中。

1const demoClass = document.getElementsByClassName('demo');

此时，可能很想用与ID示例相同的方式修改元素。但是，如果你尝试运行下面的代码，并将类demo元素的border属性更改为橙色，你会得到一个错误。

1demoClass.style.border = '1px solid orange';

1[secondary_label Output]
2Uncaught TypeError: Cannot set property 'border' of undefined

这种方法不起作用的原因是，您拥有的不是一个元素，而是一个类似数组的元素对象。

1console.log(demoClass);

1[secondary_label Output]
2(2) [div.demo, div.demo]

必须使用索引号访问JAVASCRIPT arrays。您可以使用索引0来更改此数组的第一个元素。

1demoClass[0].style.border = '1px solid orange';

通常，当按类访问元素时，我们希望将更改应用于文档中具有该特定类的所有元素，而不仅仅是一个元素。你可以通过创建一个for循环，并循环遍历数组中的每一项来实现。

1for (i = 0; i < demoClass.length; i++) {
2  demoClass[i].style.border = '1px solid orange';
3}

当您运行此代码时，您的活动页面将呈现如下所示：

浏览器渲染类元素样式

现在，您已经选择了页面上每个包含demo类的元素，并将border属性更改为orange。

通过标签访问元素

访问页面上的多个元素的一种不太具体的方法是通过其HTML标记名。您可以使用getElementsByTagName()方法通过标记访问元素。

1document.getElementsByTagName();

对于我们的标签示例，我们使用了article元素。

1<article>Access me by tag (1)</article>
2<article>Access me by tag (2)</article>

就像通过类访问元素一样，getElementsByTagName（)将返回一个类似数组的元素对象，您可以使用for循环修改文档中的每个标签。

1const demoTag = document.getElementsByTagName('article');
2
3for (i = 0; i < demoTag.length; i++) {
4  demoTag[i].style.border = '1px solid blue';
5}

在运行代码时，实时页面将按如下方式修改：

标记元素styling的浏览器呈现

循环将所有文章元素的border属性更改为Blue。

♪

如果您有使用jQuery的经验，您可能熟悉https://jquery.com/)选择器访问DOM的方法。

1$('#demo'); // returns the demo ID element in jQuery

您可以在普通的JavaScript中使用querySelector()和querySelectorAll()方法执行相同的操作。

1document.querySelector();
2document.querySelectorAll();

要访问单个元素，可以使用querySelector()方法。在我们的HTML文件中，我们有一个demo-query元素

1<div id="demo-query">Access me by query</div>

id属性的选择符是散列符号(# )。您可以将ID为demo-query的元素赋给demoQuery变量。

1const demoQuery = document.querySelector('#demo-query');

如果选择器有多个元素，例如一个类或一个标签，则querySelector()将返回第一个匹配查询的元素。您可以使用querySelectorAll()方法收集与特定查询匹配的所有元素。

在示例文件中，有两个元素应用了demo-Query-all类。

1<div class="demo-query-all">Access me by query all (1)</div>
2<div class="demo-query-all">Access me by query all (2)</div>

类属性的选择符是句点或句号(.)，因此您可以使用.demo-Query-all来访问类。

1const demoQueryAll = document.querySelectorAll('.demo-query-all');

使用forEach（)方法，您可以将颜色green应用于所有匹配元素的border属性。

1demoQueryAll.forEach(query => {
2  query.style.border = '1px solid green';
3});

querySelector()styling的浏览器呈现

使用querySelector()时，逗号分隔值充当OR运算符。例如，querySelector(‘div，文章’)将匹配div或文章，以文档中最先出现的那个为准。对于querySelectorAll()，逗号分隔值作为AND运算符，并且querySelectorAll(‘div，文章’)将匹配文档中所有的div和文章值。

使用查询选择器方法非常强大，因为您可以像在CSS文件中一样访问DOM中的任何元素或元素组。有关选择器的完整列表，请查看mozilla开发者网络上的css Selectors。

完整的JavaScript代码

以下是您在上面完成的工作的完整脚本。您可以使用它来访问我们的示例页面上的所有元素。将文件另存为acces.js，并将其加载到位于body结束标记之前的HTML文件中。

 1[label access.js]
 2// Assign all elements
 3const demoId = document.getElementById('demo');
 4const demoClass = document.getElementsByClassName('demo');
 5const demoTag = document.getElementsByTagName('article');
 6const demoQuery = document.querySelector('#demo-query');
 7const demoQueryAll = document.querySelectorAll('.demo-query-all');
 8
 9// Change border of ID demo to purple
10demoId.style.border = '1px solid purple';
11
12// Change border of class demo to orange
13for (i = 0; i < demoClass.length; i++) {
14  demoClass[i].style.border = '1px solid orange';
15}
16
17// Change border of tag demo to blue
18for (i = 0; i < demoTag.length; i++) {
19  demoTag[i].style.border = '1px solid blue';
20}
21
22// Change border of ID demo-query to red
23demoQuery.style.border = '1px solid red';
24
25// Change border of class query-all to green
26demoQueryAll.forEach(query => {
27  query.style.border = '1px solid green';
28});

最终的HTML文件将如下所示：

 1[label access.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4
 5<head>
 6  <meta charset="utf-8">
 7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8
 9  <title>Accessing Elements in the DOM</title>
10
11  <style>
12    html { font-family: sans-serif; color: #333; }
13    body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
14    div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
15  </style>
16
17</head>
18
19<body>
20
21  <h1>Accessing Elements in the DOM</h1>
22
23  <h2>ID (#demo)</h2>
24  <div id="demo">Access me by ID</div>
25
26  <h2>Class (.demo)</h2>
27  <div class="demo">Access me by class (1)</div>
28  <div class="demo">Access me by class (2)</div>
29
30  <h2>Tag (article)</h2>
31  <article>Access me by tag (1)</article>
32  <article>Access me by tag (2)</article>
33
34  <h2>Query Selector</h2>
35  <div id="demo-query">Access me by query</div>
36
37  <h2>Query Selector All</h2>
38  <div class="demo-query-all">Access me by query all (1)</div>
39  <div class="demo-query-all">Access me by query all (2)</div>
40
41  <script src="access.js"></script>
42
43</body>
44
45</html>

您可以继续处理这些模板文件，以通过访问HTML元素进行其他更改。

结论

在本教程中，我们介绍了通过Dom-by ID、按类、按HTML标记名和按选择器访问HTML元素的5种方法。获取一个或一组元素所使用的方法将取决于浏览器支持以及要操作的元素数量。现在，您应该可以放心地通过DOM使用JavaScript访问文档中的任何HTML元素。

Published At
Categories with 技术
Tagged with
comments powered by Disqus