关于 removeChild()删除节点

  在做慕课的js教程时,在removeChild()删除节点这一块遇到了一个问题。题目为:定义clearText()函数,完成节点内容的删除。代码如下:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 
 8 <body>
 9 <div id="content">
10   <h1>html</h1>
11   <h1>php</h1>
12   <h1>javascript</h1>
13   <h1>jquery</h1>
14   <h1>java</h1>
15 </div>
16 
17 <script type="text/javascript">
18 function clearText() {
19   var content=document.getElementById("content");
20   // 在此完成该函数
21   for(var i=content.childNodes.length-1;i>=0;i--){
22      content.removeChild(content.childNodes[i]);
23   }
24 /*  for (var i = 0; i< content.childNodes.length;i++){
25       content.removeChild(content.childNodes[i]);
26   }*/
27 }
28 </script>
29 <button onclick="clearText()">清除节点内容</button>
30 
31 </body>
32 </html>

  对于循环遍历每个子节点这块,如果使用21-23行代码执行,是没有问题的。但是如果使用24-26行代码执行,就会出现问题,导致不能删除或只能删除部分。问题在于,从小往大删的话,要删除的子节点的序号随着子节点长度的减小而增大,所以会出现问题;而从大往小删除的话,要删除的子节点的序号是随着子节点长度的减小而减小的,所以不会出现问题。

  所以以为遇到此类问题,记得从大往小删。

原文地址:https://www.cnblogs.com/wangmengjun/p/7126086.html