额，今天看了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. java使用io流实现图片复制

    import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException; public cl ...

  2. 实现迭代器(\_\_next\_\_和\_\_iter\_\_)

    目录 实现迭代器(__next__和__iter__) 一.简单示例 二.StopIteration异常版 三.模拟range 四.斐波那契数列 实现迭代器(__next__和__iter__) 一. ...

  3. Python笔记_第一篇_面向过程_第一部分_5.Python数据类型之列表类型(list)

    Python中序列是最基本的数据结构.序列中的每个元素都分配一个数字(他的位置或者索引),第一个索引是0,第二个索引是1,依次类推.Python的列表数据类型类似于C语言中的数组,但是不同之处在于列表 ...

  4. 安装chrome并设置默认主页

    chrome 版本 https://support.google.com/chrome/a/answer/187948?hl=en&ref_topic=2936229

  5. zeroc ice log4net 多进程log文件问题

    使用zeroc ice 中的icebox 的时候多服务会有多个服务实例,每个实例都要写日志文件,所以要配置多个日志文件区分开来, 类似这样  orderservice_1_20160101.log   ...

  6. 吴裕雄--天生自然 PYTHON3开发学习：函数

    def 函数名(参数列表): 函数体 # 计算面积函数 def area(width, height): return width * height def print_welcome(name): ...

  7. Django框架的前奏（安装及介绍）

    几个重要的概念: web的本质: 浏览器中输入网址敲回车发生了几件事? 1.浏览器向服务端发送请求 2.服务端接收请求 3.服务端返回相应的响应 4.浏览器接收响应  根据特定的规则渲染页面展示给用户 ...

  8. C#的静态方法和实例化方法的区别

    C#的静态方法和实例化方法的区别 在大多数时候,我们写一个方法,会把方法区分为实例化方法和静态方法.而当被问到静态方法和实例化方法的区别的时候,我在写这篇文章的前10分钟,或许我会回答:"静 ...

  9. [LC] 271. Encode and Decode Strings

    Design an algorithm to encode a list of strings to a string. The encoded string is then sent over th ...

  10. ionic3 发布订阅者模式实现

    在ionic3 中实现订阅发布模式,需要用到Events. Events下面有三个方法 events.subscribe()  订阅 events.publish()  发布 events.unsub ...