标签:
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操作性能的作用,但是对高级的浏览器没有提高,反而有时候会降低性能。
标签:
原文地址:http://www.cnblogs.com/linyongli/p/5316483.html