DocumentFragment 節点 (DOM)

状態

[20]

ホスト

文脈

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

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

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

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

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

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

内容

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

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

適合性

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

演算

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

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

メモ

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

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

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

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

Element (要素節) [DOM1]
ProcessingInstruction (処理指令節) [DOM1]
Comment (注釈節) [DOM1]
Text (文節) [DOM1]
CDATASection (文字データ節) [DOM1]
EntityReference (実体参照節) [DOM1]

[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] 仕様書: