JavaScript:刪除節點(removeChild)該留意的一點

來源:互聯網
上載者:User

假設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/

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。