createElement與createDocumentFragment的點點區(qū)別小結
更新時間:2011年12月19日 23:50:48 作者:
在DOM操作里,createElement是創(chuàng)建一個新的節(jié)點,createDocumentFragment是創(chuàng)建一個文檔片段
網上可以搜到的大部分都是說使用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)
這個說法并沒有錯,但是并不嚴謹,因為像這種用法,主要還是用在目標節(jié)點是已存在并且有一部分內容的情況下,比如上面例子中的body元素,如果目標節(jié)點并不存在或者為空,完全可以用createElement創(chuàng)建一個相同的元素,操作之后再使用一次appendChild或者replaceChild來達到相同的目的,這樣也不存在重復刷新的問題。
雖說我平時都是把兩者混著用,但是還是得明白兩者之間的一點區(qū)別:
第一:
createElement創(chuàng)建的元素可以使用innerHTML,createDocumentFragment創(chuàng)建的元素使用innerHTML并不能達到預期修改文檔內容的效果,只是作為一個屬性而已。兩者的節(jié)點類型完全不同,并且createDocumentFragment創(chuàng)建的元素在文檔中沒有對應的標記,因此在頁面上只能用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>
第二:另一個最主要的區(qū)別就是createElement創(chuàng)建的元素可以重復操作,添加之后就算從文檔里面移除依舊歸文檔所有,可以繼續(xù)操作,但是createDocumentFragment創(chuàng)建的元素是一次性的,添加之后再就不能操作了(說明:這里的添加并不是添加了新創(chuàng)建的片段,因為上面說過,新創(chuàng)建的片段在文檔內是沒有對應的標簽的,這里添加的是片段的所有子節(jié)點)。
一個對比的例子:
<!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>
復制代碼 代碼如下:
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)
這個說法并沒有錯,但是并不嚴謹,因為像這種用法,主要還是用在目標節(jié)點是已存在并且有一部分內容的情況下,比如上面例子中的body元素,如果目標節(jié)點并不存在或者為空,完全可以用createElement創(chuàng)建一個相同的元素,操作之后再使用一次appendChild或者replaceChild來達到相同的目的,這樣也不存在重復刷新的問題。
雖說我平時都是把兩者混著用,但是還是得明白兩者之間的一點區(qū)別:
第一:
createElement創(chuàng)建的元素可以使用innerHTML,createDocumentFragment創(chuàng)建的元素使用innerHTML并不能達到預期修改文檔內容的效果,只是作為一個屬性而已。兩者的節(jié)點類型完全不同,并且createDocumentFragment創(chuàng)建的元素在文檔中沒有對應的標記,因此在頁面上只能用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>
第二:另一個最主要的區(qū)別就是createElement創(chuàng)建的元素可以重復操作,添加之后就算從文檔里面移除依舊歸文檔所有,可以繼續(xù)操作,但是createDocumentFragment創(chuàng)建的元素是一次性的,添加之后再就不能操作了(說明:這里的添加并不是添加了新創(chuàng)建的片段,因為上面說過,新創(chuàng)建的片段在文檔內是沒有對應的標簽的,這里添加的是片段的所有子節(jié)點)。
一個對比的例子:
復制代碼 代碼如下:
<!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>
您可能感興趣的文章:
- 監(jiān)控 url fragment變化的js代碼
- JavaScript性能優(yōu)化 創(chuàng)建文檔碎片(document.createDocumentFragment)
- Android Map新用法:MapFragment應用介紹
- jQuery.buildFragment使用方法及思路分析
- Android Fragment 基本了解(圖文介紹)
- Android 管理Activity中的fragments
- 淺析document.createDocumentFragment()與js效率
- Android基礎之Fragment與Activity交互詳解
- Android基礎之使用Fragment適應不同屏幕和分辨率(分享)
- Android基礎之使用Fragment控制切換多個頁面
- android開發(fā)教程之實現(xiàn)滑動關閉fragment示例
- Android Fragment中使用SurfaceView切換時閃一下黑屏的解決辦法
相關文章
JS實現(xiàn)表單中checkbox對勾選中增加邊框顯示效果
這篇文章主要介紹了JS實現(xiàn)表單中checkbox對勾選中增加邊框顯示效果,可實現(xiàn)點擊后圖片增加邊框及勾選的功能,非常簡潔實用,需要的朋友可以參考下2015-08-08JS Object構造函數(shù)之Object.freeze
這篇文章主要介紹了JS Object構造函數(shù)之Object.freeze,對JS感興趣的同學,可以深入了解下2021-04-04javascript實現(xiàn)點擊提交按鈕后顯示loading的方法
這篇文章主要介紹了javascript實現(xiàn)點擊提交按鈕后顯示loading的方法,涉及javascript動態(tài)設置頁面元素樣式的相關技巧,需要的朋友可以參考下2015-07-07