发布于 2016-09-17 06:08:06 | 30 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


今天想实现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是没有的……

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务