From 035535ba507b9e36b058bd9843242e1bcbda1be3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 Jan 2022 21:57:08 +0900 Subject: ウェブコンポーネント関係の Web API の記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/getrootnode/index.html | 98 ---------------------------- files/ja/web/api/node/getrootnode/index.md | 98 ++++++++++++++++++++++++++++ 2 files changed, 98 insertions(+), 98 deletions(-) delete mode 100644 files/ja/web/api/node/getrootnode/index.html create mode 100644 files/ja/web/api/node/getrootnode/index.md (limited to 'files/ja/web/api/node') diff --git a/files/ja/web/api/node/getrootnode/index.html b/files/ja/web/api/node/getrootnode/index.html deleted file mode 100644 index 911233ed0d..0000000000 --- a/files/ja/web/api/node/getrootnode/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -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}}
-
ルートノードを取得するためのオプションを設定するオブジェクトです。利用可能なオプションは次の通りです。 -
    -
  • composed: {{jsxref('Boolean')}} 値で、シャドウルートを返すか (false、既定値)、またはシャドウルートを越えたルートノードを返すか (true) を示します。
    • -
-
-
- -

返値

- -

{{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")}}

diff --git a/files/ja/web/api/node/getrootnode/index.md b/files/ja/web/api/node/getrootnode/index.md new file mode 100644 index 0000000000..911233ed0d --- /dev/null +++ b/files/ja/web/api/node/getrootnode/index.md @@ -0,0 +1,98 @@ +--- +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}}
+
ルートノードを取得するためのオプションを設定するオブジェクトです。利用可能なオプションは次の通りです。 +
    +
  • composed: {{jsxref('Boolean')}} 値で、シャドウルートを返すか (false、既定値)、またはシャドウルートを越えたルートノードを返すか (true) を示します。
    • +
+
+
+ +

返値

+ +

{{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")}}

-- cgit v1.2.3-54-g00ecf