为什么运行不是一次性清除节点

来源:9-14 删除节点removeChild()

小花猫爱吃大脸鱼

2016-01-05 16:13

为什么运行不是一次性清除节点?

写回答 关注

1回答

  • 努力提升
    2016-01-05 16:28:59

    这样写可以一次性清除

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    </head>

    <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");
        // 在此完成该函数
        while(content.childNodes[0]){
            content.removeChild(content.childNodes[0]);
        }
        
        
        //法一: 一次性清除节点内容
      /*for(var i = 0;i < content.childNodes.length; i++){
            if(content.childNodes[i].nodeType != 1){   
                continue;  
            } else {
                content.removeChild(content.childNodes[i]);    
            }
        }

        //法二,一次性清除节点内容
    /*   
        for(var i = content.childNodes.length - 1; i >= 0; i--){
            var chnode = content.childNodes[i];
            content.removeChild(chnode);  
        }
    */

      //法三,多次方清除节点内容
    /*
        for(var i = 0;i < content.childNodes.length; i++){
            var chnode = content.childNodes[i];
            content.removeChild(chnode);  
        }
    */
    }
    </script>

    <button onclick="clearText()">清除节点内容</button>



    </body>
    </html>

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468190 学习 · 21891 问题

查看课程

相似问题