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.firstChildel.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()的移动性问题

上一篇:移动APP安全测试


下一篇:[推荐] AndroidDevTools下载