理解DOM

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 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页面的实时更新,bodybackground-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属性。所以在链接中添加了个idnav的值。

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

document.getElementById('nav')

通过上面的代码,就获取到了index.htmlidnav的元素:

正如上面所演示的一样,使用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

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

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