JavaScript：刪除節點（removeChild）該留意的一點

假設div裡有這麼些內容：

<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>

現在要通過JavaScript的功能，將它們清空。

雖然可以通過一句代碼直接實現：

document.getElementById("content").innerHTML=""

但是本文裡主要討論 removeChild 函數。

很想當然地以為藉助下面的代碼就能完成：

<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=0; i<content.childNodes.length; i++) {
 var childNode = content.childNodes[i];
 content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除節點內容</button>

沒想到，點擊了按鈕後，竟然只清除掉1、3、5，而2、4、6竟然沒有消失，而是繼續顯示在頁面上。

經過逐步研究，發現，上面代碼裡的for迴圈，相當於執行了下面的6句：

1、content.removeChild(content.childNodes[0]);  刪除第1個節點
2、content.removeChild(content.childNodes[1]);  刪除第2個節點
3、content.removeChild(content.childNodes[2]);  刪除第3個節點
4、content.removeChild(content.childNodes[3]);  刪除第4個節點
5、content.removeChild(content.childNodes[4]);  刪除第5個節點
6、content.removeChild(content.childNodes[5]);  刪除第6個節點

問題從一開始就產生了：

刪除掉第一個節點後，後面節點的順序全部發生了變化：原來的第二個節點往前蹭，成為新的第一個節點；原來的第三個節點，成為第二個節點……

於是呢，接下來原本是要刪除第二個節點的，卻將最原始的第三個節點給刪除掉了。

最終，並沒有全部刪除，只刪除掉1、3、5，留下了2、4、6。

文法沒有錯誤，但是得不到所要的結果，這就是演算法上面的錯誤！該如何修正呢？

“順序刪除”不行，那就“逆序刪除”吧。將 for 語句修改一下：

for (var i=content.childNodes.length-1;i>=0;i--)

試試吧，成功了！

<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=content.childNodes.length-1;i>=0;i--) {
 var childNode = content.childNodes[i];
 content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除節點內容</button>

其實，也不一定要用逆序。方法2：

<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for (var i=0;i<content.childNodes.length;i++){
 var childNode = content.childNodes[ 0];  //總是刪除第一個，是不是更簡單
 content.removeChild(childNode);
}
}
</script>
<div id="content">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
</div>
<button onclick="clearText();">清除節點內容</button>

 

轉至：http://wangpfsir.blog.163.com/blog/static/67963727201043002658424/