原文地址:https://wangdoc.com/javascript/
DOM是JavaScript操作网页的接口,它的作用是将网页转为一个JavaScript对象,从而可以用脚本进行各种操作。
节点
DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成。
节点的类型有七种。
- Document:整个文档树的顶层节点
- DocumentType:doctype标签(比如<!DOCTYPE html>)
- Element:网页的各种HTML标签(比如、等)
- Attribute:网页元素的属性(比如class="right")
- Text:标签之间或标签包含的文本
- Comment:注释
DocumentFragment:文档的片段
浏览器提供一个原生的节点对象Node,上面这七种节点都继承了Node,因此具有一些共同的属性和方法。节点树
浏览器原生提供document节点,代表整个文档。
文档的第一层只有一个节点,就是HTML网页的第一个标签,它构成了树结构的根节点,其它的HTML标签节点都是它的下级节点。- 父节点关系(parentNode):直接的那个上级节点
- 子节点关系(childNodes):直接的下级节点
同级节点关系(sibling):拥有同一个父节点的节点
DOM提供操作接口,用来获取这三种关系的节点。比如,子节点接口包括firstChild(第一个子节点)和lastChild(最后一个子节点)等属性,同级节点接口包括nextSibling(紧邻在后的那个同级节点)和previousSibling(紧邻在前的那个同级节点)属性。