Node.getRootNode()

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

var root = node.getRootNode(options);

options 省略可

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

• composed: Boolean 値で、シャドウルートを返すか (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+ で動作

  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>