js建立dom節點之最容易被忽略的createDocumentFragment()方法
阿新 • • 發佈：2019-01-31
js常見的建立dom節點的方法有
- createElement() 建立一個元素節點 => 接收引數為string型別的nodename
- createTextNode() 建立一個文字節點 => 接收引數為string型別的text內容
- createAttribute() 建立一個屬性節點 => 接收引數為string型別的屬性名稱
- createComment() 建立一個註釋節點 => 接收引數為string型別的註釋文字
本文要說的createDocumentFragment()方法，則是用了建立一個虛擬的節點物件，或者說，是用來建立文件碎片節點。它可以包含各種型別的節點，在建立之初是空的。
DocumentFragment節點不屬於文件樹，繼承的parentNode屬性總是null。它有一個很實用的特點，當請求把一個DocumentFragment節點插入文件樹時，插入的不是DocumentFragment自身，而是它的所有子孫節點。這個特性使得DocumentFragment成了佔位符，暫時存放那些一次插入文件的節點。它還有利於實現文件的剪下、複製和貼上操作。
另外，當需要新增多個dom元素時，如果先將這些元素新增到DocumentFragment中，再統一將DocumentFragment新增到頁面，會減少頁面渲染dom的次數，效率會明顯提升。
還有一個很重要的特性是，如果使用appendChid方法將原dom樹中的節點新增到DocumentFragment中時，會刪除原來的節點。
為了證明這一點我做了以下測試：
<body>
<ul>
<li>Alice</li>
<li>Bob</li>
</ul>
<button onclick="test()">測試</button>
</body>js程式碼中test()方法如下：
function test(){
var li = document.getElementByTaName('li')[0]; //ul中的第一個li節點
alert(document.getElementByTaName('li'