(89)Wangdao.com第二十二天_JavaScript DocumentFragment 节点

时间 2019-11-08

标签 wangdao.com wangdao com 第二十二天 2天 javascript documentfragment 节点栏目 JavaScript 繁體版

原文原文链接

DocumentFragment 节点app

表明一个文档的片断，自己就是一个完整的 DOM 树形结构。spa

它没有父节点，.parentNode 返回 nullcode

能够插入任意数量的子节点。blog

不属于当前文档，操做 DocumentFragment 节点，要比直接操做 DOM 树快得多文档

通常用于构建一个 DOM 结构，而后插入当前文档字符串

建立一个空的 DocumentFragment 节点

var docFrag = document.createDocumentFragment();

// 等同于io

- ```
var docFrag = new DocumentFragment();
```

而后再使用其余 DOM 方法，向其添加子节点

var li = document.createElement('li');
li.textContent = 'Hello World';
docFrag.appendChild(li);

最后插入当前文档

document.querySelector('ul').appendChild(docFrag);

- 注意：DocumentFragment 节点自己不能被插入当前文档
  - 当它做为 appendChild()、insertBefore()、replaceChild() 等方法的参数时
    - 是它的全部子节点插入当前文档，而不是它自身
    - 一旦 DocumentFragment 节点被添加进当前文档，它自身就变成了空节点（textContent属性为空字符串），能够被再次使用。

- 若是想要保存 DocumentFragment 节点的内容，能够使用 cloneNode 方法
  - ```
  document.queryselector('ul').appendChild(docFrag.cloneNode(true));
```

实例

// 反转一个指定节点的全部子节点的顺序
function reverse(ele) {
    var docFrag = document.createDocumentFragment();
    
    while(ele.lastChild){
        docFrag.appendChild(ele.lastChild);
    }
    ele.appendChild(docFrag);
}