DOM操作

Tue, 01 Oct 2024 00:00:00 +0800

1、DOM基本概念

DOM：(Document Object Model, 文档对象模型)是文档内容（HTML或XML）在编程语言上的抽象模型，它建模了文档的内容和结构，并提供给编程语言一套完整的操纵文档的API。

本文面向HTML，不讨论XML等文档，下文中“文档===HTML”。

节点：前面提过，节点是DOM树的组成单元。在JS看来，一个节点就是JS对象。下面用node表示任意的节点。
节点类型：并非所有的节点都是一样的，DOM规定文档中有12种节点类型，分别用常量1 ~ 12（有与之对应的常量名称Node.XXX_NODE）表示，可以通过node.nodeType属性获取节点的类型常量。现在，有些类型的节点已经弃用了，常见到的只有几种类型的节点，包括：
元素节点: 类型常量为Node.ELEMENT_NODE或1。最常见的一类节点，对应文档中的元素。大部分DOM操作都是在元素节点层次的。
文本节点：类型常量为Node.TEXT_NODE或2。对应文档中的文本，任何文档内容都有对应的文本节点，即使空格和换行符。

空格和换行不会对页面内容产生影响，但它们确实以文本节点的形式存在于DOM树中。

Document节点：类型常量为Node.DOCUMENT_NODE或9。它不对应文档的内容，而是作为文档的入口节点，每个文档都有且仅有一个入口，因为这种独特性，赋予一个特殊的变量名称document。
注释节点：类型常量为Node.COMMENT_NODE或8。它对应文档中的注释标签，文档的注释内容也是可读取和修改的。
节点类：DOM内置许多节点类，类之间存在继承关系，形成一套节点类框架。每个节点对象都属于节点类，拥有该类和其父类的方法与属性，这使得操作节点十分简单。节点类框架的一部分大概如图：这些节点上有丰富的属性和方法，是继承的结果，可以看到，一个HTML标签元素至少有四层的继承关系。以<a>标签为例，它属于HTMLAnchorElement类，获得了a.target，a.download等属性，接着继承了HTMLElement类上的title, hidden等属性和click()等方法，又从Element类继承了tagName, className等属性和getAttribute(), setAttribute()等方法，再从Node类继承了nodeType(前面说过的节点类型), appenChild(), removeChild()等方法，最后从EventTarget类中继承了事件相关的属性和方法。

不要混淆节点类型和节点类这两个概念。前者是一个生活中的类别，后者是编程意义上的类。节点对象的nodeType属性表示了它的类型，而节点类是该节点的从属的类。因为Dode是一个抽象类，所以，如果知道了某个节点从属的类，我们就知道它的节点类型。

区分节点与元素节点。我们经常关心元素节点（简称元素），因为这是一类最常使用的节点，但是并非所有节点都是元素。

前面的说法太抽象了，让我们用实际的例子看看文档、DOM树与节点的关系。

Live DOM Viewer是一个可以根据HTML文档实时查看DOM树的网站。你把下面的例子复制过去，或者自己去探索。

一个简单的HTML文档：

<!DOCTYPE HTML>
<html>
<body>
 A simple text.
 <ol title="this is a title">
 <li>czpcalm</li>
 <!-- comment -->
 </ol>
</body>
</html>

它对应的DOM图（颜色区分了节点类型）：

留意这个图，你要注意几点：

总共有4种类型的节点，分别是标签节点（红色）,文本节点（灰色），注释节点(黄色)和DOCTYPE节点（紫色）。
文档没有<head>标签却出现了HEAD节点。这是因为HTML必然存在<html>，<head>，<body>标签，不存在时会自动补上。顺便一提，当出现<table>标签时，也一定会有<tbody>标签。
文档中的文本都会形成文本节点的内容，包括空格␣和换行↵。第一,单独的空格和换行都会形成对应的文本节点；第二，有内容的文本节点的值包含前导和后继的空白。

不是说HTML中的空白字符都被忽略吗？怎么这里又说全都是有效的字符？

在从文档解析生成DOM树的过程中，HTML中的任何字符都是有效的；不过，在接下去的页面渲染的过程中，空白内容被忽略。所以从文档到页面的整过过程中，空白确实被忽略了。

理解DOM树中的父子关系对应文档中的包含（嵌套）关系。一个极佳的类比是文件树，把元素看做文件夹，文本看做文件，文件夹中可以存放文件和新的文件夹，然后一层层深入下去，DOM树也是如此。

几个原则可以帮我们快速理解这个DOM树的构建：