為什么我這段代碼不能一次吧節(jié)點(diǎn)內(nèi)容清理完,需要點(diǎn)幾次按鈕才行
<body>
<div id="content">
? <h1>html</h1>
? <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ù)
? for(var i=0;i<content.childNodes.length;i++){
? ? ? var mynode=content.removeChild(content.childNodes[i]);
? ? ? mynode=null;
? }
}
</script>
<button onclick="clearText()">清除節(jié)點(diǎn)內(nèi)容</button>
2016-08-03
因?yàn)楫?dāng)你執(zhí)行了removeChild方法后,content.childNodes.length的值,以及content.childNodes[i]都發(fā)生了變化。比如題中有5個(gè)子節(jié)點(diǎn),當(dāng)刪除第1個(gè)子節(jié)點(diǎn)(html),即content.childNode[0]后,原先的第2個(gè)子節(jié)點(diǎn)(php)已經(jīng)變成第1個(gè)子節(jié)點(diǎn)了,conten.childNodes.length也從5變成了4 。所以想一次刪除的方法應(yīng)該是:
function clearText() {
? var content=document.getElementById("content");
? // 在此完成該函數(shù)
? var content_child=content.childNodes;
? var child_length=content_child.length;
? for(var i=0;i<child_length;i++){
? ? ? content.removeChild(content_child[0]);
? }
}
2016-08-03
刪除代碼一定要注意,刪除一個(gè)后,一般節(jié)點(diǎn)就少了一個(gè),所以刪除一般是從大到小刪除,即:for(var i=content.childNodes.length-1;i>=0;i--){...}