JavaScript 存在陷阱 刪除某一區(qū)域所有節(jié)點
更新時間:2010年05月10日 18:48:33 作者:
實現(xiàn)功能:刪除某一區(qū)域中所有節(jié)點。
比較簡單的,例如:有一區(qū)域<div id="newbody" ></div>,現(xiàn)要求刪除其中所有節(jié)點。相信很多人會這樣寫:
var divpanel = document.getElementById("newbody");
var controlinfo= divpanel.childNodes;
for(var index = 0;index < controlinfo.length ;index++)
{
divpanel.removeChild(controlinfo[index]);
}
咋一看,是啊,對啊,這樣很正確啊,一個一個遍歷,最后全部刪除。但是,仔細想想,每當(dāng)刪除一個節(jié)點后,controlinfo.length就會變小,這樣下去是不能全部刪除的——存在Bug。那么該如何改進呢?已經(jīng)很清楚了,既然從開頭Start不行,那我們就從結(jié)尾Start,完全正確,如下:
var divpanel = document.getElementById("newbody");
var controlinfo= divpanel.childNodes;
for(var index = controlinfo.length - 1;index >= 0 ;index--)
{
divpanel.removeChild(controlinfo[index]);
}
調(diào)試,Very Good!
這種陷阱不只是在JavaScript中才會碰到,基本上所有的語言,如C#、Java等,我們都會碰到這樣的問題,有時會因為這樣的問題而浪費很多的時間。很早就已經(jīng)知道了這個問題,不過總是太相信自己的記憶,而沒有好好記錄,現(xiàn)在特記錄下來,警示自己,同時也與大家分享。
復(fù)制代碼 代碼如下:
var divpanel = document.getElementById("newbody");
var controlinfo= divpanel.childNodes;
for(var index = 0;index < controlinfo.length ;index++)
{
divpanel.removeChild(controlinfo[index]);
}
咋一看,是啊,對啊,這樣很正確啊,一個一個遍歷,最后全部刪除。但是,仔細想想,每當(dāng)刪除一個節(jié)點后,controlinfo.length就會變小,這樣下去是不能全部刪除的——存在Bug。那么該如何改進呢?已經(jīng)很清楚了,既然從開頭Start不行,那我們就從結(jié)尾Start,完全正確,如下:
復(fù)制代碼 代碼如下:
var divpanel = document.getElementById("newbody");
var controlinfo= divpanel.childNodes;
for(var index = controlinfo.length - 1;index >= 0 ;index--)
{
divpanel.removeChild(controlinfo[index]);
}
調(diào)試,Very Good!
這種陷阱不只是在JavaScript中才會碰到,基本上所有的語言,如C#、Java等,我們都會碰到這樣的問題,有時會因為這樣的問題而浪費很多的時間。很早就已經(jīng)知道了這個問題,不過總是太相信自己的記憶,而沒有好好記錄,現(xiàn)在特記錄下來,警示自己,同時也與大家分享。
相關(guān)文章
微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過程解析
這篇文章主要介紹了微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過程解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02JS 實現(xiàn)導(dǎo)航欄懸停效果(續(xù)2)
發(fā)現(xiàn)原來的方法還有是有幾個問題:首先Js代碼冗余,導(dǎo)航條上的Tab是用js實現(xiàn)跳轉(zhuǎn)而不是超鏈接,還有導(dǎo)航條本身用fixed定位,但沒有被設(shè)置為水平居中,而是在JS中更改left值使其居中2013-09-09