javascript abnormal node collection_javascript skills

<meta charset="utf-8"> <meta content="IE=8" http-equiv="X-UA-Compatible"> <title>Node collection 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>Situ Zhengmei<p class="aaaa"> </p>Situ Zhengmei<p class="aaaa"> </p>Situ Zhengmei<p class="aaaa"> </p>Situ Zhengmei<p class="aaaa"> </p>Situ Zhengmei</div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

If you convert nodeList to There is no problem with arrays!

Copy code

The code is as follows:

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)
}

<meta charset="utf-8"> <meta content="IE=8" http-equiv="X-UA-Compatible"> <title> </title>Node collection by Situ Zhengmei <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style> <div id="aaa"> <p class="aaaa"> </p> <p class="aaaa">Situ Zhengmei</p> <p class="aaaa">Situ Zhengmei</p> <p class="aaaa">Situ Zhengmei</p> <p class="aaaa">Situ Zhengmei</p> </div>Situ Zhengmei
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh it to execute
]

Obviously nodeList is a little weird. has features that arrays do not have. From running box 2, we can see that when appendChild the node to the document fragment, it will actually be separated from the DOM tree. nodeList must track this change and dynamically change itself, and linear increment i cannot Corresponds to the index of the correct node! So we just get its firstChild every time. Copy code

The code is as follows:


window.onload = function(){
var d = document.createDocumentFragment();
var div = document.getElementById("aaa");
var c = div.childNodes;
while(c.length) d.appendChild(c[0] )//Only take its first node each time until it is empty
div.parentNode.replaceChild(d,div)

}

<meta charset="utf-8"> <meta content="IE=8" http-equiv="X-UA-Compatible"> <title> </title> <style> #aaa { padding:10px; border:1px solid red; } p { border:1px solid blue; } </style>Perverted childNodes by Situ Zhengmei <div id="aaa"> <p class="aaaa"> </p> <p class="aaaa"> </p>Situ Zhengmei<p class="aaaa"> </p>Situ Zhengmei<p class="aaaa"> </p>Situ Zhengmei<p class="aaaa"> </p>Situ Zhengmei</div> Situ Zhengmei

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]
顺便一提，由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是没有的……