Node: getRootNode() 方法
Node 介面的 getRootNode() 方法返回上下文物件的根節點，如果可用，它還可以選擇性地包含 shadow root。
語法
js
getRootNode()
getRootNode(options)
引數
options可選-
用於設定獲取根節點選項的物件。可用選項包括：
composed：一個布林值，指示是返回 shadow root（false，預設值），還是返回 shadow root 之外的根節點（true）。
返回值
一個繼承自 Node 的物件。具體形式取決於呼叫 getRootNode() 的位置；例如：
- 在標準網頁中的元素上呼叫它會返回一個代表整個頁面的
HTMLDocument物件（或<iframe>）。 - 在 shadow DOM 中的元素上呼叫它會返回關聯的
ShadowRoot。 - 在未附加到文件或 shadow tree 的元素上呼叫它會返回它所屬的 DOM 樹的根節點。
示例
示例 1
第一個簡單示例返回對 HTML/文件節點的引用
js
const rootNode = node.getRootNode();
示例 2
這個更復雜的示例顯示了返回普通根節點與返回包含 shadow root 的根節點之間的區別
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.innerText += `\nparent's root: ${parent.getRootNode().nodeName}\n`; // #document
output.innerText += `child's root: ${child.getRootNode().nodeName}\n\n`; // #document
// create a ShadowRoot
const shadowRoot = shadowHost.attachShadow({ mode: "open" });
shadowRoot.innerHTML =
'<style>div{background:#2bb8aa;}</style><div class="shadowChild">shadowChild</div>';
const shadowChild = shadowRoot.querySelector(".shadowChild");
// The default value of composed is false
output.innerText += `shadowChild.getRootNode() === shadowRoot : ${
shadowChild.getRootNode() === shadowRoot
}\n`; // true
output.innerText += `shadowChild.getRootNode({ composed:false }) === shadowRoot : ${
shadowChild.getRootNode({ composed: false }) === shadowRoot
}\n`; // true
output.innerText += `shadowChild.getRootNode({ composed:true }).nodeName : ${
shadowChild.getRootNode({ composed: true }).nodeName
}\n`; // #document
示例 3
此示例返回未掛載樹的根節點。請注意，這裡的 element 是樹的根節點（因為它沒有父節點），因此根據定義，它的根節點是它本身
js
const element = document.createElement("p");
const child = document.createElement("span");
element.append(child);
const rootNode = child.getRootNode(); // <p><span></span></p>
element === rootNode; // true
element === element.getRootNode(); // true
規範
| 規範 |
|---|
| DOM # ref-for-dom-node-getrootnode① |
瀏覽器相容性
載入中…