Node: getRootNode() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

getRootNode()Node インターフェイスのメソッドで、そのコンテキストのオブジェクトのルート、利用できる場合はオプションでシャドウルートを含んだものを返します。

構文

js
getRootNode()
getRootNode(options)

引数

options 省略可

ルートノードを取得するためのオプションを設定するオブジェクトです。利用可能なオプションは次の通りです。

  • composed: 論理値で、シャドウルートを返すか (false、既定値)、またはシャドウルートを越えたルートノードを返すか (true) を示します。

返値

Node を継承したオブジェクトです。これはどこで getRootNode() を呼び出したかによって異なる形になります。例えば、

  • 標準のウェブページ内の要素に対して呼び出した場合は、ページ全体を表す HTMLDocument オブジェクトを返します。
  • シャドウ DOM の中の要素に対して呼び出した場合は、関連する ShadowRoot オブジェクトを返します。

例 1

最初に、 HTML/document ノードの参照を返す単純な例です。

js
const rootNode = node.getRootNode();

例 2

この例はもっと複雑で、通常のルートを返す場合と、シャドウルートを含むルートの違いを示します。

html
<div class="parent">
  <div class="child"></div>
</div>
<div class="shadowHost">shadowHost</div>
<pre id="output">Output: </pre>
js
const parent = document.querySelector(".parent");
const child = document.querySelector(".child");
const shadowHost = document.querySelector(".shadowHost");
const output = document.getElementById("output");

output.textContent += `\nparent's root: ${parent.getRootNode().nodeName} \n`; // #document
output.textContent += `child's  root: ${child.getRootNode().nodeName} \n\n`; // #document

// ShadowRoot の生成
const shadowRoot = shadowHost.attachShadow({ mode: "open" });
shadowRoot.innerHTML =
  '<style>div{background:#2bb8aa;}</style><div class="shadowChild">shadowChild</div>';
const shadowChild = shadowRoot.querySelector(".shadowChild");

// 合成の既定値は false
output.textContent += `shadowChild.getRootNode() === shadowRoot : ${
  shadowChild.getRootNode() === shadowRoot
} \n`; // true
output.textContent += `shadowChild.getRootNode({composed:false}) === shadowRoot : ${
  shadowChild.getRootNode({ composed: false }) === shadowRoot
} \n`; // true
output.textContent += `shadowChild.getRootNode({composed:true}).nodeName : ${
  shadowChild.getRootNode({ composed: true }).nodeName
} \n`; // #document

仕様書

Specification
DOM
# ref-for-dom-node-getrootnode①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getRootNode

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support