DocumentFragment的相关用法

时间 2019-11-11

标签 documentfragment 相关用法繁體版

原文原文链接

额，今天看了vue1.0关于模板渲染的知识，认识了DocumentFragment这个东西，它至关于一个节点容器，咱们对他使用appendChild时，只有它的子节点会被插入进去，它自己不会插入进去，而且使用 DocumentFragment 处理节点，速度和性能远远优于直接操做 DOM。javascript

好吧，在别人的文章中看到了一段用法html

<!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节点从父节点中移除，这个挺神奇的啊。vue

不过这个append方法通过查询是实验中的方法，MDN说的，以前见到过jquery的这个方法。java

1. DocumentFragment
2. JavaScript DOM 7 - DocumentFragment
3. jQuery之documentFragment
4. DocumentFragment节点
5. DocumentFragment对象
6. BeautifulSoup相关的用法
7. SQL OR的相关用法
8. Keystore的相关用法
9. maven相关用法
10. lsof相关用法
更多相关文章...
• XML 相关技术 - XML 教程
• Redis哨兵（Sentinel）模式的配置方法及其在Java中的用法 - Redis教程
• NewSQL-TiDB相关
• C# 中 foreach 遍历的用法