zoukankan      html  css  js  c++  java
  • 前端学习笔记之cloneNode()

          最近工作很忙,有段时间没学习我的代码了,昨天再打开看,发现很多之前很烂熟的东西居然也变得模糊。正好之前一直跃跃欲试想参加的“先行者计划”论坛竟然可以看到老师布置的练习题目了,于是还是决定跟着论坛一起做题吧,每天坚持前进一小步,希望自己能早日转行前端。
    昨天做了第一个题,题目如下:
          

          这个题还算简单,“克隆五次”我想到了for循环,cloneNode()方法之前在学习js基础时还有印象,只是已经不太记得括号内应该放什么参数了,然后看到cloneNode()时想起了jQuery中同样功能的clone(),同样还是对参数不太清楚。然后就正好查了一下,顺便加深一下记忆。
    cloneNode()方法,是DOM中克隆节点的方法,接收boolean类型的参数,也不可以不设置参数,不设置参数时默认为false。参数设置为true时,表明克隆节点及其属性以及后代;参数设置为false时,表明克隆节点本身。事件方法应该也算是一种属性吧,所以在参数为true的情况下,绑定的事件应该也要被克隆。
          关于jQuery中的clone(),也接收true和false参数,用法同上,只是它只适用于jQuery对象。
          虽然看起来简单,但是写起代码来还是耗了一番心力的,我做的答案如下, 虽然性能发面还有需要优化的地方。
    <script>

        window.onload=function(){
               var div=document.getElementById("div_0");
               var main=document.querySelector("#main");
               for(var i=0; i<5; i++){
                     var clone=div.cloneNode(true);

                     main.appendChild(clone);

               }

          }

    </script>

    不过在论坛里,发现有一位同学写得特别棒,使用了createDocumentFragment文档碎片,大大提高了效率。代码摘录过来,以便学习。

    <script>
          var node="";
          var fragment = document.createDocumentFragment();
          for (var i = 1; i <= 5; i++) {
                node=document.getElementById("div_0").cloneNode(true);
                fragment.appendChild(node);
          }
          document.getElementById("main").appendChild(fragment);
    </script>

        

  • 相关阅读:
    [05] EL表达式
    [03-01] JSP自定义标签
    [04] JSP标准动作
    [03] JSP指令
    Fiddler抓包调试前端脚本代码
    《互联网协议入门》思维导图笔记
    Nodejs学习笔记(十)—与MongoDB的交互(mongodb/node-mongodb-native)、MongoDB入门
    Nodejs学习笔记(九)—与Redis的交互(mranney/node_redis)入门
    Nodejs学习笔记(八)—Node.js + Express 实现上传文件功能(felixge/node-formidable)
    Nodejs学习笔记(七)—Node.js + Express 构建网站简单示例
  • 原文地址:https://www.cnblogs.com/vivian2016/p/5800058.html
Copyright © 2011-2022 走看看