Node.getRootNode()
getRootNode()
は Node
インターフェイスのメソッドで、そのコンテキストのオブジェクトのルート、利用できる場合はオプションでシャドウルートを含んだものを返します。
構文
getRootNode();
getRootNode(options);
引数
options
省略可-
ルートノードを取得するためのオプションを設定するオブジェクトです。利用可能なオプションは次の通りです。
composed
: 論理値で、シャドウルートを返すか (false
、既定値)、またはシャドウルートを越えたルートノードを返すか (true
) を示します。
返値
Node
を継承したオブジェクトです。これはどこで getRootNode()
を呼び出したかによって異なる形になります。例えば、
- 標準のウェブページ内の要素に対して呼び出した場合は、ページ全体を表す
HTMLDocument
オブジェクトを返します。 - シャドウ DOM の中の要素に対して呼び出した場合は、関連する
ShadowRoot
オブジェクトを返します。
例
最初に、 HTML/document ノードの参照を返す単純な例です。
rootNode = node.getRootNode();
この例はもっと複雑で、通常のルートを返す場合と、シャドウルートを含むルートの違いを示します。 (ソースコード全体を見てください。)
<!-- 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>
仕様書
Specification |
---|
DOM Standard # ref-for-dom-node-getrootnode① |
ブラウザーの互換性
BCD tables only load in the browser