removeChild的那些事

关于javascript removeChild的那些事关于Javascript removeChild的那些事今天给removeChild搞死了，弄了几个小时，上代码

<ul id="myList"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li></ul><button onclick="test()">删除列表</button>< script > function test(){ var list = document.getElementById("myList"); var childrens = list.getElementsByTagName('li'); for(var i = 0 , len = childrens.length; i < len; i++){ list.removeChild(childrens[i]); } }< /script >

上面这段代码可运行而且不会报错，但是怎么弄都删除不了全部。怎么整都是只删除3个节点，，，，

后来经过调试才知道原来list在removechildrens的时候，childrens的长度不断的在变化，所以删除到第四个节点的时候i=3，而childrens里只剩3个节点了所以childrens[3]等于undefined,所以每次只能删除3个节点 ，解决方案如下

#修改for循环 for(var i = 0 , len = childrens.length; i < len; i++){ list.removeChild(childrens[0]); } #使用while循环 var dom = childrens[0]; while(dom){ list.removeChild(dom); dom = childrens[0]; }

2014-08-12 修改今天突然间用到document.querySelectorAll这个html5新的选择器，然后使用上面的那种处理方式，始终得不到结果而且还报错，，NND对着错误看了许久，然后在调试了一下，原来document.querySelectorAll这个函数返回的跟document.getElementsByTagName返回的处理方式不一样document.querySelectorAll这函数完全可以使用如下操作

var list = document.querySelector("#myList"); // 返回单个对象 var childrens = list.querySelectorAll('li'); // 返回对象数组 for(var i = 0 , len = childrens.length; i < len; i++){ console.log(i); list.removeChild(childrens[i]); }

document.querySelectorAll函数返回的数组完全不会有引用依赖,就是返回一个全新数组。

如果有更好的方案，欢迎贴上来学习学习