了解DOM树和节点

介绍

DOM 通常被称为 DOM 树，由称为 nodes 的对象树组成。在 DOM 简介中，我们介绍了文档对象模型 (DOM) 是什么，如何访问 document 对象并使用控制台修改其属性，以及 HTML 源代码和 DOM 的区别。

在本教程中，我们将回顾 HTML 术语，这对于使用 JavaScript 和 DOM 至关重要，我们将了解 DOM 树、什么是节点以及如何识别最常见的节点类型。最后，我们将超越控制台，创建一个 JavaScript 程序来交互式地修改 DOM。

HTML 术语

了解 HTML 和 JavaScript 术语对于了解如何使用 DOM 至关重要。让我们简要回顾一些 HTML 术语。

首先，让我们看一下这个 HTML 元素。

<a href="index.html">Home</a>

这里我们有一个锚元素，它是指向 index.html 的链接。

a 是标签
href 是属性
index.html是属性值
Home 是文本。

开始和结束标记之间的所有内容组合在一起构成整个 HTML 元素。

我们将使用上一教程中的 index.html：

索引.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>

</html>

使用 JavaScript 访问元素的最简单方法是通过 id 属性。让我们将上面的链接添加到我们的 index.html 文件中，其中 id 为 nav。

索引.html

...
<body>
  <h1>Document Object Model</h1>
  <a id="nav" href="index.html">Home</a>
</body>
...

在浏览器窗口中加载或重新加载页面并查看 DOM 以确保代码已更新。

我们将使用 getElementById() 方法来访问整个元素。在控制台中，键入以下内容：

document.getElementById('nav');

Output<a id="nav" href="index.html">Home</a>

我们已经使用 getElementById() 检索了整个元素。现在，我们不必在每次想要访问 nav 链接时都键入该对象和方法，而是可以将元素放入变量中以便更轻松地使用它。

let navLink = document.getElementById('nav');

navLink 变量包含我们的锚元素。从这里，我们可以轻松地修改属性和值。例如，我们可以通过更改 href 属性来更改链接的位置：

navLink.href = 'https://www.wikipedia.org';

我们还可以通过重新分配 textContent 属性来更改文本内容：

navLink.textContent = 'Navigate to Wikipedia';

现在，当我们在控制台中或通过检查 Elements 标签查看我们的元素时，我们可以看到元素是如何更新的。

navLink;

Output<a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>

这也反映在网站的前端。

刷新页面会将所有内容恢复为原始值。

至此，您应该了解如何使用 document 方法访问元素，如何将元素分配给变量，以及如何修改元素中的属性和值。

DOM 树和节点

DOM 中的所有项目都定义为 nodes。有许多类型的节点，但我们最常使用的主要有以下三种：

元素节点
文本节点
注释节点

当 HTML 元素是 DOM 中的一个项目时，它被称为 元素节点 。元素之外的任何单独文本都是 文本节点 ，而 HTML 注释是 注释节点 。除了这三种节点类型外，document本身就是一个document节点，是所有其他节点的根。

DOM由嵌套节点的树结构组成，通常称为DOM树。您可能熟悉由父母、孩子和兄弟姐妹组成的祖先家谱。 DOM 中的节点也称为父节点、子节点和兄弟节点，具体取决于它们与其他节点的关系。

为了演示，创建一个 nodes.html 文件。我们将添加文本、注释和元素节点。

节点.html

<!DOCTYPE html>
<html>

  <head>
    <title>Learning About Nodes</title>
  </head>

  <body>
    <h1>An element node</h1>
    <!-- a comment node -->
    A text node.
  </body>

</html>

html 元素节点是父节点。 head 和 body 是 html 的兄弟姐妹。 body 包含三个子节点，它们都是兄弟节点——节点的类型不会改变它的嵌套级别。

注意： 使用 HTML 生成的 DOM 时，HTML 源代码的缩进会创建许多空文本节点，这些节点在 DevTools 元素选项卡中不可见。阅读关于 DOM 中的空白

识别节点类型

文档中的每个节点都有一个 节点类型，可以通过 nodeType 属性访问。 Mozilla 开发者网络有一个所有节点类型常量的最新列表。下面是我们在本教程中使用的最常见节点类型的图表。

节点类型	价值	例子
`ELEMENT_NODE`	1	`<body>` 元素
`TEXT_NODE`	3	不属于元素的文本
`COMMENT_NODE`	8	`<!-- an HTML comment -->`

在 Developer Tools 的 Elements 选项卡中，您可能会注意到，每当您单击并突出显示 DOM 中的任何行时，== $0 的值都会出现在它旁边。这是通过键入 $0 来访问开发人员工具中当前活动元素的一种非常方便的方法。

在nodes.html的控制台中，点击body中的第一个元素，即h1元素。

在控制台中，通过nodeType属性获取当前选中节点的节点类型。

$0.nodeType;

Output1

选择 h1 元素后，您会看到 1 作为输出，我们可以看到它与 ELEMENT_NODE 相关。对文本和注释执行相同操作，它们将分别输出 3 和 8。

当您知道如何访问一个元素时，您可以在不突出显示 DOM 中的元素的情况下查看节点类型。

document.body.nodeType;

Output1

除了 nodeType 之外，还可以使用 nodeValue 属性获取文本或注释节点的值，使用 nodeName 获取元素的标签名称。

使用事件修改 DOM

到目前为止，我们只看到了如何在控制台中修改 DOM，我们看到的是暂时的；每次刷新页面时，更改都会丢失。在【X7X】介绍DOM【X34X】教程中，我们使用控制台更新了body的背景颜色。我们可以结合我们在本教程中学到的知识来创建一个交互式按钮，单击该按钮会执行此操作。

让我们回到我们的 index.html 文件并添加一个带有 id 的 button 元素。我们还将在新的 js 目录 js/scripts.js 中添加指向新文件的链接。

索引.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1> 
    <button id="changeBackground">Change Background Color</button>
    
    <script src="scripts.js"></script>
  </body>

</html>

JavaScript 中的 event 是用户已采取的操作。当用户将鼠标悬停在元素上，或单击元素或按下键盘上的特定键时，这些都是事件类型。在这种特殊情况下，我们希望我们的按钮能够在用户单击它时进行监听并准备好执行操作。我们可以通过向我们的按钮添加一个 事件侦听器 来做到这一点。

创建 scripts.js 并将其保存在新的 js 目录中。在文件中，我们将首先找到 button 元素并将其分配给一个变量。

js/scripts.js

let button = document.getElementById('changeBackground');

使用 addEventListener() 方法，我们将告诉按钮监听点击，并在点击后执行功能。

js/scripts.js

...
button.addEventListener('click', () => {
  // action will go here
});

最后，在函数内部，我们将编写与上一教程相同的代码，将背景颜色更改为 fuchsia。

js/scripts.js

...
document.body.style.backgroundColor = 'fuchsia';

这是我们的整个脚本：

js/scripts.js

let button = document.getElementById('changeBackground');

button.addEventListener('click', () => {
  document.body.style.backgroundColor = 'fuchsia';
});

保存此文件后，在浏览器中刷新 index.html。单击按钮，事件将触发。

由于 JavaScript 事件，页面的背景颜色已更改为紫红色。

结论

在本教程中，我们回顾了可以让我们理解和修改 DOM 的术语。我们了解了 DOM 是如何构建为通常是 HTML 元素、文本或评论的节点树的结构，并且我们创建了一个脚本，允许用户修改网站，而无需在开发人员控制台中手动输入代码。