鍍金池/ 問(wèn)答/HTML/ 一段關(guān)于DocumentFragment的疑惑的代碼

一段關(guān)于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循環(huán)了四次不明白為什么，還有就是while的循環(huán)條件也不是太明白
這段代碼執(zhí)行完成后，頁(yè)面中的input和span消失了，疑惑
執(zhí)行結(jié)果：

clipboard.png

萬(wàn)望解惑啊

回答
編輯回答
萌吟

明白了 appendchild方法會(huì)移動(dòng)dom節(jié)點(diǎn)

2017年11月22日 22:09
編輯回答
命多硬

首先第一點(diǎn)，你應(yīng)該明白appendChild方法的影響：appendChild方法實(shí)際上會(huì)把節(jié)點(diǎn)添加到目標(biāo)Node的子節(jié)點(diǎn)里面（在這里是DocumentFragment）,如果你的節(jié)點(diǎn)在HTML頁(yè)面已經(jīng)渲染了其實(shí)它會(huì)移除并添加到目標(biāo)Node，因此你這里才可以得以循環(huán)……
那么為什么循環(huán)了5次呢，很簡(jiǎn)單因?yàn)?code>HTML的Node節(jié)點(diǎn)類(lèi)型分為：

NodeType

是的，你的HTML里面存在空格分開(kāi)，因此存在TEXT_NODE類(lèi)型的文本節(jié)點(diǎn)

2018年3月28日 00:55