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>

        

  • 相关阅读:
    css代码中position的定位,baidu+总结
    ibatis_HelloWorld
    v7系统,任务栏的开始图标和其他图标重合问题
    递归方法:输入一个多位整数,计算出从0到该数1出现的个数。
    解决JS:window.close()在Firefox下的不能关闭的问题
    Programming in the MidFuture(转)
    修改blog问题
    面向数据库的高级语言
    F#试用感受
    基于.net的数学编程语言
  • 原文地址:https://www.cnblogs.com/vivian2016/p/5800058.html
Copyright © 2011-2022 走看看