额，今天看了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. SpringMVC在使用JSON时报错信息为：Content type 'application/json;charset=UTF-8' not supported

    直接原因是:我的(maven)项目parent父工程pom.xml缺少必要的三个jar包依赖坐标. 解决方法是:在web子模块的pom.xml里面添加springMVC使用JSON实现AJAX请求. ...

  2. c#学习笔记01——引用&类

    数据类型 值类型 bool 布尔值 True 或 False False byte 8 位无符号整数 0 到 255 0 char 16 位 Unicode 字符 U +0000 到 U +ffff ...

  3. 面向对象 part6 继承

    继承 js实现的是实现继承/也就是继承实际的方法 //主要依赖:原型链 //基本思路: 就是一个引用类型继承另一个引用类型的属性和方法 详细:构造函数,实例,原型之间的关系.每个构造函数都有一个原型对 ...

  4. vim编辑模式下黑色背景，下来过程中出现白条的问题

    问题描述,原本是黑色背景,但是下拉过程中没有文字的地方会变成白色,非常影响美观,搞了好久现在中与改好了.问题如图: 打开-/.vimrc 文件,在如图所示位置加上62-64行代码即可.root用户的添 ...

  5. 了解SSL证书从HTTPS开始 开发者绕不开的“劫”

    微信小程序上线已经有很长一段时间了,而开发者在接入小程序的过程中,会遇到一些问题,例如小程序要求必须通过HTTPS完成服务端通信,开发者需搭建HTTPS服务,进行 SSL 证书申请.部署,完成HTTP ...

  6. 一篇文章带你了解axios网络交互-Vue

    来源:滁州SEO 1 **什么是axios呢?**了解,并去使用它,对于axios发送请求的两种方式有何了解,以及涉及axios跨域问题如何解决. 对于axios网络交互,去使用axios的同时,首先 ...

  7. 爬虫基本库request使用—爬取猫眼电影信息

    使用request库和正则表达式爬取猫眼电影信息. 1.爬取目标 猫眼电影TOP100的电影名称,时间,评分,等信息,将结果以文件存储. 2.准备工作 安装request库. 3.代码实现 impor ...

  8. Opencv笔记（十一）——图像模糊（平滑）

    学习目标: 使用自定义的滤波器对图像进行卷积(2D 卷积) 学习使用不同的低通滤波器对图像进行模糊 一.2D卷积 卷积不是很了解的可以看我上一篇博客,与语音信号一样,我们也可以对 2D 图像实施低通滤 ...

  9. 分享几个4412开发板新录制的视频，不是VIP也能看

    如果能点个赞就更好啦 iTOP4412开发板介绍https://www.bilibili.com/video/av74453392 iTOP4412开发板系统编程前言https://www.bilib ...

  10. 网站爬取-案例三：今日头条抓取(ajax抓取JS数据)

    今日头条这类的网站制作,从数据形式,CSS样式都是通过数据接口的样式来决定的,所以它的抓取方法和其他网页的抓取方法不太一样,对它的抓取需要抓取后台传来的JSON数据,先来看一下今日头条的源码结构:我们 ...