额，今天看了vue1.0关于模板渲染的知识，认识了DocumentFragment这个东西，它相当于一个节点容器，我们对他使用appendChild时，只有它的子节点会被插入进去，它本身不会插入进去，并且使用 DocumentFragment 处理节点，速度和性能远远优于直接操作 DOM。

好吧，在别人的文章中看到了一段用法

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div id="app">

    <span id="b"></span>

    <input type="text" id="a">

  </div>

  <script>

    function nodeToFragment(node){

      var flag=document.createDocumentFragment();

      var child;

      while(child=node.firstChild){

        flag.append(child);

      }

      return flag;

    }

    var dom=nodeToFragment(document.getElementById('app'));

    console.log(dom);

  </script>

</body>

</html>

　　1.这里面开始不懂的是while循环里面每次一直把firstChild赋值给child，按照我的理解不是每次都是一样的么，又没有对node删除节点，经过自己实践，发现，flag.append这个方法会让被插入的child节点从父节点中移除，这个挺神奇的啊。

不过这个append方法经过查询是实验中的方法，MDN说的，之前见到过jquery的这个方法。

DocumentFragment的相关用法的更多相关文章

  1. slf4j log4j logback关系详解和相关用法

    slf4j log4j logback关系详解和相关用法 写java也有一段时间了,一直都有用slf4j log4j输出日志的习惯.但是始终都是抱着"拿来主义"的态度,复制粘贴下配 ...

  2. $.ajax等相关用法

    下面是jquery一些方法的相关用法: $.ajax: $.ajax({ type: "GET", url: "url", data: {username:$( ...

  3. oradmin相关用法

    [转]oradmin相关用法 创建例程: -NEW -SID sid | -SRVC 服务 [-INTPWD 口令] [-MAXUSERS 数量] [-STARTMODE a|m] [-PFILE 文 ...

  4. #ifdef预编译相关用法

    #ifdef预编译相关用法主要有:(1)#ifdef XXX executing the corresponding xxx code #endif(2)#ifdef XXX executing th ...

  5. Java中Date各种相关用法

    Java中Date各种相关用法(一) 1.计算某一月份的最大天数 Java代码 Calendar time=Calendar.getInstance(); time.clear(); time.set ...

  6. Js相关用法个人总结

    Js相关用法个人总结  js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...

  7. Css相关用法个人总结

    Css相关用法个人总结

  8. 关于Unity中的刚体和碰撞器的相关用法(二)

    在关于Unity中的刚体和碰撞器的相关用法(一)的基础上 有一个plane平面,一个ball球体,都挂了碰撞器,ball挂了刚体Rigidbody,写了一个脚本ball挂载在球体上,球体从空中落下装机 ...

  9. STL中的Vector相关用法

    STL中的Vector相关用法 标准库vector类型使用需要的头文件:#include <vector>. vector 是一个类模板,不是一种数据类型,vector<int> ...

随机推荐

  1. Android Studio 停靠模式(Docked Mode)

    如果之前选了任务一种模式,先全都取消了 然后点击Window -->Active Tool Window-->这个时候就可以选择Docked Mode了

  2. Python笔记_第三篇_面向对象_1.面向对象的基本概念和作用域

    1. 软件编程的实质: 软件编程就是将我们的思维转变成计算机能够识别语言的一个过程.重要的是思想,代码技术反而次要.因此思想也是最难的,突破固定的思想是关键 2. 什么是面向过程: * 自上而下顺序执 ...

  3. python 3.6

    安装了最新版anaconda3-4.3 发现jupyter-notebook 少了一些东西.需要手工安装 https://github.com/Anaconda-Platform/nbpresent

  4. 14 微服务电商【黑马乐优商城】：day02-springcloud(理论篇四：配置Robbin负载均衡)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  5. 爬虫—文件存储—CSV存储

    一,简介 CSV,全称Comma—Separated Values,可以称为逗号分隔或者字符分隔值,其文件以纯文本形式存储表格数据.该文件是一个字符序列,可以有任意的数目记录组成,记录间已某种换行符分 ...

  6. Canal —— 基本概念及使用

    参考文档 开源数据同步神器--canal [若泽大数据]大数据之实时数据源同步中间件--生产上Canal与Maxwell颠峰对决

  7. Java操作redis客户端Jedis连接集群(Cluster)

    创建JedisCluster类连接redis集群. @Test public void testJedisCluster() throws Exception { //创建一连接,JedisClust ...

  8. 量化投资_TB交易开拓者A函数和Q函数常见组合应用

    1 在交易开拓者当中,关于交易的做单方式一般分为:图表函数和A函数两类. 两类的主要区别为:如果采用图表函数的话,所有的交易内容都是以图表上面的信号为准,当前仓位运行的实际状态是没有的,但是可以显示交 ...

  9. Python_运维中常用的20个库和模块

    1.psutil是一个跨平台库(https://github.com/giampaolo/psutil)能够实现获取系统运行的进程和系统利用率(内存,CPU,磁盘,网络等),主要用于系统监控,分析和系 ...

  10. MRP运算报错-清除预留

    MRP运算报错-清除预留