JavaScript刪除所有子節點的方法

今天在寫一段動態刪除select控件的所有option的代碼時，發現總是不能全部刪除，代碼如下：

selectObj        ------>select控件

optionNodes   ------>select控件所有子節點組成的數組

 

 

for(var i=0;i<optionNodes.length;i++) {

        selectObj.removeChild(selectObj.firstChild);

}

 

 

原因是當i=0時，刪除了第一個子節點，此時i=1的元素的下標由於此元素變成了firstChild向前移動而變成了0；那麼當i=1時，實際刪除的是第三個元素，第二個元素保留了下來，依此類推。

 

正確方法一：

for(var i=optionNodes.length-1;i>=0;i--) {

        selectObj.removeChild(selectObj.lastChild);

}

 

 

正確方法二：

selectObj.innerHTML = "";

 

 

正確方法三：

while(selectObj.firstChild) {

        selectObj.removeChild(selectObj.firstChild);

}