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

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

  • 相关阅读:
    20200630(A--E)题解 by 王文硕
    20200629(A--E)题解 by 章思航
    GC垃圾回收
    Codeforces Round #629 (Div. 3) A、B、C
    AtomicInteger的Increment方法的自己实现。
    两个线程,一个输出字母一个输出数字,输出A1B2C3....Z26
    NIO记录
    mysql优化相关
    一些Nginx的Linux命令和conf配置文件
    docker记录
  • 原文地址:https://www.cnblogs.com/wangmengjun/p/7126086.html
Copyright © 2011-2022 走看看