DOM
更新: 7/22/2025 字数: 0 字 时长: 0 分钟
我们经常会听说JS会执行DOM操作，那么DOM究竟是什么呢？
DOM是Document Object Model的简称，是将结构化文档（比如HTML或者XML）解析成一系列节点，然后再根据其相互关系组装成一个树状结构（也就是我们常说的DOM Tree）。
DOM树的7种节点类型
Document：整个文档树的顶层节点DocumentType：doctype标签（比如<!DOCTYPE html>）Element：网页的各种HTML标签（比如<body>、<a>等）Attr：网页元素的属性（比如class="right"）Text：标签之间或标签包含的文本Comment：注释DocumentFragment：文档的片段
一个DOM树用document代表，第一层只有两个节点，一个是文档的类型节点（<!doctype html>），第二个是 HTML 网页的顶层容器标签<html>。后者组成了树结构的根节点，其他HTML标签都是他的下级节点。
除了根节点，其他节点都有三种层级关系。
- 父节点关系（parentNode）：直接的那个上级节点
- 子节点关系（childNodes）：直接的下级节点
- 同级节点关系（sibling）：拥有同一个父节点的节点
DOM 提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。
Node 接口
所有的DOM节点都继承了Node接口（也就是说Node是所有DOM的原型），下面会介绍一下Node的方法和属性
- nodeType：该节点的类型，返回值是数字且JS中定义了常量与这些数字对应
- nodeName：返回节点的名称
- nodeValue：返回节点的内部字符串，只有text，comment和attr节点会返回值
- textContent：返回节点中的所有文本内容，当将其修改时，会用一个新的文本节点，替换所有原来的子节点。它还有一个好处，就是自动对 HTML 标签转义。这很适合用于用户提供的内容。