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);

}