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++)效率比較，每次循環都要去擷取長度可是很傷神又傷身的哦。你平時寫的時候注意了這個細節了

嘛？