关于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函数返回的数组完全不会有引用依赖,就是返回一个全新数组。

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