理解DOM

作者：大漠 日期：2018-05-16 点击：2638
JavaScript
DOM
会员专栏

特别声明：小站对部分原创文章已开启付费阅读，并开通年费VIP通道，年费价格为 ¥365.00元。如果您喜欢小站的内容，可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!(^_^)

特别声明，本文整个思路来源于@Tania Rascia的系列文章《Understanding the DOM》。

DOM是Document Object Model的简称，是网站具有交互性的重要组成部分。它是一个接口，允许编程语言操作网站的内容、结构和样式。JavaScript是浏览器中连接到DOM的客户端脚本语言。

欲要更好的操作好Web网站，我们就很有必要的理解DOM。而且这也是学习JavaScript很重要的部分之一。接下来我们将从以下几个部分来展开对DOM的理解和学习。

  • DOM简介
  • 理解DOM树和节点
  • 如何访问DOM中的元素
  • 如何遍历DOM
  • 如何更改DOM

那我们开始吧！

DOM简介

Web网站都会有一些事件交互的行为，比如说图像幻灯片之间进行旋转，当用户试图提交不完整表单时显示错误信息，或者切换导航菜单等，这一切的一切其实都是JavaScript访问和操作DOM的结果。这样一来，我们就很有必要去了解DOM是什么，如果处理DOM，以及HTML源代码和DOM之间的区别等等。

尽管DOM与语言并没有太大关系，或者说其是创建独立于特定的编程语言，但在我们这篇文章中所要聊的都是关于JavaScript对HTML中DOM的操作。

先决条件

为了有效地了解DOM以及它与Web工作的关系，建议你对HTML和CSS有一定的了解，而且熟悉基本的JavaScript语法和代码结构。这样有益于帮助大家更好的理解后续的内容。

DOM是什么

在最基本的层面上来说，Web网站是由一个HTML文档组成。我们使用的浏览网站的浏览器是一个解释HTML和CSS的程序，它把样式、内容和结构呈现给你 —— 也就是你在浏览器看到的样子。

对于浏览器打下一个网址，它所经历的事情和所涉及到的知识可多了，因此也有一个最经典的面试题：浏览器打开一个网页时都发生了什么？。

除了解析HTML结构和CSS样式这外，浏览器还创建了文档对象模型，也就是我们要说的DOM。该模型允许JavaScript以对象的形式访问网站文档的文本内容和元素。

JavaScript是一种交互式语言，通过它可以更容易地理解新概念。让我们来创建一个最简单的Web页面。创建一个index.html文件，并将其保存在一个新的项目目录中。

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

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

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

</html>

熟悉HTML的都知道，上面这个代码是Web页面最基础的架子。它包含了网站文档的最基本东西：文档类型（DOCTYPE）、带有<head>和<body>的<html>标签。

出于我们的目的，我将使用Chrome浏览器，当然你也可以使用你自己喜欢的浏览器来获得类似的输出。使用Chrome浏览器，打开刚才创建的index.html文件。在浏览器看到的Web页面将是一个最简单的页面，就只有一个标题 —— “Document Object Model” 。通过浏览器的开发者工具，在“Elements”选项卡下，你将看到index.html页面对应的DOM。比如下图所示：

在这种情况下，它看起来与我们刚刚编写的HTML源代码完全相同 —— 一个DOCTYPE，以及几个HTML标签元素。浏览器开发者工具中，将鼠标悬停在元素上时，Web页面中将会突出显示相应的元素内容。HTML元素左侧的小箭头，允许您切换嵌套元素的视图（将折叠的部分展开显示）：

document对象

document对象是一个内置对象，它有许多属性和方法，可以用来访问和修改Web页面。为了理解如何使用DOM，你必须了解对象如何在JavaScript中工作。如果你对对象的概念一点都不了解，那么可以先查阅一些JavaScript中对象相关的知识。

在浏览器中访问前面创建的index.html页面，并且使用开发者工具进入到Console选项卡中。然后在开发者工具中输入document，并按回车键。将看到的输出内容与Elements选项卡中看到的内容相同。

这里键入document只是为了更好的帮助大家巩固document对象是什么以及如何修改它。后续的内容你将会发现我在此处所说的。

DOM和HTML源代码的区别是什么？

目前，在这个示例中，HTML源代码和DOM似乎是完全相同的。在两个实例中，浏览器生成的DOM将与HTML源代码不同：

  • DOM被客户端（可能是浏览器）JavaScript修改
  • 浏览器会自动修复源代码中的错误

接下来简单的演示如何通过客户端JavaScript修改DOM。比如在开发者工具中输入document.body，得到的结果如下图所示：

document是一个对象，body是我们用点符号（.）访问的对象属性。输入document.body将会在控制台中输入body元素自身和它里面的一切。

在控制台中，我们可以在这个Web页面上改变body对象的一些属性。比如修改style的属性，将页面的背景颜色改变紫红色。只需要控制台中输入：

document.body.style.backgroundColor = 'fuchsia'

控制台上输入上面的代码回车后，将看到Web页面的实时更新，body的background-color也将变成fuchsia。结果如下：

这个时候在键入document.body之后，你将看到DOM发生了变化：

上面输入的是JavaScript代码，将fuchsia分配给body元素的background-color，而且现在变成是DOM的其中一部分。

但是，你现在在页面中用鼠标右键单击，并在出来的菜单项中选择“查看页面源代码”选项。你会注意到，网站源代码并不包含通过JavaScript添加的新样式属性。网站的来源不会改变，也不会受到客户端JavaScript的影响。如果你刷新页面，我们在控制台添加的新代码将会消失。

当源代码中出现错误时，DOM可能具有不同于HTML源代码的另一个实例。其中一个常见的例子是table标记 —— 就是需要一个tbody标签，但很多开发人员，往往在写HTML代码时忘了添加。浏览器将会自动更正错误并添加tbody标签。另外DOM还将修复未关闭的HTML标签。

经过上面的学习，知道怎么访问文档对象，以及如何在浏览器的开发者工具中使用JavaScript来更新文档对象的属性。另外知道了HTML源代码和DOM之间的区别之处。有关于DOM更深入的信息，还可以查看Mozilla上有关于文档对象模型（DOM）资料。

理解DOM树和节点

DOM通常被称为DOM树，它由称为节点的对象树组成。在介绍DOM的过程中，了解到了文档对象是什么，如何访问文档对象并使用控制台修改其属性，以及HTML源代码和DOM之间的区别。

接下来将会回顾一些HTML相关的术语，这对于理解如何使用JavaScript处理DOM非常重要。除此之外，接下来的内容将帮助我们了解DOM树，DOM节点是什么，以及如何识别最常见的节点类型。

HTML术语

理解HTML和JavaScript术语对于理解如何处理DOM非常重要。让我们简要的回顾一下一些HTML相关的术语。

先来看一下这个HTML元素：

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

这是一个锚元素，它指向index.html。

  • a是一个HTML标签
  • href是一个HTML标签属性
  • index.html是属性值
  • Home是一个文本

在开始和闭合标签之间的所有内容组合生成整个HTML元素。把这个链接代码放到index.html中之后就变成下面这样：

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

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

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

</html>

使用JavaScript访问元素的最简单方法是id属性。所以在链接中添加了个id为nav的值。

这个时候，使用getElementById()方法来访问所需要的元素。比如在控制台中输入下面的内容：

document.getElementById('nav')

通过上面的代码，就获取到了index.html中id为nav的元素：

正如上面所演示的一样，使用getElementById()可以选择到我们想要的元素。如果我们想多次访问这个nav链接时就得多次输入那个对象和方法，因此为了更容易的使用它，我们可以将其放入一个变量中。比如：

let navLink = document.getElementById('nav')

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

navLink.href = 'https://wwww.w3cplus.com'

我们也可以使用textContent属性来改变锚元素的文本内容：

navLink.textContent = '点击这里访问W3cplus'

这个时候在控制台中输入navLink之后，你看到效果如下，同时对应的Web页面也有所更改：

同样的，如果你刷新页面，这一切都将恢复到最初的状态。

此时，你应该了解了如何使用document的方法来访问元素，如何将选到的元素赋值给一个变量，以及如何修改元素中的属性和值。

DOM树和节点

在DOM中，所有的项都定义为节点。DOM中的节点类型有很多种，但有三个主要的节点类型是我们经常使用的：

  • 元素（Element）节点
  • 文本（Text）节点
  • 注释（Comment）节点

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

DOM是由嵌套节点的树结构组成，它通常被称为DOM树。你可能熟悉是族谱，它由父母、孩子和兄弟姐妹组成。DOM中的节点也被称为父节点、子节点和兄弟节点，这一切都取决于它们与其他节点的关系。

为了演示，咱们修改一下前面的index.html

剩余80%内容付费后可查看
* 请输入阅读码（忘记阅读码？）

如需转载，烦请注明出处：https://www.w3cplus.com/javascript/understanding-the-dom.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部