JavaScript について document.createDocumentFragment()_javascript のヒント

次の DOM2 メソッドをサポートします:
appendChild、cloneNode、hasAttributes、hasChildNodes、insertBefore、normalize、removeChild、replaceChild。
は次の DOM2 属性もサポートします:
attributes、childNodes、firstChild、lastChild、localName、namespaceURI 、nextSibling 、nodeName、nodeType、nodeValue、ownerDocument、parentNode、prefix、prefix、previousSibling、textContent。
他のメソッドは documentFragment をパラメータとして使用できるため (Node の appendChild メソッドや insertBefore メソッドなど)、フラグメントを親に追加できます。物体 。
例:

コードをコピーします コードは次のとおりです:

var frag = document .createDocumentFragment( );
frag.appendChild(document.createTextNode('Ipsum Lorem'));

document.createDocumentFragment()率直に言って、DOM は控えめに使用してください。 DOM 上で JavaScript 操作を行うたびに、ページのレンダリングが変更され、ページ全体が再更新されるため、多くの時間がかかります。この問題を解決するには、ドキュメント フラグメントを作成し、それにすべての新しいノードをアタッチしてから、ドキュメント フラグメントのコンテンツをドキュメントに一度に追加します。

コードをコピー コードは次のとおりです。

var oui=document.getElementById("oItem ");
for(var i=0;i{
var oli=document.createElement("li");
oui.appendChild(oli);
oli.appendChild(document.createTextNode("Item" i));
}

上記のコードは、このステートメントを実行するたびに oui.appendChild(oli) を呼び出します。参照 サーバーがページを更新します。次に、以下の oui.appendChild() はテキスト ノードを追加し、ページを更新します。したがって、ページは合計 20 回更新する必要があります。
ページを最適化するには、DOM 操作を最小限に抑え、テキスト ノードを追加した後にリスト項目を追加し、creatDocumentFragment() を適切に使用する必要があります。コードは次のとおりです。

コードをコピーします コードは次のとおりです。

var oui=document.getElementById("oItem"); var oFragment=document.createDocumentFragment ();
for(var i=0;ivar oli=document.createElement("li");
oli.appendChild(document.createTextNode("Item" i) ));
oFragment.appendChild(oli);
oui.appendChild(oFragment);


W3C リファレンス: http://www.w3.org/TR /DOM-レベル 2-コア/core.html#ID-B63ED1A3
----------------------------- --- ---------

DocumentFragment は「軽量」または「最小限の」Document オブジェクトです。ドキュメントのツリーの一部を抽出したり、新しいドキュメントを作成したりすることがよくあります。ドキュメントのフラグメント。フラグメントを移動してドキュメントを切り取ったり再配置したりするようなユーザー コマンドを実装することを想像してください。そのようなフラグメントを保持できるオブジェクトが必要であり、この目的にノードを使用するのは当然のことです。 Document オブジェクトがこの役割を果たすことができるということですが、実際に必要なのは DocumentFragment であり、そのようなオブジェクトは基盤となる実装によって異なります。別のノードの子としてノードを挿入するなどのさまざまな操作では、DocumentFragment オブジェクトを引数として受け取ることができます。これにより、DocumentFragment のすべての子ノードがこのノードの子リストに移動されます。 DocumentFragment ノードの子は、ドキュメントの構造を定義するサブツリーの最上位を表す 0 個以上のノードです。DocumentFragment ノードは、整形式の XML ドキュメントである必要はありません (ただし、整形式の XML ドキュメントである必要があります)。たとえば、DocumentFragment には 1 つの子ノードしかなく、その子ノードは HTML ドキュメントでも整形式の XML ドキュメントでもありません。

DocumentFragment が Document (または実際には子を受け取る他のノード) に挿入されると、DocumentFragment 自体ではなく DocumentFragment の子がノードに挿入されます。これにより、DocumentFragment はユーザーが非常に便利になります。兄弟であるノードを作成したい場合、DocumentFragment はこれらのノードの親として機能するため、ユーザーは insertBefore や appendChild などの Node インターフェイスからの標準メソッドを使用できます。