Javascript 如何将DOM的子树转换为DocumentFragment？

我正试图“保留”DOM的子树，以备以后使用，并基于某些用户操作（我最初使用DocumentFragment创建和操作的子树，然后附加到DOM中），但我不想将其附加并隐藏在DOM中的某个位置，因为进一步（在我的例子中，它很重）对它的操作速度较慢，会导致布局回流和进一步的性能影响

是否有一种跨浏览器的方式（我关心的是IE11+）将一些DOM子树转换回DocumentFragment？通过搜索SO或文档，尚未找到任何内容

---

谢谢

我建议将感兴趣的节点保留在一个数组中。它比DocumentFragment更方便，而不像NodeList或HTMLCollection那样令人讨厌

一个将“东西”转换为文档片段的小实用程序

function fragmentFlush(state){
    if(state.text){
        state.fragment.appendChild(document.createTextNode(state.text));
        state.text = "";
    }
    return state.fragment;
}

function fragmentIterate(state, value){
    if( value instanceof Node ){
        fragmentFlush(state).appendChild(value);
    }else if(Array.isArray(value)){
        value.reduce(fragmentIterate, state);
    }else if(value === Object(value)){
        fragmentIterate(state, Array.from(value));
    }else if(value != null){
        state.text += value;
    }
    return state;
}

function fragment(value){
    return fragmentFlush(fragmentIterate({
        text: "",
        fragment: document.createDocumentFragment()
    }, value));
}

“things”，因为它遍历任何（非循环的）arraylike结构来查找您传递的节点，并从中构建（展平的）documentFragment。 （原语值转换为文本节点，

null

和

未定义的
被忽略）

再次注意，不要处理循环引用

关于这三个函数，我刚刚从我的一个lib中提取了这个函数。你可能想把它放到一个模块中，只导出
片段
或将其包装到一个生命中。
我不知道这是否对你有帮助：@j.kherfan谢谢，但我看不到他们将任何东西转换回DocumentFragment
var setA = [/*...*/];

var frag = fragment([
    "setA: ", setA,
    condition? "some more text": null,  //null values are ignred
    "setB: ", someNode.children,
    //that's why I made this traverse recursively
    //so that I can "concat" lists like the following line
    //without having to actually concat them
    "setC: ", [setA, anotherSet, /* moreNodes */, andAnotherSet]
]);

node.appendChild(frag);