-
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文档：
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href="">我的链接</a>
<h1>我的标题</h1>
</body>
</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可以操作静态节点，也可以操作动态生成的节点。
