javascript異常ノードコレクション_javascriptスキル

<meta charset="utf-8"> <meta content="IE=8" http-equiv="X-UA-Compatible"> <title>Situ Zhengmei によるノードコレクション </title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <div id="aaa"> <p class="aaaa"> </p>シトゥ・ジェンメイ<p class="aaaa"> </p>シトゥ・ジェンメイ<p class="aaaa"> </p>シトゥ・ジェンメイ<p class="aaaa"> </p>シトゥ・ジェンメイ<p class="aaaa"> </p>シトゥ・ジェンメイ</div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

場合nodeList を次のように変換します。配列には問題ありません。

コードをコピー

コードは次のとおりです。

window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var arr = []; 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)
}

<meta charset="utf-8"> <meta content="IE=8" http-equiv="X-UA-Compatible">Situ Zhengmei によるノードコレクション <title> </title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <div id="aaa"> <p class="aaaa">シトゥ・ジェンメイ</p> <p class="aaaa">シトゥ・ジェンメイ</p> <p class="aaaa">シトゥ・ジェンメイ</p> <p class="aaaa">シトゥ・ジェンメイ</p> <p class="aaaa">シトゥ・ジェンメイ</p> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ]

明らかに、nodeList には配列にはない機能があります。ボックス 2 を実行すると、ノードをドキュメント フラグメントに追加するときに、実際には DOM ツリーから分離され、nodeList がこの変更を追跡して動的に変更する必要があり、線形インクリメントが正しいインデックスに対応できないことがわかります。ノード！したがって、毎回 firstChild を取得するだけです。

コードをコピー コードは次のとおりです。

window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
while(c.length) [0] )//空になるまで毎回最初のノードのみを取得します
div.parentNode.replaceChild(d,div)
}

<meta charset="utf-8"> <meta content="IE=8" http-equiv="X-UA-Compatible"> <title>倒錯した子ノード by Situ Zhengmei </title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <div id="aaa"> <p class="aaaa"> </p>シトゥ・ジェンメイ<p class="aaaa"> </p>シトゥ・ジェンメイ<p class="aaaa"> </p>シトゥ・ジェンメイ<p class="aaaa"> </p>シトゥ・ジェンメイ<p class="aaaa"> </p>シトゥ・ジェンメイ</div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]
顺便一提，由getElementsByTagName取得的HTMLCollection也是这个样子，因此处理这类节点集合要打起十二分精神了！

<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> <div id="aaa"> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> <p class="aaaa">司徒正美</p> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这两种节点集合在各浏览器还实现得不太一样，如标准浏览器我们可以用Array.prototype.slice.call将它们转换为原生数组，IE则报错。标准浏览器的它们有hasOwnProperty与valueOf，而IE是没有的……