javascript 变态的节点集合

网络编程 发布日期：2024/10/13 浏览次数：1

正在浏览：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是没有的……
上一篇：js DataSet数据源处理代码
下一篇：javascript 节点遍历函数

一句话新闻

Windows上运行安卓你用过了吗
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。