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' )[0].innerText) // 顯示Alice
var newFrag = document.createDocumentFragment();
newFrag.appendChild(li);
alert(document.getElementByTaName('li')[0].innerText) // 顯示Bod
alert(document.getElementByTaName('ul')[0].innerHTML)} //顯示<li>Bob</li>,由此可見,第一個節點確實被刪除了
//現在fragment中的修改節點
newFrag.childNode[0].childNodes[0].nodeValue='Candy';
//更改一個孩子節點的文字內容
// .childNodes[0].nodeValue等同於:.innerText 或.textContent
document.getElementByTaName('ul')[0].appendChild(newFrag);
alert(document.getElementByTaName('ul')[0].innerHTML)} //顯示<li>Bob</li><li>Candy</li> ,由此可見僅僅是添加了newFrag的子孫節點。