javascript 变态的节点集合
更新时间：2010年03月28日 14:08:04 作者：
今天想实现jQuery的unwrap效果，换言之，就是用其孩子把其父节点干掉。为了效率，用到文档碎片，而取孩子时使用到childNodes（返回一个nodeList）
[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+CSS实现模仿浏览器网页字符查找功能的方法,实例分析了javascript实现查找功能的样式及相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了javascript面向对象之this关键词用法分析,以实例形式分析了在不同场合下this使用中的特性及相关使用技巧,需要的朋友可以参考下2015-01-01
javascript之Partial Application学习
在数学中，一个函数是描述每个输入值对应唯一输出值的这种对应关系，符号为 f(x)。例如，表达式 f(x)=x2表示了一个函数 f，其中每个输入值x都与唯一输出值x2相联系2013-01-01
这篇文章主要给大家介绍了关于JavaScript的十大取整方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
本文为大家介绍下使用js仿新浪微博登陆邮箱提示效果，具体实现代码如下，感兴趣的朋友可以参考下，希望对大家有所帮组2013-08-08
按键测试，支持像 Ctrl+Alt+Shift+T 的组合键
按键测试，支持像 Ctrl+Alt+Shift+T 的组合键...2006-10-10
在行走江湖的过程中,会出现很多性能优化的问题来让你手足无措,那么这篇文章主要给大家介绍了关于JS防抖节流函数的实现与使用场景,针对这两个问题来为你答疑解惑,需要的朋友可以参考下2021-07-07
javascript中的window.location.search方法简介
window.location.search方法是截取当前url中“?”后面的字符串，示例如下，感兴趣的朋友可以参考下2013-09-09
用javascript实现分割提取页面所需内容...2007-05-05
在 JavaScript 开发中,我们经常需要将字符串转换为数字,例如从输入框获取用户输入后进行数学计算,JavaScript 提供了多种方法来实现这一功能,如 parseInt、parseFloat、Number 等,本文将详细介绍这些方法的使用方式、适用场景以及可能的坑,需要的朋友可以参考下2025-03-03
最新评论