今天给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
函数返回的数组完全不会有引用依赖,就是返回一个全新数组。
如果有更好的方案,欢迎贴上来学习学习
新闻热点
疑难解答