DocumentFragmentの考察

DOMのDocumentFragmentですが、今まで使おうと思ったことがありませんでした。使わなくても特に不自由しなかったからです。しかし、これを使わないと洒落にならない事例に出くわしました。

ケース：複数のノードの複製を繰り返しappendChildする

なんだか長くなったので別の文書にしました。

• DocumentFragmentの利用例

JavaScript有効かつDOM1 HTML対応なブラウザなら処理速度を体験できるようになっています。次の実装チェックボタンを押しても何も起らなかったり、falseとアラートされた場合、体験できません。実装チェック

innerHTMLを利用した場合と比較していますが、innerHTMLはMSの独自拡張です。対応していない場合はエラーになります。ご了承ください。

DocumentFragmentの主な特徴

私が認識しているDocumentFragmentの主な特徴は、以下の通りです。

1. 「軽量のDocumentオブジェクトである」とか言われていますが、私は嘘だと思います。継承しているのはNodeインターフェイスであり、createElementメソッド等は使えません。また、documentElement（ルート要素）に当たるものもありません。良く分からないと言われている原因は、この説明だと思います。
2. appendChildやinsertBeforeのパラメータになった場合、その子ノードだけが追加されます。
3. 複数の子ノードを持つことが出来ます。
4. 以上より、たった一度のappendChild等で複数のノード（兄弟関係にあるものさえ）をごっそりと追加できることになります。
5. 一度appendChild等のパラメータとして渡されると、そのDocumentFragmentのchildNodesは空っぽになります。何度も使いたい場合は、cloneNodeメソッドで複製してからということになります。
6. 兄弟関係にあるような複数のノードを、繰り返しDOMツリーに追加するような場合に威力を発揮します。

DOM1 日本語訳に関する覚え書き

たとえば，DocumentFragment がもってよい子は１つだけであり，その子ノードは Text ノードであってもよい。

ＤＯＭ１（コア） より

これは誤読される可能性が高いのではないでしょうか。DocumentFragmentは幾つでも子を持てます。そしてそれが重要な特徴です。原文はこちら：

For example, a DocumentFragment might have only one child and that child node could be a Text node.

Document Object Model (Core) Level 1 より

これは、DocumentFragmentの子が整形式のXMLでなくても良いという文脈で語られています。その例というわけです。私なら次のように訳します。

• 例えば、DocumentFragmentの子は一つだけでも良く、それがTextノードであっても良い。

that child nodeを「それ」と訳しましたが、「その子ノード」と直訳すると、「その」が何なのか不明瞭になります。