--- title: Node.getRootNode() slug: Web/API/Node/getRootNode tags: - API - DOM - Method - Node - Reference - getRootNode - メソッド translation_of: Web/API/Node/getRootNode ---
{{APIRef("DOM")}}

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

構文

var root = node.getRootNode(options);

引数

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

返値

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

例

最初に、 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+ で動作

  var 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 の生成
  var shadowRoot = shadowHost.attachShadow({mode:'open'});
  shadowRoot.innerHTML = '<style>div{background:#2bb8aa;}</style>'
      + '<div class="js-shadowChild">content</div>';
  var 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>

仕様書

仕様書 状態 備考
{{SpecName('DOM WHATWG','#dom-node-getrootnode','getRootNode()')}} {{Spec2('DOM WHATWG')}} 初回定義

ブラウザーの互換性

{{Compat("api.Node.getRootNode")}}