关于 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行代码执行，就会出现问题，导致不能删除或只能删除部分。问题在于，从小往大删的话，要删除的子节点的序号随着子节点长度的减小而增大，所以会出现问题；而从大往小删除的话，要删除的子节点的序号是随着子节点长度的减小而减小的，所以不会出现问题。

 

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

posted on 2017-07-06 14:16  王孟俊  阅读(331)  评论(0)  编辑  收藏  举报

导航