码迷,mamicode.com
首页 > 其他好文 > 详细

L8-DOM操作应用

时间:2016-03-24 18:12:42      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

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操作性能的作用,但是对高级的浏览器没有提高,反而有时候会降低性能。

L8-DOM操作应用

标签:

原文地址:http://www.cnblogs.com/linyongli/p/5316483.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!