zoukankan      html  css  js  c++  java
  • 操作getElementsByTagName返回的元素集合需要注意的细节

    学习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]);
        }
    }  
  • 相关阅读:
    洛谷P1421 小玉买文具
    洛谷P1035 级数求和
    洛谷 P2337 【[SCOI2012]喵星人的入侵】
    洛谷P1002 过河卒
    洛谷 P4073 [WC2013]平面图
    洛谷 P4705 玩游戏
    python3.7-初学篇-06
    python3.7-初学篇-04
    python3.7-初学篇-03
    python3.7-初学篇-02
  • 原文地址:https://www.cnblogs.com/ckzhou/p/4136281.html
Copyright © 2011-2022 走看看