【无标题】

DOM模型

DOM中，文档中的一切都是节点

常用属性汇总

tagName 标签名称
nodeName 节点名称
nodeType 节点类型
nodeValue 节点的文本内容
attributes 当前元素节点的所有属性节点
obj.ownerDocument 当该节点的文档对象根节点==document

parentNode 父节点
nextElementSibling 下一个兄弟节点 nextSibling(低版本浏览器使用)
previousElementSibling 上一个兄弟节点 previousSibling(低版本浏览器使用)
firstElementChild 第一个子节点 firstChild
lastElementChild 最后一个子节点 lastChild
childNodes 所有的子节点，包括文本节点，返回节点对象集合
children 所有的不包含文本节点的子节点，返回节点对象集合 常用属性汇总

节点方法（节点操作：增，删，改）

创建元素节点

var div = document.createElement("div") ; 创建一个元素div节点

创建文本节点

var div = document.createTextNode("创建了一段文本") ;创建一个文本节点

添加节点

• 父节点.appendChild(新节点);将新节点添加到父节点的最后
• 父节点.insertBefor(新节点,目标节点);目标节点是父节点的一个子节点，将新节点添加到父节点的这个目标节点的前面

修改节点

父节点.replaceChild(新节点,目标子节点);将新节点，替换父节点的这个目标子节点

克隆节点

• 节点.cloneNode();//克隆空节点
• 节点.cloneNode(true);//克隆空节本身及所有内容

删除节点

• 父节点.removeChild(目标子节点);//将这个父节点的目标子节点删除
• 节点.remove();//ie不支持 w3c的测试方法

文档碎片

js的DOM操作，每一次的节点变动，都会造成浏览器对页面的重绘，如果一个循环中，不停对DOM进行操作，浏览器也会对页面不停的重绘，造成浏览器的渲染压力。所以为了提高程序性能，降低浏览器对页面的重绘次数，减轻浏览器的渲染压力，可以使用文档碎片，document.createDocumentFragment();

createDocumentFragment，是在内存中创建一个临时空间，保存所有需要操作的节点，最后再一次性的将这个碎片中的节点集合插入到页面。

案例：

//动态给ul添加一些新的li
var li = null;
var h = document.createDocumentFragment(); // 创建碎片
for (var i = 0; i < 1000; i++) {
	li = document.createElement("li");
    li.innerHTML = "新来的" + i;
    //ul.appendChild(li);
    h.appendChild(li);
}
ul.appendChild(h);