DOM

• DOM基础概念、操作

DOM是什么

DOM全称为The Document Object Model，应该理解为是一个规范，定义了HTML和XML文档的逻辑结构和文档操作的编程接口。

文档逻辑结构

DOM基础概念、操作
DOM是什么
DOM全称为The Document Object Model，应该理解为是一个规范，定义了HTML和XML文档的逻辑结构和文档操作的编程接口。

文档逻辑结构

DOM实际上是以面向对象方式描述的对象模型，它将文档建模为一个个对象，以树状的结构组织（本文称之为“文档树”，树中的对象称为“节点”）。
每个文档包含1个document节点，0个或1个doctype节点以及0个或多个元素节点等。document节点是文档树的根节点。
如对于HTML文档，DOM 是这样规定的：

整个文档是一个文档节点

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点

每一个 HTML 属性是一个属性节点

注释属于注释节点

节点与文档内容是一一对应的关系，节点之间有层次关系。
例如下面的html文档：

    


我的链接
我的标题

会被建模为下面的文档树：

image

nodeType

元素.nodeType：只读 属性 当前元素的节点类型

DOM节点的类型nodeType一种有12种，可以查看这里。

常用的节点类型包括：元素节点、文本节点、属性节点：

元素节点 ELEMENT_NODE：1

属性节点 ATTRIBUTE_NODE ：2

文本节点 TEXT_NODE：3

attributes

元素.attributes：只读 属性 属性列表集合

具体代码可以查看NodeType中js代码中alert的部分。

DOM节点

div.childNodes   //返回孩子节点，包括文本节点
div.children   //返回孩子节点，不包括文本节点
div.nextElementSibling //返回下一个兄弟节点，不包括文本节点
div.previousElementSibling //返回下一个兄弟节点，不包括文本节点
div.parentNode //返回父节点
div.offsetParent //返回离的最近的定位的节点

DOM节点创建

var li = document.createElement('li');
ul.append(li)  //追加一个元素
ul.insertBefore(li,[other element]) //将li加入到另一个元素之前
li.remove() //删除元素
父级.removeChild(要删除的节点);
或者 元素.remove();

replaceChild()

父级.replaceChild(新节点、被替换节点) 替换子节点

appendChild，insertBefore，replaceChild可以操作静态节点，也可以操作动态生成的节点。