DocumentFragment的相关用法
额，今天看了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的相关用法的更多相关文章
- slf4j log4j logback关系详解和相关用法
slf4j log4j logback关系详解和相关用法 写java也有一段时间了,一直都有用slf4j log4j输出日志的习惯.但是始终都是抱着"拿来主义"的态度,复制粘贴下配 ...
- $.ajax等相关用法
下面是jquery一些方法的相关用法: $.ajax: $.ajax({ type: "GET", url: "url", data: {username:$( ...
- oradmin相关用法
[转]oradmin相关用法 创建例程: -NEW -SID sid | -SRVC 服务 [-INTPWD 口令] [-MAXUSERS 数量] [-STARTMODE a|m] [-PFILE 文 ...
- #ifdef预编译相关用法
#ifdef预编译相关用法主要有:(1)#ifdef XXX executing the corresponding xxx code #endif(2)#ifdef XXX executing th ...
- Java中Date各种相关用法
Java中Date各种相关用法(一) 1.计算某一月份的最大天数 Java代码 Calendar time=Calendar.getInstance(); time.clear(); time.set ...
- Js相关用法个人总结
Js相关用法个人总结 js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...
- Css相关用法个人总结
Css相关用法个人总结
- 关于Unity中的刚体和碰撞器的相关用法(二)
在关于Unity中的刚体和碰撞器的相关用法(一)的基础上 有一个plane平面,一个ball球体,都挂了碰撞器,ball挂了刚体Rigidbody,写了一个脚本ball挂载在球体上,球体从空中落下装机 ...
- STL中的Vector相关用法
STL中的Vector相关用法 标准库vector类型使用需要的头文件:#include <vector>. vector 是一个类模板,不是一种数据类型,vector<int> ...
随机推荐
- 吴裕雄--天生自然 PHP开发学习：MySQL 插入多条数据
<?php $servername = "localhost"; $username = "root"; $password = "admin& ...
- 学会用Python操作Mongodb
在linux下,用pip导包. pip install pymongo python操作基本步骤: 导包 建立连接,建立客户端. 获取数据库 获取集合 对数据操作 import pymongo #建立 ...
- 4）PHP命名规则，传值方式
(1)命名规则: 包括变量名,类名,接口名函数名等等 ①基本规则: 只能使用小写字母,下划线或者数字 数字不能开头 不能跟环境和系统关键字重复(比如,if,else,function) ② 驼峰式 ...
- 14 微服务电商【黑马乐优商城】：day03-springcloud(Zuul网关)
本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...
- layer日期控件，开始时间不能大于结束时间
var start=laydate.render({ elem: '#beginTime', //指定元素 type: 'month', format:'yyyy-MM', done:function ...
- 前端框架Bootstrap（10.7国庆补写）
框架的官网地址:https://v3.bootcss.com/ 主要学习Bootstrap框架提供的样式.组件.插件的使用. 首先下载到本地,在项目中导入使用: 下载的文件中包含:min.css的是压 ...
- Codeforces 1292B/1293D - Aroma's Search
题目大意: Aroma想要找数据第0个数据再x0,y0这个点其后所有数据所在的坐标点满足x[i]=x[i-1]*ax+bxy[i]=y[i-1]*ay+byAroma一开始在点(xs,ys),她最多只 ...
- pycharm、Django+node.js、vue搭建web项目
参考文章:https://www.wandouip.com/t5i35466/ 在此感谢 本篇接着上一篇:windows10使用npm安装vue.vue-cli 首先Django项目是搭建好的,就是 ...
- MySQL数据库中索引的数据结构是什么？（B树和B+树的区别）
B树(又叫平衡多路查找树) 注意B-树就是B树,-只是一个符号. B树的性质(一颗M阶B树的特性如下) 1.定义任意非叶子结点最多只有M个儿子,且M>2: 2.根结点的儿子数为[2, M]: 3 ...
- [LC] 314. Binary Tree Vertical Order Traversal
Given a binary tree, return the vertical order traversal of its nodes' values. (ie, from top to bott ...