Edit

Page

Page title:

Page body:

* 状態

[20] 
[FIG(list members)[
: [F[ホスト][ホスト (DOM)]] :
]FIG]

* 文脈

[11] [CODE(DOMi)@en[[[DocumentFragment]]]] [[節点]]は [CODE(DOMm)@en[[[createDocumentFragment]]]]
[[メソッド]]により自由に作ることができます。

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

[13] [CODE(DOMi)@en[[[ShadowRoot]]]] [[インターフェイス]]は [CODE(DOMi)@en[[[DocumentFragment]]]]
[[インターフェイス]]を継承しています。

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

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

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

* 内容

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

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

** 適合性

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

* 演算

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

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

* メモ

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

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

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

[1] [RUBYB[文書断片節] [[CODE(DOM)[DocumentFragment]] node]]は、
次の種類の[[節]]を子供に持てます:
- [CODE(DOM)[[[Element]]]] (要素節) [DOM1]
- [CODE(DOM)[[[ProcessingInstruction]]]] (処理指令節) [DOM1]
- [CODE(DOM)[[[Comment]]]] (注釈節) [DOM1]
- [CODE(DOM)[[[Text]]]] (文節) [DOM1]
- [CODE(DOM)[[[CDATASection]]]] (文字データ節) [DOM1]
- [CODE(DOM)[[[EntityReference]]]] (実体参照節) [DOM1]

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

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

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

[PRE[
 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"
 ;; {断片} の節そのものは消滅したことに注意。
]PRE]

[7] 仕様書:
- [DOM1] ''Document Object Model (Core) Level 1'' <http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3>
- [DOM2] ''Document Object Model Core'' <http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-B63ED1A3>

[8]
[CITE[文書ツリーを多数回変更するときはDocument Fragmentを経由する (agenda)]] ([TIME[2008-02-20 02:55:06 +09:00]] 版) <http://jintrick.net/agenda/2008/02/document-fragment.html>

[9] [CITE[Opera9.5+ DocumentFragment 経由でノードを追加すると再描画しない - uupaaの開発日記]] ([TIME[2008-12-27 15:05:25 +09:00]] 版) <http://d.hatena.ne.jp/uupaa/20081022/1224674908>

[10] [CITE[Add constructors for DocumentFragment, Text, and Comment. (DocumentType ... · a2f1e18 · whatwg/dom]]
( ([TIME[2013-02-16 12:38:10 +09:00]] 版))
<https://github.com/whatwg/dom/commit/a2f1e18ff56ecc12643dc54fcf50f0c335beec71>

[15] [CITE@en[XQuery and XPath Data Model 3.0]]
( ([TIME[2014-04-08 07:00:06 +09:00]] 版))
<http://www.w3.org/TR/xpath-datamodel-3/#dt-fragment>

[17] [CITE@en[Shadow: add shadow root · whatwg/dom@b2ee400]]
([TIME[2016-03-16 14:23:18 +09:00]] 版)
<https://github.com/whatwg/dom/commit/b2ee400a6542dc76d41bed5d2edb8c85ba241bfc>

[18] [CITE@en[Editorial: be clearer on host, define light tree · whatwg/dom@ce7df0b]]
([TIME[2016-03-20 18:55:17 +09:00]] 版)
<https://github.com/whatwg/dom/commit/ce7df0bfe425b4502bb40e66806dd76f14fcf68b>

[19] [CITE@en[Set <template>'s DocumentFragment's host · whatwg/html@baa8e34]]
([TIME[2016-03-20 18:57:17 +09:00]] 版)
<https://github.com/whatwg/html/commit/baa8e346d737c115d4a676caa4a172983b87255e>

[23] [CITE@en[Specify global object references in more detail]]
([[annevk]]著, [TIME[2016-08-17 19:43:59 +09:00]])
<https://github.com/whatwg/dom/commit/fa8adb6cd107cd845feaeb71c9da208971b670ca>

[26] [CITE@en[Align with IDL constructor changes]]
([[autokagami]]著, [TIME[2019-09-24 22:42:56 +09:00]])
<https://github.com/whatwg/dom/commit/57512fac17cf2f1c4c85be4aec178c8086ee5ee4>

[27] [CITE@en[Update to constructor operations · Issue #780 · whatwg/dom]]
([TIME[2020-05-14 14:04:50 +09:00]])
<https://github.com/whatwg/dom/issues/780>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)