节点：getRootNode() 方法

基线 广泛可用

此功能已成熟，并在许多设备和浏览器版本中运行。它自以下时间起在所有浏览器中都可用 2020 年 1 月.

getRootNode() 方法是 Node 接口的方法，它返回上下文对象的根，如果可用，它可以选择包含阴影根。

语法

js
getRootNode()
getRootNode(options)

参数

options 可选

一个设置获取根节点选项的对象。可用的选项是

  • composed: 一个布尔值，指示是否应返回阴影根 (false，默认值) 或阴影根之外的根节点 (true)。

返回值

一个继承自 Node 的对象。这将根据您调用 getRootNode() 的位置而有所不同；例如

  • 在标准网页内的元素上调用它将返回一个 HTMLDocument 对象，该对象表示整个页面 (或 <iframe> )。
  • 在阴影 DOM 内的元素上调用它将返回关联的 ShadowRoot。
  • 在未附加到文档或阴影树的元素上调用它将返回它所属的 DOM 树的根。

示例

示例 1

第一个简单的示例返回对 HTML/文档节点的引用

js
const rootNode = node.getRootNode();

示例 2

此更复杂的示例显示了返回正常根与包括阴影根的根之间的区别

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①

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。