javascript變態的節點集合_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 20:48:18

javascript變態的節點集合_javascript技巧

javascript變態的節點集合_javascript技巧: 節點集合 by 司徒正美 #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } window.onload = function(){ var d = document.createDocumentFragment(); var div

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript變態的節點集合_javascript技巧: 節點集合 by 司徒正美 #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } window.onload = function(){ var d = document.createDocumentFragment(); var div

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 
<title>節點集合 by 司徒正美 </title> 
<style> 
#aaa { 
padding:10px; 
border:1px solid red; 
} 
p { 
border:1px solid blue; 
} 
</style> 
<script type="text/javascript"> 
window.onload = function(){ 
var d = document.createDocumentFragment(); 
var div = document.getElementById("aaa"); 
var c = div.childNodes; 
for(var i=0,n=c.length;i<n;i++){ 
alert(c[i] + " "+ i) 
d.appendChild(c[i]) 
} 
div.parentNode.replaceChild(d,div) 
} 
</ script> 
</head> 
<body> 
 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
如果預先將nodeList轉換為數組就沒有問題！
代碼如下:
window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
var arr = [];
for(var i=0,n=c.length;iarr.push(c[i])
}
for(var i=0,n=arr.length;ialert(arr[i] + " "+ i)
d.appendChild(arr[i])
}
div.parentNode.replaceChild(d,div)
}

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 
<title>節點集合 by 司徒正美 </title> 
<style> 
#aaa { 
padding:10px; 
border:1px solid red; 
} 
p { 
border:1px solid blue; 
} 
</style> 
<script type="text/javascript"> 
window.onload = function(){ 
var d = document.createDocumentFragment(); 
var div = document.getElementById("aaa"); 
var c = div.childNodes; 
var arr = []; 
for(var i=0,n=c.length;i<n;i++){ 
arr.push(c[i]) 
} 
for(var i=0,n=arr.length;i<n;i++){ 
alert(arr[i] + " "+ i) 
d.appendChild(arr[i]) 
} 
div.parentNode.replaceChild(d,div) 
} 
</ script> 
</head> 
<body> 
 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
很顯然nodeList還一些奇怪的特性是數組沒有的。從運行框2中，我們可以看到把節點appendChild到文檔碎片時，其實會把它從DOM樹中剝離出來，nodeList一定是跟蹤這變化，動態改變了它自身，而直線遞加的i是無法對應正確的節點的索引！因此我們每次取得它的firstChild就行了。
代碼如下:
window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
while(c.length) d.appendChild(c[0])//每次只取它第一個節點，直到取空
div.parentNode.replaceChild(d,div)
}

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 
<title>變態的childNodes by 司徒正美 </title> 
<style> 
#aaa { 
padding:10px; 
border:1px solid red; 
} 
p { 
border:1px solid blue; 
} 
</style> 
<script type="text/javascript"> 
window.onload = function(){ 
var d = document.createDocumentFragment(); 
var div = document.getElementById("aaa"); 
var c = div.childNodes; 
while(c.length) d.appendChild(c[0])//每次只取它第一個節點，直到取空 
div.parentNode.replaceChild(d,div) 
} 
</ script> 
</head> 
<body> 
 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
順便一提，由getElementsByTagName取得的HTMLCollection也是這個樣子，因此處理這類節點集合要打起十二分精神了！

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 
<title>HTMLCollection by 司徒正美 </title> 
<style> 
#aaa { 
padding:10px; 
border:1px solid red; 
} 
p { 
border:1px solid blue; 
} 
</style> 
<script type="text/javascript"> 
window.onload = function(){ 
var d = document.createDocumentFragment(); 
var div = document.getElementById("aaa"); 
var c = document.getElementsByTagName("p") 
for(var i=0,n=c.length;i<n;i++){ 
alert(c[i] + " "+ i) 
d.appendChild(c[i]) 
} 
div.parentNode.replaceChild(d,div) 
} 
</ script> 
</head> 
<body> 
 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
<p class="aaaa">司徒正美</p><script type="text/javascript" src="https://jss.www.alabama37th.com/pcwz/wenzhong.js"></script> 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
這兩種節點集合在各瀏覽器還實現得不太一樣，如標準瀏覽器我們可以用Array.prototype.slice.call將它們轉換為原生數組，IE則報錯。標準瀏覽器的它們有hasOwnProperty與valueOf，而IE是沒有的……

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript變態的節點集合_javascript技巧

推薦度：

點擊下載本文 文檔為doc格式

標簽：技巧 js javascript

熱門焦點

javascript變態的節點集合_javascript技巧

javascript變態的節點集合_javascript技巧

javascript變態的節點集合_javascript技巧

最新推薦

猜你喜歡

熱門推薦