DOM 文档对象模型总结

1、DOM 文档对象模型

dom结构的组成 ： 有各种节点组成
节点类型 nodeType ： nodeType属性区分各种节点类型
元素节点 1 元素节点 ： html标签
文本节点 3 文本节点 ： 标签的内容 或这 空白 或者 注释 <!-- -->
属性节点 2 属性节点 ： 标签的属性
节点关系（查找页面元素的属性） ：
父节点 ：parentNode
孩子节点 ： children 只获取元素节点 childNodes 获取元素节点和文本节点
第一个孩子节点 ： firstElementChild firstChild（低版本）
最后一个孩子节点 ： lastElementChild lastChild
前一个兄弟节点： previousElementSibling
后一个兄弟节点 ： nextElementSibling

tagName nodeName 获取标签名称 （默认是大写的）

2、节点的动态操作（创建 添加 删除） 重点

创建元素 ：
document.createElement(“标签名”)
创建文本 ：
document.createTextNode(“文本”)
添加元素 ：
appendChild()
用法 ：父节点.appendChild(要添加的元素)
insertBefore()
用法 ： 父节点.insertBefore(要添加的子节点 , 参照节点 )把要添加的子节点 插入到参照节点的前面参照节点如果是null，实现向后添加 同appendChild功能

删除元素 ：
removeChild()
用法 ：父节点.removeChild( 要删除的子节点 )

remove()删除  
用法 ： 要删除的节点.remove();

//点击按钮创建一个div
var oBtn = document.querySelector("#btn");
oBtn.onclick = function(){
//创建一个小div标签
var oDiv = document.createElement(“div”);
//将div添加到指定的位置 比如 添加到body中
//父节点。appendChild( 要添加的节点)
document.body.appendChild( oDiv);
//对该div的属性或样式或内容的操作同前面的操作
//为div标签添加内容
oDiv.innerHTML = “这是div标签的内容信息”；
//对div进行样式描述
oDiv.className = “box”;
}

//动态创建表格

3、节点克隆

cloneNode() 没有参数表示只克隆元素本身 参数为true表示即克隆元素本身又克隆内容
//克隆的运用

4、扩展 ：
文档碎片 为了避免重复的DOM插入操作，我们可以创建一个 ：文档碎片
文档碎片好处：提高效率 在频繁进行大量的dom操作的时候，尤其是添加到页面的动作
创建一个文档碎片 ： document.createDocumentFragment();

//新闻列表