一段关于DocumentFragment的疑惑的代码

<!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">
            <input type="text" id='a'>
            <span id="b">222</span>
    </div>
    <div id="ap">

    </div>
<script>
    function nodetofragment(node){
        let n = 0
        var flag = document.createDocumentFragment();
        var child;
        while(child = node.firstChild){
            flag.appendChild(child)
            console.log(n++)
        }
        return flag;
    }
    var dom = nodetofragment(document.getElementById('app'))
    console.log(dom);
</script>
</body>
</html>

这段代码的while循环了四次不明白为什么,还有就是while的循环条件也不是太明白
这段代码执行完成后,页面中的input和span消失了,疑惑
执行结果:

clipboard.png

万望解惑啊

回答:

首先第一点,你应该明白appendChild方法的影响:appendChild方法实际上会把节点添加到目标Node的子节点里面(在这里是DocumentFragment),如果你的节点在HTML页面已经渲染了其实它会移除并添加到目标Node,因此你这里才可以得以循环……
那么为什么循环了5次呢,很简单因为HTML的Node节点类型分为:

NodeType

是的,你的HTML里面存在空格分开,因此存在TEXT_NODE类型的文本节点

回答:

明白了 appendchild方法会移动dom节点

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注