fragment.appendChild()的移动性问题

fragment.appendChild()的移动性

在看DMQ/mvvm源码时发现以下语句，经查找分析后了解。

node2fragment(node) {
    let fragment = document.createDocumentFragment();//创建一个文档碎片

    let firstChild;
    while (firstChild = node.firstChild) {
        fragment.appendChild(firstChild);
    }

    return fragment;
}

while(firstChild = el.firstChild)
这个语句进行了2个操作：

1. 执行赋值操作firstChild = el.firstChild
2. 执行while(firstChild)，while是条件为真的情况下才执行，也就是必须el.firstChild有值的情况下才执行

appendChild 方法具有可移动性

当判定while(firstChild)为真的情况执行fragment.appendChild(firstChild);

把el.firstChild即el.children[0]抽出插入到fragment。注意这个操作是move dom， el.children[0]被抽出，在下次while循环执行firstChild = el.firstChild时读取的是相对本次循环的el.children[1] 以此达到循环转移dom的目的。

fragment.appendChild()具有移动性
相当于把el中节点移动过去
可使用console.log(el.firstChild)测试。

fragment.appendChild()的移动性问题

原文：https://www.cnblogs.com/qiaoyurensheng/p/12863184.html