blob: 19a5be81fe868b1987865183e14a8a98246b8870 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
---
title: Node.getRootNode()
slug: Web/API/Node/getRootNode
tags:
- メソッド
- リファレンス
browser-compat: api.Node.getRootNode
translation_of: Web/API/Node/getRootNode
---
{{APIRef("DOM")}}
**`getRootNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、そのコンテキストのオブジェクトのルート、利用できる場合はオプションでシャドウルートを含んだものを返します。
## 構文
```js
getRootNode();
getRootNode(options);
```
### 引数
- `options` {{optional_inline}}
- : ルートノードを取得するためのオプションを設定するオブジェクトです。利用可能なオプションは次の通りです。
- `composed`: 論理値で、シャドウルートを返すか (`false`、既定値)、またはシャドウルートを越えたルートノードを返すか (`true`) を示します。
### 返値
{{domxref('Node')}} を継承したオブジェクトです。これはどこで `getRootNode()` を呼び出したかによって異なる形になります。例えば、
- 標準のウェブページ内の要素に対して呼び出した場合は、ページ全体を表す {{domxref("HTMLDocument")}} オブジェクトを返します。
- シャドウ DOM の中の要素に対して呼び出した場合は、関連する {{domxref("ShadowRoot")}} オブジェクトを返します。
## 例
最初に、 HTML/document ノードの参照を返す単純な例です。
```js
rootNode = node.getRootNode();
```
この例はもっと複雑で、通常のルートを返す場合と、シャドウルートを含むルートの違いを示します。 ([ソースコード全体](https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html)を見てください。)
```html
<!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html -->
<div class="js-parent">
<div class="js-child"></div>
</div>
<div class="js-shadowHost"></div>
<script>
// Chrome 54 以降, Opera 41 以降で動作
const parent = document.querySelector('.js-parent'),
child = document.querySelector('.js-child'),
shadowHost = document.querySelector('.js-shadowHost');
console.log(parent.getRootNode().nodeName); // #document
console.log(child.getRootNode().nodeName); // #document
// ShadowRoot の生成
const shadowRoot = shadowHost.attachShadow({mode:'open'});
shadowRoot.innerHTML = '<style>div{background:#2bb8aa;}</style>'
+ '<div class="js-shadowChild">content</div>';
const shadowChild = shadowRoot.querySelector('.js-shadowChild');
// 合成の既定値は false
console.log(shadowChild.getRootNode() === shadowRoot); // true
console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true
console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document
</script>
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
|
