首页 > 网站 > WEB开发 > 正文

关于javascript removeChild的那些事

2024-04-27 14:20:53
字体:
来源:转载
供稿:网友

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

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表