首页 > 代码库 > 操作getElementsByTagName返回的元素集合需要注意的细节
操作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]); }}
操作getElementsByTagName返回的元素集合需要注意的细节
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。