javascript系列之DOM(二)

原生dom扩展

我们接着第一部分来说，上文提到了两种常规的dom操作：创建文档片段和遍历元素节点。我们知道那些雨后春笋般的库，有很大一部分工作就是提供了一些优秀

的dom操作api。可见原生的一些方法和属性，还不能很灵活快捷的来完成我们所希望的操作。下面将总结出总结出几种很实用的扩展方法。包括

after()和before(),

a:after()和before()

     这里的after()和

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

b：text()

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++)效率比较，每次循环都要去获取长度可是很伤神又伤身的哦。你平时写的时候注意了这个细节了

嘛？