JavaScript 删除节点时的常见陷阱与正确做法

JavaScript 删除节点时的常见陷阱与正确做法

以一个简单的场景为例：假设有一个区域<div id="newbody"></div>，现在需要删除其中的所有子节点。很多人可能会写出如下代码：

 
var divpanel = document.getElementById("newbody");
var controlinfo= divpanel.childNodes;
for(var index = 0;index < controlinfo.length ;index++)
{ 
divpanel.removeChild(controlinfo[index]);
} 

乍一看，这种写法似乎逻辑正确，即逐个遍历并删除节点。然而仔细分析会发现，每次执行removeChild后，controlinfo.length都会减小，导致无法删除所有节点，这是一个典型的Bug。改进方法很明确：既然从开头遍历会出问题，那就从末尾开始遍历，代码如下：

 
var divpanel = document.getElementById("newbody");
var controlinfo= divpanel.childNodes;
for(var index = controlinfo.length - 1;index >= 0 ;index--)
{ 
divpanel.removeChild(controlinfo[index]);
} 

经过调试，这种写法非常有效（Very Good）。

这种陷阱不仅存在于JavaScript中，在C#、Java等其他语言里也常见，往往因此浪费大量时间。虽然这个问题早已为人所知，但为了警示自己并分享给读者，特此记录。