javascript系列之DOM(二)

原文:javascript系列之DOM(二)

原生DOM扩展

我们接着第一部分来说，上文提到了两种常规的DOM操作：创建文档片段和遍历元素节点。我们知道那些雨后春笋般的库，有很大一部分工作就是提供了一些优秀 的DOM操作API。可见原生的一些方法和属性，还不能很灵活快捷的来完成我们所希望的操作。下面将总结出总结出几种很实用的扩展方法。包括 after()和before(),

A:after()和before()

 function after(elem){
     if(this.parentNode){
         this.parentNode.insertBefore(elem,this.nextSibling)
     }
 }
 function before(elem){
     if(this.parentNode){
         this.parentNode.insertBefore(elem,this)
     }
 }

这里的after()和 before()方法主要是为了快速解决this,this.nextSibling之间的空间问题。方便我们灵活的插入元素节点。两种方法的核心当然是insertBefore(),它是父节点和子节点，子节点之间联系的重要桥梁。

B：text()

 function text(elem){
     var str="";
     //判断是否有子节点
     elem=elem.childNodes||elem;
     for(var i=0;i<elem.length;i++){
         //若果不是元素节点，追加文本值
         str+=elem.nodeType!=1?elem.nodeValue:text(elem.childNodes[i]);
     }
     return str;
 }

text()获取匹配元素集合(他的后代)中每个元素的文本内容，对于文本节点nodeValue属性为其文本内容，对于属性节点nodeValue为其属性值，他对于元素节点是不可用的。

DOM性能优化

在DOM操作中，我们再完成其所期望实现的功能的同时，我们最应该关心的就是优化问题。DOM操作很耗费性能，相信各位前端儿们早有耳闻，在前文中提到的 createDocumentFrament()算是一个引子。DOM操作的效率为什么会这么低？这么慢？为什么说DOM操作是性能优化的主攻点？因为有 reflow和repaint这两个小屁孩的存在。而且浏览器为了保证执行结果的准确性(太宠这两个孩子了)，他们想要什么就立马去实现(同步执行)。要 是他两贪得无厌，操作的波及范围比较大，次数比较频繁时。这后果可就够喝一壶的了。有必要先介绍下这两个坏小子： reflow 意味着结构的 改变,比如一堆元素,改变其中一个的宽高,那么相应的所有元素的位置都要改变.repaint意味着样式的改变比如div调整了背景色等,但是位置不 变,只改变我们操作的元素.所以通常来看repaint的代价要远小于reflow,比它斯文点，速度也更快.

我们既然发现了问题的根源所在，就是去解决这些问题。毕竟这两个小屁儿又不是咱的亲儿子，该打屁股可不能客气。把我的一个原则当然就是尽量减少DOM操作了，不给他们更多放肆的机会。这里有几条原则。首先就从createDocumentFrament()说起吧！

A:createDocumentFrament()

实例见前文，试想若果我们没有个这“盒子”，那document每构造一个元素，页面就要重构依次，后果可想而知。我们先把药添加的元素包裹起来，寄存在这个预定的盒子(文档碎片)里，然后一次性添加到文档中，jQuery就是这么干的。

B：display:none

将display设置为"none",只是把这个元素从当前的DOM结构暂时删除起来， 让其不可见。这样私下就可以好好调戏他了，这个结构是个大容器，可以干很多事情，比如说添加一堆元素。一切完毕之后恢复。这样它只是一次重构。

C：class

这个还是比较容易理解的,修改属性(样式居多)时，你逐一修改要访问很多次,而替换class就相当于批量操作了,访问一次DOM就可以了,当然性能提高了.

D:变量保存

用变量保存DOM对象而不是多次获取，最典型的莫过于for(var i=0;i<list.length;i++)和for(var i=0,l=list.length;i<l;i++)效率比较，每次循环都要去获取长度可是很伤神又伤身的哦。你平时写的时候注意了这个细节了 嘛？