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① |
浏览器兼容性
加载中…