在javascript将NodeList作为Array数组处理的方法

比如：

[url=http://www.cnblogs.com/jeffwongishandsome/]</div> （2）、javascript测试代码

var anchors = document.getElementsByTagName("a"); for (i = 0; i < anchors.length; i++) { var ele= document.createElement("a"); ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/"); ele.appendChild(document.createTextNode("new link test")); document.getElementById("divAnchor").appendChild(ele); //div附加一个新链接 }

在文档加载结束后，执行上面的脚本。我们的本意是在div内，已经存在的a元素后再附加一个a元素。但是，您可以运行一下，浏览器crash掉了吧？楼猪这里IE直接挂掉，FF提示脚本正忙，是否停止脚本运行，点击停止后，页面内已经生成了n多个a链接。其实我们可以大胆分析出原因来：for循环NodeList（前提：for循环内部添加了新的元素使nodelist长度发生了变化。感谢陈童鞋超群的建议），它的length会不断变化上升，循环循环再循环，最后成了个死循环。而用下面的代码，和我们预期的效果是一样一样的：

[u]复制代码[/u] 代码如下:

var links = document.getElementsByTagName("a");
var anchors = null; //数组
try {
anchors = Array.prototype.slice.call(links);
}
catch (e) { //兼容ie
anchors = new Array();
for (var i = 0; i < links.length; i++) {
anchors.push(links[i]);
}
}
for (i = 0; i < anchors.length; i++) { //数组循环 安全多了
var ele = document.createElement("a");
ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/");
ele.appendChild(document.createTextNode("new link test"));
document.getElementById("divAnchor").appendChild(ele); //div附加一个新链接
}

那么你可能会问，不转换不行吗？没有那么死板，当然是可以的，只要对我们平时熟悉的编码习惯稍微动点小手术就可以了：

[u]复制代码[/u] 代码如下:

var anchors = document.getElementsByTagName("a");
var len = anchors.length; //定义一个变量
for (i = 0; i < len; i++) { //对局部变量len进行循环
var ele = document.createElement("a");
ele.setAttribute("href", "http://www.cnblogs.com/jeffwongishandsome/");
ele.appendChild(document.createTextNode("new link test"));
document.getElementById("divAnchor").appendChild(ele); //div附加一个新链接
}

到这里，不管有无疑问，实际编程如何取舍，楼猪都要感谢您的阅读了。期待指点。者：Jeff Wong

全部评论(0)

上一篇：JavaScript中实现键值对应的字典与哈希表结构的示例
下一篇：兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)