JavaScript 存在陷阱 刪除某一區(qū)域所有節(jié)點(diǎn)
更新時(shí)間：2010年05月10日 18:48:33 作者：
實(shí)現(xiàn)功能:刪除某一區(qū)域中所有節(jié)點(diǎn)。
比較簡單的，例如：有一區(qū)域<div id="newbody" ></div>，現(xiàn)要求刪除其中所有節(jié)點(diǎn)。相信很多人會這樣寫：
var divpanel = document.getElementById("newbody");
var controlinfo= divpanel.childNodes;
for(var index = 0;index < controlinfo.length ;index++)
{
divpanel.removeChild(controlinfo[index]);
}
咋一看，是啊，對啊，這樣很正確啊，一個(gè)一個(gè)遍歷，最后全部刪除。但是，仔細(xì)想想，每當(dāng)刪除一個(gè)節(jié)點(diǎn)后，controlinfo.length就會變小，這樣下去是不能全部刪除的——存在Bug。那么該如何改進(jìn)呢？已經(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等，我們都會碰到這樣的問題，有時(shí)會因?yàn)檫@樣的問題而浪費(fèi)很多的時(shí)間。很早就已經(jīng)知道了這個(gè)問題，不過總是太相信自己的記憶，而沒有好好記錄，現(xiàn)在特記錄下來，警示自己，同時(shí)也與大家分享。
復(fù)制代碼 代碼如下:
var divpanel = document.getElementById("newbody");
var controlinfo= divpanel.childNodes;
for(var index = 0;index < controlinfo.length ;index++)
{
divpanel.removeChild(controlinfo[index]);
}
咋一看，是啊，對啊，這樣很正確啊，一個(gè)一個(gè)遍歷，最后全部刪除。但是，仔細(xì)想想，每當(dāng)刪除一個(gè)節(jié)點(diǎn)后，controlinfo.length就會變小，這樣下去是不能全部刪除的——存在Bug。那么該如何改進(jìn)呢？已經(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等，我們都會碰到這樣的問題，有時(shí)會因?yàn)檫@樣的問題而浪費(fèi)很多的時(shí)間。很早就已經(jīng)知道了這個(gè)問題，不過總是太相信自己的記憶，而沒有好好記錄，現(xiàn)在特記錄下來，警示自己，同時(shí)也與大家分享。
相關(guān)文章
這篇文章適合任何一位基于JavaScript開發(fā)的開發(fā)者。我寫這篇文章主要涉及JavaScript中一些簡寫的代碼，幫助大家更好理解一些JavaScript的基礎(chǔ)。希望這些代碼能從不同的角度幫助你更好的理解JavaScript。2020-09-09
javascript按指定格式輸出文件最后更新時(shí)間
javascript按指定格式輸出文件最后更新時(shí)間...2007-08-08
TypeScript 安裝使用及基本數(shù)據(jù)類型
這篇文章主要介紹了TypeScript 安裝使用及基本數(shù)據(jù)類型,本文分步驟給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
javascript + jquery實(shí)現(xiàn)定時(shí)修改文章標(biāo)題
用javascript+jquery寫的一個(gè)定時(shí)器，定時(shí)修改文章標(biāo)題,需要的朋友可以參考下2014-03-03
原生js+canvas實(shí)現(xiàn)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了原生js+canvas實(shí)現(xiàn)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Bootstrap每天必學(xué)之按鈕（Button）插件
Bootstrap每天必學(xué)之按鈕（Button）插件,通過按鈕（Button）插件，您可以添加進(jìn)一些交互，比如控制按鈕狀態(tài)，或者為其他組件（如工具欄）創(chuàng)建按鈕組，感興趣的小伙伴們可以參考一下2016-04-04
微信小程序 websocket 實(shí)現(xiàn)SpringMVC+Spring+Mybatis
這篇文章主要介紹了 微信小程序websocket實(shí)現(xiàn)SpringMVC+Spring+Mybatis的相關(guān)資料,這里提供實(shí)現(xiàn)思路及實(shí)現(xiàn)代碼，需要的朋友可以參考下2017-08-08
Javascript根據(jù)指定下標(biāo)或?qū)ο髣h除數(shù)組元素
刪除數(shù)組元素在工作中經(jīng)常會用到，本文講解一下Javascript根據(jù)下標(biāo)刪除數(shù)組元素的方法，需要了解的朋友可以參考下2012-12-12
uniapp開發(fā)H5打包微信小程序樣式失效的完美解決方法
本文主要介紹了在使用uniapp開發(fā)H5頁面并打包成微信小程序時(shí),可能會出現(xiàn)樣式失效的問題,并提供了解決方法,通過本文的學(xué)習(xí),讀者可以了解uniapp開發(fā)H5頁面打包成微信小程序的注意事項(xiàng),避免出現(xiàn)樣式失效等問題2023-03-03
仿豆瓣分頁原型(Javascript版)...2007-04-04