createElement與createDocumentFragment的點點區別

shirleyYing發表於2016-12-29
Fragment

在DOM操作裡，createElement是建立一個新的節點，createDocumentFragment是建立一個文件片段。

網上可以搜到的大部分都是說使用createDocumentFragment主要是因為避免因createElement多次新增到document.body引起的效率問題，比如：

複製程式碼
var arrText=["1","2","3","4","5","6","7","8","9","10"];
for(var i=0;i<arrText.length;i++){
    var op=document.createElement("P");
    var oText=document.createTextNode(arrText[i]);
    op.appendChild(oText);
    document.body.appendChild(op);
}


var arrText=["1","2","3","4","5","6","7","8","9","10"];
var oFrag=document.createDocumentFragment();

for(var i=0;i<arrText.length;i++){
    var op=document.createElement("P");
    var oText=document.createTextNode(arrText[i]);
    op.appendChild(oText);
    oFrag.appendChild(op);
    
}
document.body.appendChild(oFrag);
複製程式碼

（宣告：這是我google的第一個例子，並不代表對原作者有任何意見，原文地址http://www.cnitblog.com/asfman/articles/32614.html）

這個說法並沒有錯，但是並不嚴謹，因為像這種用法，主要還是用在目標節點是已存在並且有一部分內容的情況下，比如上面例子中的body元素，如果目標節點並不存在或者為空，完全可以用createElement建立一個相同的元素，操作之後再使用一次appendChild或者replaceChild來達到相同的目的，這樣也不存在重複重新整理的問題。

 

雖說我平時都是把兩者混著用，但是還是得明白兩者之間的一點區別：

第一：

createElement建立的元素可以使用innerHTML，createDocumentFragment建立的元素使用innerHTML並不能達到預期修改文件內容的效果，只是作為一個屬性而已。兩者的節點型別完全不同，並且createDocumentFragment建立的元素在文件中沒有對應的標記，因此在頁面上只能用js中訪問到。

demo：

複製程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #outer{ height: 200px; border: 1px solid #006400;}
    </style>
</head>
<body>
<div id="outer">
</div>
<input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/>
<script type="text/javascript">
var fragment_1 = document.createDocumentFragment();
        fragment_1.innerHTML = '<p>我是一個粉刷匠</p>';
        document.body.appendChild(fragment_1);
    var fragment_2 = document.createElement('p');
        fragment_2.innerHTML = '粉刷本領強';
        document.body.appendChild(fragment_2);
</script>
</body>
</html>
複製程式碼

 

第二：另一個最主要的區別就是createElement建立的元素可以重複操作，新增之後就算從文件裡面移除依舊歸文件所有，可以繼續操作，但是createDocumentFragment建立的元素是一次性的，新增之後再就不能操作了（說明：這裡的新增並不是新增了新建立的片段，因為上面說過，新建立的片段在文件內是沒有對應的標籤的，這裡新增的是片段的所有子節點）。

一個對比的例子：

複製程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #outer{ height: 200px; border: 1px solid #006400;}
    </style>
</head>
<body>
<div id="outer">
</div>
<input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/>
<script type="text/javascript">
    function $(id){
        return document.getElementById(id);
    }
    var outer = $('outer');
    var inner = $('inner'); 
    $('btn_1').onclick = function(){
        var div = document.createElement('div');
            div.innerHTML = '<p>測試createElement</p>';
        document.body.appendChild(div);
        setTimeout(function(){
            outer.appendChild(div);
            setTimeout(function(){
                outer.removeChild(div);
            },1000)
        },1000)
    }
    $('btn_2').onclick = function(){
        var p = document.createElement('p');
            p.innerHTML = '測試DocumentFragment';
        var fragment = document.createDocumentFragment();
            fragment.appendChild(p);
            fragment.innerHTML = '<p>測試DocumentFragment</p>';
            fragment.innerHTML = '<span>測試DocumentFragment</span>';
        document.body.appendChild(fragment);
        setTimeout(function(){
            outer.appendChild(fragment);//報錯，因為此時文件內部已經能夠不存在fragment了
            setTimeout(function(){
                outer.removeChild(fragment);
            },1000)
        },1000)
    }
</script>
</body>
</html>

相關文章