素片

DocumentFragment 節点 (DOM)

状態

[20]

ホスト

文脈

[11] DocumentFragment 節点createDocumentFragment メソッドにより自由に作ることができます。

[12] template 要素を作ると、雛形内容として自動的に関連付けられた DocumentFragment オブジェクトが作られます。

[13] ShadowRoot インターフェイスDocumentFragment インターフェイスを継承しています。

[14] 仕様書上の技法として、複数の節点を挿入する操作を記述するために (架空の) DocumentFragment 節点を使うことがあり、 DOM StandardHTML Standard で使われています。

[21] 他の節点ソースコード上の何らかの構造と対応関係を持ちますが、 唯一 DocumentFragmentスクリプトの便宜のため導入されたもので、 HTML構文XML構文で表すことができません。

[16] RDFデータ型rdf:HTMLrdf:XMLLiteral は、値空間DocumentFragment を使っています。

内容

[24] 任意の要素テキストコメント処理指令子供にできます。

[25] 子供とできる節点のうち、文書型は認められていません。

適合性

[22] 要素の内容を参照。

演算

[28] 養子化では特殊な挙動になります。 養子化

[29] 挿入では DocumentFragment そのものが挿入されるのでなく、 子供がかわりに挿入されます。 節点の挿入

メモ

[3] 文書素片 (Document fragment) は、 その名の通り文書素片です。

XML の (内容から参照されている) 整形式外部解析対象実体に丁度相当します。

[6] 文書 (Document) (ノード) は、 要素節を1つしか持てません。 それに対して、文書断片節は複数の要素節を持てますし、 その節の外側に文節などを自由に配置できます。

[1] 文書断片節 (DocumentFragment node) は、 次の種類のを子供に持てます:

[2] DocumentFragment 界面 (Interface) は、 Node 界面を継承します。 (DOM 1 では追加の構成員 (メンバー) の定義はありません。)

[4] 文書素片物体 (オブジェクト) (appendChild などにより) 他の節のどこかに挿入すると、 (他の節物体ならその節がそのままその位置に挿入されるのに対し、) 当該文書断片の子節がその位置に挿入されます。 その文書断片は空 (子節なし) になります。

[5] 文書の一部を用意しておいて、それを組立てるのに便利です。 例えば、次の架空の言語の DOM 束縛を使って書いた code は、見出し要素節と段落群(文書断片)節から章要素節を作ります。

 my $heading := $document.createElement ('h');
 $heading.appendChild ($document.createTextNode ('Heading'));
 my $paragraphs := $document.createDocumentFragment ();
 for my $i (1..10) {
   my $paragraph := $document.createElement ('p');
   $paragraph.appendChild ($document.createTextNode ("Paragraph $i");
   $paragraphs.appendChild ($paragraph);
 }
 ;; ここで、 $heading 節は
 ;;   <h>:$heading
 ;;    +-- "Heading"
 ;;  $paragraphs 節は
 ;;   {断片}:$paragraphs
 ;;    +-- <p>
 ;;    |    +-- "Paragraph 1"
 ;;    +-- <p>
 ;;    |    +-- "Paragraph 2"
 ;;    :
 ;;    +-- <p>
 ;;         +-- "Paragraph 10"
 ;; という構造になっている。
 
 my $section = makeSection ($heading, $paragraphs);
 
 function makeSection ($heading, $paragraphs) {
   my $section = $document.createElement ('section');
   $section.appendChild ($heading);
   $section.appendChild ($paragraph);
   return $section;
 }
 
 ;; 最終的に、 $section 節は次のような構造となる。
 ;;   <section>
 ;;     +-- <h>:$heading
 ;;     |    +-- "Heading"
 ;;     +-- <p>
 ;;     |    +-- "Paragraph 1"
 ;;     +-- <p>
 ;;     |    +-- "Paragraph 2"
 ;;     :
 ;;     +-- <p>
 ;;          +-- "Paragraph 10"
 ;; {断片} の節そのものは消滅したことに注意。

[7] 仕様書:

[8] 文書ツリーを多数回変更するときはDocument Fragmentを経由する (agenda) ( 版) http://jintrick.net/agenda/2008/02/document-fragment.html

[9] Opera9.5+ DocumentFragment 経由でノードを追加すると再描画しない - uupaaの開発日記 ( 版) http://d.hatena.ne.jp/uupaa/20081022/1224674908

[10] Add constructors for DocumentFragment, Text, and Comment. (DocumentType ... · a2f1e18 · whatwg/dom ( ( 版)) https://github.com/whatwg/dom/commit/a2f1e18ff56ecc12643dc54fcf50f0c335beec71

[15] XQuery and XPath Data Model 3.0 ( ( 版)) http://www.w3.org/TR/xpath-datamodel-3/#dt-fragment

[17] Shadow: add shadow root · whatwg/dom@b2ee400 ( 版) https://github.com/whatwg/dom/commit/b2ee400a6542dc76d41bed5d2edb8c85ba241bfc

[18] Editorial: be clearer on host, define light tree · whatwg/dom@ce7df0b ( 版) https://github.com/whatwg/dom/commit/ce7df0bfe425b4502bb40e66806dd76f14fcf68b

[19] Set <template>'s DocumentFragment's host · whatwg/html@baa8e34 ( 版) https://github.com/whatwg/html/commit/baa8e346d737c115d4a676caa4a172983b87255e

[23] Specify global object references in more detail (annevk著, ) https://github.com/whatwg/dom/commit/fa8adb6cd107cd845feaeb71c9da208971b670ca

[26] Align with IDL constructor changes (autokagami著, ) https://github.com/whatwg/dom/commit/57512fac17cf2f1c4c85be4aec178c8086ee5ee4

[27] Update to constructor operations · Issue #780 · whatwg/dom () https://github.com/whatwg/dom/issues/780