和我一起深入了解文档对象模型（DOM）「节点操作 · 上」

安逸的咸鱼
467 阅读2分钟

「这是我参与11月更文挑战的第 13 天，活动详情查看：2021最后一次更文挑战」

文档对象模型，简称 DOM，全称 Document Object Model，是 HTML 和 XML 文档的编程接口

DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分

节点层级

所有的 html 文档均可以使用 DOM 来表示一个由节点构成的层级结构

节点分多种类型，每种类型对应着文档中不同的信息，也有自己不同的特性、数据、方法，并且也其他类型有某种关系

以如下代码为例：

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

他的层级结构则为：

image.png

document 节点表示每个文档的根节点

根节点唯一的子节点是 html 节点，我们称之为文档元素，且每个文档只会有一个文档元素 。文档中其他的元素都包裹在 html 元素块中

node 类型

DOM Level 1 描述了名为 Node 的接口，这个接口是所有 DOM 节点类型都必须实现。在 js 中， 被实现为了 Node 类型，所有的节点类型都会继承 Node 类型

在 Node 上，定义了 12 个数值的常量：

Node.ELEMENT_NODE（1）
Node.ATTRIBUTE_NODE（2）
Node.TEXT_NODE（3）
Node.CDATA_SECTION_NODE（4）
Node.ENTITY_REFERENCE_NODE（5）
Node.ENTITY_NODE（6）
Node.PROCESSING_INSTRUCTION_NODE（7）
Node.COMMENT_NODE（8）
Node.DOCUMENT_NODE（9）
Node.DOCUMENT_TYPE_NODE（10）
Node.DOCUMENT_FRAGMENT_NODE（11）
Node.NOTATION_NODE（12）

我们可以通过使用 node 的 nodeType 属性来和上面的常量进行比较 ，来确定某个节点的具体类型

nodeName 与 nodeValue

这两个属性存储了节点的相关数据，以元素节点为例（即 nodeType == Node.ELEMENT_NODE），nodeName 始终为元素的标签名，nodeValue 始终为 null

以 document 中的 body 节点为例

image.png

节点关系

文档中所有的节点都存在关联关系，可以抽象为一颗树

每个节点有个 childNodes 属性，这表示当前节点下的所有子节点，这是一个 NodeList 实例，但可以使用中括号进行访问，也具备 length 属性

每个节点也会有 parentNode 属性，指向 DOM 树中的父节点

此外，childNodes 列表中的每个节点都是同一列表中其他节点的同胞节点。而使用 previousSibling 和 nextSibling 可以在这个列表的节点间导航。这个列表中第一个节点的 previousSibling 属性是 null，最后一个节点的 nextSibling 属性也是 null。若 childNodes 中只有一个节点，则它的 previousSibling 和 nextSibling 属性都是 null

父节点和它的第一个及最后一个子节点也有专门属性：firstChild 和 lastChild 分别指向 childNodes 中的第一个和最后一个子节点。如果只有一个子节点，则 firstChild 和 lastChild 指向同一个节点。如果没有子节点，则 firstChild 和 lastChild 都是 null

将上述的关系整理为图表：

image.png

此外，还有一个便利的方法 hasChildNodes()，快速查询指定节点是否包含有子节点

avatar
文章
阅读
粉丝