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 2020年1月.

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

構文

js
getRootNode()
getRootNode(options)

引数

options 省略可

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

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

返値

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

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

例

例 1

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

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①

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年6月24日 by MDN contributors.

View this page on GitHub • Report a problem with this content

ドキュメントオブジェクトモデル (DOM)
Node
インスタンスプロパティ
インスタンスメソッド
イベント
1. selectstart
継承
1. EventTarget
DOM に関連するページ
ガイド
1. DOM の構造
2. 属性の反映
3. DOM ツリー上の選択と走査
4. DOM ツリーの構築と更新
5. イベントの扱い

Node: getRootNode() メソッド

In this article

Help improve MDN