操作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]);
    }
}