额，今天看了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. 17.3.12---urlparse模块的URL下载

    1---urlparse模块是一个解析与泛解析Web网址URL字符串的一个工具 urlparse模块会将一个普通的url解析为6个部分,返回的数据类型都是元祖,同时,他还可以将已经分解后的url在组合 ...

  2. Xpath编码问题解决

    使用Xpath获取属性时,出现乱码问题,解决办法找了好多,终于解决,特将办法贴在这,供大家尝试 不要直接简单的将爬取的网页设置为utf-8, 先通过print(r.encoding)输出看看爬取的是什 ...

  3. node 第三方库总结

    app.post("/todo/add", (request, response) => { request.body //如何拿到前端ajax传来的JSON数据 }) 需要 ...

  4. MySQL--MySQL分区

    参考:http://bbs.51cto.com/thread-1080714-1.html MySQL 从5.1 版本开始支持分区的功能.分区是指根据一定的规则,数据库把一个表分解成多个更小的.更容易 ...

  5. Maven依赖三板大斧

    一:问题出现场景 记得有一次,面试时候面试官问了个问题,来哥们,“你们项目是maven搭建哈,你的项目里如果出现架包冲突了,你们怎么解决的?”. 我:......,装作很淡定,我们是通过报错,定位哪个 ...

  6. Anaconda环境安装

    Anaconda环境安装 一.Anaconda Anaconda是Python的一个开源的发行版本,里面包含了很多科学计算相关的包,它和Python的关系就像linux系统中centos和Ubuntu ...

  7. Mybatis入门——基础方式的增删该查、mapper动态代理方式的CRUD、类型转换器

    一.基础方式的增删该查: 1.mybatis约定:输入参数parameterType和输出参数resulrType在形式上只能有一个. 2.如果输入/输出参数:是简单类型(8个基本类型加String) ...

  8. docker安装（centos-7）

    centos7安装docker:Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker .通过 uname -r 命令 ...

  9. 静态、动态cell区别

    静态cell:cell数目固定不变,图片/文字固定不变(如qq设置列表可使用静态cell加载) 动态cell:cell数目较多,且图片/文字可能会发生变化(如应网络请求,淘宝列表中某个物品名称或者图片 ...

  10. 脚手架搭建vue项目

    1.安装安装node.js: 2.cnpm install vue-cli -g (全局安装,需要注意的是我这里是用淘宝镜像安装的,没有安装cnpm的需要先去安装一下) 3.vue --version ...