關於在js中使用for循環刪除節點

<div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>

1. 刪除該節點的內容，先要獲取子節點。

2. 然后使用循環遍歷每個子節點。

3. 使用removeChild()刪除節點。

 

問題在於循環遍歷時習慣性的用了下面這樣的辦法

function clearText() {
  var content=document.getElementById("content");
  // 在此完成該函數
  for(var i=0;i<content.childNodes.length;i++)
  {
      content.removeChild(content.childNodes[i]);
      
  }
  
}

結果是無法刪除干凈的，會剩下php 和jqurey

原因是在遍歷時因為刪除了子節點，content.childNdes.length值已經減小，影響了遍歷結果。

合適的循環遍歷辦法應該是

function clearText() {
  var content=document.getElementById("content");
  for(var i=content.childNodes.length-1;i>=0;i--){
     content.removeChild(content.childNodes[i]);
  }
}