L8-DOM操作应用

DOM创建、插入、删除元素

DOM创建元素

　　createElement(标签名)　　　　创建一个节点

　　appendChild（子节点）　　　　追加一个节点

　　　　例子：为ul插入li

<ul id = "ul1"></ul>

var oUl = document.getElementById("ul1");

var oLi = document.createElement("li");

oUl.appendChild(oLi);

插入元素

　　insertBefore（子元素，原有节点）在已有的元素前面插入

　　　　例子：仿微博发布

<input type = "text"  id = "txt1"/>

<input type = "button"  id = "btn1"  value = "发布"/>

<ul id = "ul1" style = "width:200px; min-height:100px; border:1px solid #999;"></ul>

var oTxt = document.getElementById("txt1");

var oBtn = document.getElementById("btn1");

var oUl = document.getElementById("ul1");

var aLi = document.getElementsByTagName("li");

oBtn.onclick = function(){

　　var oLi = document.createElement("li");

　　oLi.innerHTML = oTxt.value;

　　if(aLi.length>0){

　　　　oUl.insertBefore(oLi,aLi[0]);

　　　　oTxt.value = "";

　　}

　　else{

　　　　oUl.appendChild(oLi);

　　　　oTxt.value = "";

　　　　oTxt.focus();

　　}

}

删除DOM元素

　　removeChild(子节点）　　删除一个节点

　　　　例子：删除整个li(和parentNode的例子相似)

<ul id = "ul1">

<li>afaafsf <a href= "javascript:;"></a><li>

<li>asdfdsf<a href= "javascript:;"></a><li>

<li>sfccda<a href= "javascript:;"></a><li>

<li>sefeaf<a href= "javascript:;"></a><li>

<li>ewre<a href= "javascript:;"></a><li>

</ul>

var oUl = document.getElementById("ul1");

var aA = oUl.getElementsByTagName("a");

for(var i = 0; i <aA.length; i++){

aA[i].onclick = function(){

oUl.removeChild(this.parentNode);　　//　　this.parentNode当前节点的父节点

}

}

最后一个比较少接触到的文档碎片。

createDocumentFragment有什么用？

多次使用节点方法（如appendChild）绘制页面，每次都要刷新页面一次。效率也就大打折扣了，而使用
document.createDocumentFragment()创建一个文档碎片，把所有的新节点附加在其上，然后把文档碎片的内容一次性添加到document中，这也就只需要一次页面刷新就可以了。

此方法对低版本的浏览器IE6-7有提高DOM操作性能的作用，但是对高级的浏览器没有提高，反而有时候会降低性能。