DOMのサブツリーをDocumentFragmentに変換するにはどうすればよいですか？

Question

私は、DOMのサブツリーを後で使用し、いくつかのユーザーアクション（私が最初に作成し、DocumentFragmentを使用して操作した後にDOMに追加したサブツリー）に基づいて再適用するために維持しようとしていますが、 DOMのどこかに追加して非表示にしたいと思うのです。それは、私の場合は重い操作が遅くなり、レイアウトのリフローやパフォーマンスの低下を招きます。

いくつかのDOMサブツリーをDocumentFragmentに変換するためのクロスブラウザ（IE11 +が気にするもの）がありますか？ didnt 'はSOやドキュメントを検索することで何も見つけられません。

はありがとう

Answer 1

私はあなたがアレイ内に興味を持っているノードを維持することをお勧めしたいです。これはDocumentFragmentよりも便利で、NodeListやHTMLCollectionほど厄介ではありません。

"things"をdocumentFragmentsに変換する小さなユーティリティです。

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)); 
} 

「もの」それはあなたが渡され、それとは（平坦化）のDocumentFragmentを構築してきたノードを見つけるために、構造arraylike（非環状）いずれかを横断しているため。 （プリミティブ値はnull、TextNodesに変換され、undefinedは無視されます）

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); 

ここでも注意し、循環参照を扱っていません！

3つの機能について、私は自分のライブラリの1つからこれを抽出しました。おそらくそれをモジュールに入れて、fragmentをエクスポートするか、それをIIFEにラップするだけです。