DOM和DOM节点 · Web前端(打印用)

## DOM和DOM节点 ### 1.DOM > DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。 ### 2.DOM节点 DOM的最小组成单位就是节点（node）。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子。在DOM中，节点的类型一共有7种 * Document：整个文档树的顶层节点； * DocumentType：dotype标签比如：`<!DOCTYPE html>` * Element：网页的各种HTML标签比如：`<body> <h> <a> <div>` * Attribute：网页元素的属性比如：`id=”id” class=”class” type=”text”` * Text：标签之间或标签包含的文本 * Comment：注释 * DocumentFragment：文档片段 ### 3.节点树一个文档的所有节点，按照所在的层次，可以抽象成一个树状结构。这种树状结构就是DOM。最顶层的节点就是document类型的节点，它代表了整个文档。文档里面最高一层的HTML标签，一般是`<html>`，它构成树结构的根节点（root node），其他的Html标签都是它的下级。 ![](https://box.kancloud.cn/a9d0a35ebc676b65f082c44a1e50904e_486x266.png) 除了根节点，其他节点对于周围的几点都存在3种关系 * 父节点关系（parentNode）：直接的那个上级节点 * 子节点关系（childNodes）：直接的下级节点 * 同级节点关系（sibling）：拥有同一父节点的节点 DOM提供操作接口，用来获取三种关系的节点。获取子节点：firstChild（第一个子节点）lastChild（最后一个子节点）等获取同级别：nextSibling（紧邻在后的同级节点）和previousSibling（紧邻在前的同级节点）