js的DOM节点操作

---

定义

DOM ：文档对象模型

DMO是针对HTML文档的一个API（应用程序编程接口），DOM描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。

---

一、节点分为几种不同的类型

节点名 nodeType nodeName nodeValue
元素节点 1 大写的标签名 null
属性节点 2 是属性的名称 属性的值
文本节点 3 ‘#text’ 文本的内容
注释节点 8 ‘#comment’ 注释的内容
文档节点 9 ‘#document’ null

元素节点就是页面中的标签
文本节点包括内容、空格、回车(换行)
注释节点就是你写的注释
文档节点就是整个大文档(整个页面)

二、操作节点的属性

childNodes ：获取的所有的子节点（不提倡使用 会包含空格文本节点）
children ：获取所有的元素子节点（子元素标签集合）（在IE6~8下不兼容）
firstChild ：获取第一个子节点（会包含空格文本节点）
lastChild ：获取最后一个子节点（会包含空格文本节点）
firstElementChild ：获取第一个元素子节点（在IE6~8下不兼容）
lastElementChild ：获取最后一个元素子节点（在IE6~8下不兼容）
previousSibling ：获取上一个同级节点（获取上一个哥哥节点）含元素节点或者文本节点等
nextSibling ：获取下一个同级节点（获取下一个弟弟节点）含元素节点或者文本节点等
previousElementSibling：获取上一个同级元素节点（在IE6~8下不兼容）（获取哥哥元素节点）
nextElementSibling ：获取下一个同级元素节点（在IE6~8下不兼容）（获取弟弟元素节点）
parentNode ：获取父节点

三、节点的增删改

createElement：创建元素节点
createTextNode：创建文本节点
容器.appendChild(节点)：把节点插入到容器的末尾
容器.insertBefore(新节点，老节点)：把新节点插入到老节点的前面
容器.removerChild(节点)：移除容器中的节点

四、动态克隆节点

节点.cloneNode(true/false)
克隆节点，如果传参是true就是深克隆，如果不传参或者传false就是浅克隆（只复制外层元素，不复制里边的内容）