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是没有的……



相关阅读:
javascript实现的像java、c#之类的sleep暂停的函数代码
Javascript结合css实现网页换肤功能
Ubuntu Linux需要的内存
SQL Server索引管理之六大铁律
javascript 缓冲效果实现代码 推荐
vb.net GDI+入门——了解Font类
规范HTML代码可以节省修改代码的时间
可以不被浏览器拦截的弹出窗口JS代码
PHP 脚本:随心所欲的代码逐渐流行
用存储过程实现删除数据表的部分记录
PHP网站开发需要掌握的10个技巧
获取转向地址的URL的源文件(可自定义REFER)
Windows7的兼容性仍然存在问题
Vista下WMC不能播放RMVB解决办法
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4