javascript 变态的节点集合

216 阅读 0 评论 143 点赞

我是靠谱客的博主顺心万宝路，最近开发中收集的这篇文章主要介绍javascript 变态的节点集合，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

顺便一提，由getElementsByTagName取得的HTMLCollection也是这个样子，因此处理这类节点集合要打起十二分精神了！

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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