码迷,mamicode.com
首页 > 其他好文 > 详细

操作getElementsByTagName返回的元素集合需要注意的细节

时间:2014-12-01 23:55:46      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   使用   sp   java   for   

学习javascript不仔细还真不行。

如题所说,当你对getElementsByTagName返回的集合中的元素执行删除节点的操作时,集合的length是会变化的,例如

<div id="attachList">
    <input type="file" name="img" />
    <input type="file" name="img" />
    <input type="file" name="img" />
    <input type="file" name="img" />
    <a id="btn" id="delete">删除</a>
</div>

然后使用javascript删除div当中的input元素,如果你这样做

var btn=document.getElementById("btn");
btn.onclick=function(){
    var attach=document.getElementById("attachList");
    var filefield=attach.getElementsByTagName("input");
    for(var i=0,len=filefield.length;i<len;i++){
        attach.removeChild(filefield[i]);
    }
}    

当你点击按钮后会把div里面的input全部删除吗?不会,最终会剩下2个,因为当你删除一个input后,filefield集合的length会相应的减一,当i等于filefield的length时,删除操作无法再执行,同理对于getElementsByClassName返回的元素集合也是这样。

要完全删除可以这样:

var btn=document.getElementById("btn");
btn.onclick=function(){
    var attach=document.getElementById("attachList");
    var filefield=attach.getElementsByTagName("input");
    for(var i=0,len=filefield.length;i<len;i++){
        attach.removeChild(filefield[0]);
    }
}    

把删除操作中的索引保持为0,但是要注意filefield的length一定要缓存,否则会出现和上面一样的问题;

也可以这样做:

var btn=document.getElementById("btn");
btn.onclick=function(){
    var attach=document.getElementById("attachList");
    var filefield=attach.getElementsByTagName("input");
    for(var len=filefield.length,i=len-1;i>=0;i--){
        attach.removeChild(filefield[i]);
    }
}  

 

操作getElementsByTagName返回的元素集合需要注意的细节

标签:style   blog   io   ar   color   使用   sp   java   for   

原文地址:http://www.cnblogs.com/ckzhou/p/4136281.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!