Edit

Page

Page title:

Page body:

[18] [F[根]]が[[文書]]の[[節点木]]を、[DFN[[RUBYB[文書木]@en[document tree]]]]といいます [SRC[>>17]]。

[1] [[CSS]] や[[選択子]]では[[文書]]から構築される[[木構造]]のことを[DFN[[RUBYB[[[文書木]]]@en[document tree]]]]と呼んでいます。
[[CSS]] の[[継承]]や[[選択子]]の[[一致]]などの操作はこの[[文書木]]に対して定義されています。

* 仕様書

[REFS[
- [11] [CITE@en[DOM Standard]] ([TIME[2016-03-18 23:26:01 +09:00]] 版) <https://dom.spec.whatwg.org/#concept-node-tree>
- [17] [CITE@en[DOM Standard]] ([TIME[2016-03-18 23:26:01 +09:00]] 版) <https://dom.spec.whatwg.org/#concept-document-tree>
]REFS]

* 呼称

[2] [[文書木]]のことを [DFN[[[DOM木]]]]、 ([[固有名詞]]ではなく[[一般名詞]]の) [DFN[[[DOM]]]] と呼ぶことがあります。

;; [3] [[CSS]] における木構造は必ずしも [[DOM]] を使って実装する必要はありませんが、
現実に [[Webブラウザー]]に実装される以上 [[DOM]] の[[木]]と [[CSS]] の[[文書木]]は同一ないし非常に近い関係にある構造体として保持する必要があり、
あまり厳密に区別されません。

* 節点木

[12] [[節点]]が[[属する][participate]][[木]]を、
[DFN[[RUBYB[節点木]@en[node tree]]]]といいます [SRC[>>11]]。

[16] 主たる[[木]]である[[光木]]と、付随する[[影木]]などがあります。

[HISTORY[
* XBL 時代の影木

[4] [[XBL]] は[[影木]]を定義しています。

[5] [[選択子]]の[[一致]]や[[継承]]などに関して、 [[XBL1]] 
では[[影木]]は本来の[[文書木]]と透過的に接続されているものとみなされ、 [[XBL2]]
では[[束縛]]ごとに指定できます。[[影木]]にまたがる[[選択子]]の[[一致]]に関しては複雑な規則があります。

[REFS[
- [6] [CITE@en[XBL - XML Binding Language]] ([TIME[2001-02-24 04:57:09 +09:00]] 版) <http://www.w3.org/TR/2001/NOTE-xbl-20010223/#anonymous-css-scopes>
- [7] [CITE@en-US[XBL 2.0]] ([TIME[2010-09-03 10:10:02 +09:00]] 版) <http://dev.w3.org/2006/xbl2/Overview.html#shadow-content-and-css>
]REFS]

;; [8] [[擬似クラス]]や[[擬似要素]]は[[影木]]の影響を受けないことになっていましたが、
[CODE(CSS)@en[[[:target]]]]、[CODE(CSS)@en[[[::selection]]]]、
[CODE(CSS)@en[[[::first-line]]]]、[CODE(CSS)@en[[[::first-letter]]]]、
[CODE(CSS)@en[[[::before]]]]、[CODE(CSS)@en[[[::after]]]]、
[CODE(CSS)@en[[[:lang()]]]]
あたりとの相互作用がどうなるのかは気になるところです。
]HISTORY]

* WebVTT

[REFS[
- [9] [CITE@en-US-x-hixie[WebVTT Standard]] ([TIME[2011-12-06 00:38:23 +09:00]] 版) <http://dev.w3.org/html5/webvtt/#pseudo-cue-selector>
]REFS]

[10] [[WebVTT]] に対して[[選択子]]が適用される場合、[[WebVTT中間節点オブジェクト]]などから構成される仮想的な[[文書木]]が想定されることになっています
[SRC[>>9]]。

* DOM 操作

[13] [[文書木]]に対する変更操作を、一般に[DFN[DOM操作]]などといいます。

[14] 次のような操作があります。
[FIG(short list)[
- [[要素の作成]]
- [[要素の格上げ]]
- [[挿入]]
- [[削除]]
- [[属性の設定]]
- [[属性の削除]]
- [[clone]]
]FIG]

[21] [[影木]]に関する操作も含めるかもしれません。

[15] こうした操作の発生源については、[[変異]]を参照。

* 関連

[20] [[文書木中]]とは、[[文書]]またはその[[子孫]]であることをいいます。

* 歴史

[REFS[
- [19] [CITE@en[Editorial: add sections on document and shadow trees · whatwg/dom@018440e]] ([TIME[2016-03-20 18:43:57 +09:00]] 版) <https://github.com/whatwg/dom/commit/018440e918b59633eb0a6b9033528f612f84aa49>
]REFS]

[22] [CITE[ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM — hayato.io]]
([TIME[2017-12-26 12:07:04 +09:00]])
<https://hayato.io/2017/dom/>

[23] [CITE@en-US[Modernizing the DOM tree in Microsoft Edge - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog]]
([TIME[2017-12-26 13:57:50 +09:00]])
<https://blogs.windows.com/msedgedev/2017/04/19/modernizing-dom-tree-microsoft-edge/>

[24] [CITE@en[A node doesn't have an associated tree]]
([[annevk]]著, [TIME[2018-03-15 16:46:11 +09:00]])
<https://github.com/whatwg/dom/commit/06dae6577f55af9ef2ff8228ac1a8a60b9f68cb3>

[25] [CITE@en["node's tree" seems to be an undefined concept · Issue #526 · whatwg/dom]]
([TIME[2018-03-17 17:41:56 +09:00]])
<https://github.com/whatwg/dom/issues/526>

[26] [CITE@en[A node doesn't have an associated tree by annevk · Pull Request #599 · whatwg/dom]]
([TIME[2018-03-17 17:42:17 +09:00]])
<https://github.com/whatwg/dom/pull/599>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)