首頁猿問用removeChild刪除節(jié)點時...

用removeChild刪除節(jié)點時，三種方法得到的結(jié)果為何不同

JavaScript

year1233 2016-08-21 17:09:48

以下三種方法，希望大家?guī)兔忉屜拢硗?，如果大家有好的方法，也可以指點一下，感謝，具體代碼如下：<!DOCTYPE?HTML> <html> <head> ????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> ????<title>無標(biāo)題文檔</title> </head> <body> ????<div?id="content"> ????????<h1>html</h1> ????????可通過?x?操作 ????????<h1>php</h1> ????????<h1>javascript</h1> ????????<h1>jquery</h1> ????????<h1>java</h1> ????</div> ????<script?type="text/javascript"> ????????function?clearText()?{ ????????????var?content=document.getElementById("content"); ????????????//?在此完成該函數(shù) ???? ????????????//法一,只一次性清除h1節(jié)點內(nèi)容 ????????????for(var?i=0;i<content.childNodes.length;i++){ ????????????????if(content.childNodes[i].nodeType!=1){??? ???????????????????continue;?? ????????????????}else{ ???????????????????content.removeChild(content.childNodes[i]);???? ????????????????} ??????????????????? ????????????????} ???? ????????????//法二,一次性清除節(jié)點內(nèi)容 ????????????? ?????????????//for(var?i=content.childNodes.length-1;i>=0;i--){ ?????????????//???content.removeChild(content.childNodes[i]);?? ?????????????//} ???????????? ???? ????????????//法三,多次清除節(jié)點內(nèi)容， ???? ????????????//for(var?i=0;i<content.childNodes.length;i++){ ????????????//??content.removeChild(content.childNodes[i]);?? ????????????//}???? ????????} ????</script> ????<button?onclick="clearText()">清除節(jié)點內(nèi)容</button> </body> </html>

查看完整描述

2 回答

已采納

stone310

TA貢獻(xiàn)361條經(jīng)驗獲得超191個贊

法一我注釋說明了，法二和法三拎出來說下，

法二，for(var?i=content.childNodes.length-1;i>=0;i--){先說說這種寫法發(fā)生了什么，

當(dāng)你點擊觸發(fā)，i的值是content.childNodes.length-1，條件是只要i>=0，就可以執(zhí)行語句，因此這里i能執(zhí)行到i=0；

因此這種寫法下點擊按鈕所有節(jié)點全部刪除

法三：for(var?i=0;i<content.childNodes.length;i++){

點擊觸發(fā)，i開始是0，條件是i要小于元素節(jié)點的個數(shù)，就是這里發(fā)生了問題，

i=0；length=11，執(zhí)行語句刪除節(jié)點，繼續(xù)

i=1；length=10，執(zhí)行語句刪除節(jié)點，繼續(xù)

i=2；length=9，執(zhí)行語句刪除節(jié)點，繼續(xù)

i=3；length=8，執(zhí)行語句刪除節(jié)點，繼續(xù)

i=4；length=7，執(zhí)行語句刪除節(jié)點，繼續(xù)

i=5；length=6，執(zhí)行語句刪除節(jié)點，繼續(xù)

i=6；length=5，條件不滿足，停止！

再次點擊，

i=0 ; length=5............

因此多次點擊刪除節(jié)點

法一注釋：（childNodes下的節(jié)點包括元素節(jié)點和文本節(jié)點，上面<h1>就是元素節(jié)點，用nodeType時返回1；

‘’可通過?x?操作‘’和一些空白的連接處是文本節(jié)點，用nodeType時返回-1；）

function?clearText()?{
????var?content=document.getElementById("content");
????//?在此完成該函數(shù)
????//法一,只一次性清除h1節(jié)點內(nèi)容
????for(var?i=0;i<content.childNodes.length;i++){
????????if(content.childNodes[i].nodeType!=1){
????????????//如果childNodes[i]不是元素節(jié)點
????????????continue;
????????????//跳過，不操作
????????}else{
????????????content.removeChild(content.childNodes[i]);
????????????//從content里刪除childNodes[i]，保證只刪除元素節(jié)點
????????}
????}
????//法二,一次性清除節(jié)點內(nèi)容
????//for(var?i=content.childNodes.length-1;i>=0;i--){
????//???content.removeChild(content.childNodes[i]);
????//}
????//法三,多次清除節(jié)點內(nèi)容，
????//for(var?i=0;i<content.childNodes.length;i++){
????//??content.removeChild(content.childNodes[i]);
????//}
}

看到這里，問你個問題，為什么法一也用i++這種方式寫，但卻可以一次性就刪除所有元素節(jié)點，而不像法三那樣多次點擊才能清除，能理解這個問題就能真正理解了這三種方法了

具體使用看情況，一般不用法三，法一和法二都挺有實際操作性的，另外，

如果想達(dá)到法一的需求，只刪除元素節(jié)點，可以用children代替childNodes，children是只判斷出元素節(jié)點而不管文本節(jié)點

但使用for方法必須是減法

4 反對回復(fù) 2016-08-21