如何访问DOM中的元素

来自菜鸟教程
跳转至：导航、​搜索

介绍

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

为了精通访问 DOM 中的元素，必须具备 CSS 选择器、语法和术语的工作知识以及对 HTML 元素的理解。 在本教程中，我们将介绍几种访问 DOM 中元素的方法：通过 ID、类、标签和查询选择器。

概述

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

获取 选择器语法 方法
ID #demo getElementById()
班级 .demo getElementsByClassName()
标签 demo getElementsByTagName()
选择器（单个） querySelector()
选择器（全部） querySelectorAll()

在学习 DOM 时，在您自己的计算机上键入示例以确保您理解并保留所学信息，这一点很重要。

您可以将此 HTML 文件 access.html 保存到您自己的项目中，以便与本文一起完成示例。 如果您不确定如何在本地使用 JavaScript 和 HTML，请查看我们的 如何将 JavaScript 添加到 HTML 教程。

访问.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 中概述的不同方法来访问文件中的可用元素。

按 ID 访问元素

访问 DOM 中单个元素的最简单方法是通过其唯一的 ID。 我们可以使用 document 对象的 getElementById() 方法按 ID 获取元素。 

document.getElementById();

为了通过 ID 访问，HTML 元素必须具有 id 属性。 我们有一个 ID 为 demo 的 div 元素。 

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

在 Console 中，让我们获取元素并将其分配给 demoId 变量。 

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

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

console.log(demoId);

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

我们可以通过将 border 属性更改为 purple 来确定我们正在访问正确的元素。 

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

一旦我们这样做，我们的实时页面将如下所示：

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

按类访问元素

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

document.getElementsByClassName();

现在我们要访问多个元素，在我们的示例中，我们有两个具有 demo 类的元素。 

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

让我们访问 Console 中的元素并将它们放入一个名为 demoClass 的变量中。 

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

此时，您可能认为可以像使用 ID 示例一样修改元素。 但是，如果我们尝试运行以下代码并将类演示元素的 border 属性更改为橙色，则会出现错误。 

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

OutputUncaught TypeError: Cannot set property 'border' of undefined

这不起作用的原因是因为我们有一个类似数组的元素对象，而不是只获取一个元素。 

console.log(demoClass);

Output(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>Access me by tag (1)</article>
<article>Access me by tag (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'); // returns the demo ID element in jQuery

我们可以使用 querySelector() 和 querySelectorAll() 方法在纯 JavaScript 中做同样的事情。 

document.querySelector();
document.querySelectorAll();

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

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

id 属性的选择器是井号 (#)。 我们可以将具有 demo-query id 的元素分配给 demoQuery 变量。 

const demoQuery = document.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 = document.querySelectorAll('.demo-query-all');

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

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

使用 querySelector()，逗号分隔值用作 OR 运算符。 例如，querySelector('div, article') 将匹配 div 或 article，以文档中最先出现的为准。 使用 querySelectorAll()，逗号分隔值用作 AND 运算符，querySelectorAll('div, article') 将匹配所有 div 和 article 值文档。

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

完整的 JavaScript 代码

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

访问.js 

// 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 文件将如下所示：

访问.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 标记名称和按选择器。 您将用于获取一个元素或一组元素的方法将取决于浏览器支持以及您将要操作的元素数量。 您现在应该有信心通过 DOM 使用 JavaScript 访问文档中的任何 HTML 元素。

取自“https://cainiaojiaocheng.com/index.php?title=如何访问DOM中的元素&oldid=26857”
Powered by MediaWiki