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

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