额，今天看了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. PAT Basic 1013 数素数 (20) [数学问题-素数]

    题目 令Pi表示第i个素数.现任给两个正整数M <= N <= 10^4,请输出PM到PN的所有素数. 输⼊格式: 输⼊在⼀⾏中给出M和N,其间以空格分隔. 输出格式: 输出从PM到PN的 ...

  2. 用c语言实现的几个小项目

    1.参考:Linux系统编程 2.参考:制作简单计算器 3.参考:制作2048小游戏 4.参考:五子棋实现

  3. （最全最灵活地）利用Jxl工具包实现Excel表的内容读取 、写入（可向已有表中追加数据）

    1.引子 (1)读取 Jxl工具比较强大,可以方便地实现Excel表的读取和写入.另一款工具Poi也具有相似的功能,并且功能更多,运用也相对复杂.Poi读取Excel表内容时,需要先判断其内容格式,如 ...

  4. Codeforces Round #624 (Div. 3)(题解)

    A. Add Odd or Subtract Even 思路: 相同直接为0,如果两数相差为偶数就为2,奇数就为1 #include<iostream> #include<algor ...

  5. Canvas 橡皮擦效果

    引子 解决了第一个问题图像灰度处理之后,接着就是做擦除的效果. Origin My GitHub 思路 一开始想到 Canvas 的画布可以相互覆盖的特性,彩色原图作为背景,灰度图渲染到 Canvas ...

  6. mysql批量删除报1064原因

    DELETE FROM table_name  t where t......; 报1064 错误,原因MySQL 中delete 语句不能给表名起别名. 另外.如果记录不存在,delete from ...

  7. python之web自动化测试框架

    梳理下搭建web自动化框架的流程: 创建目录: cases:存放测试用例,unittest框架要求用例名必须以test开头,所以命名test_case.py test_case.py代码如下:继承un ...

  8. 场景实践篇一：Nginx负载均衡配置

    code1   code2    code3  三个文件夹, 每个文件夹下面一个 index.html 的文件夹 cd /etc/nginx/conf.d/  下面新建   server1.conf  ...

  9. spring自定义controller全局异常拦截

    --异常类可以按需要自定义package com.dhht.wechat.exception; import com.alibaba.fastjson.JSONObject;import org.sp ...

  10. Docker系列五: docker-compose部署Docker容器

    Docker使用Dockerfile来实现对现有镜像的修改来创建新的镜像, 那docker-compose则完成镜像的自动部署, 可以实现多个容器同时部署 Dockerfile可以让用户管理一个单独的 ...