Node.getRootNode()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Node
接口的 getRootNode()
方法返回上下文中的根节点,如果 shadow DOM 可用,则对 shadow DOM 同样适用。
语法
var root = node.getRootNode(options);
参数
options
可选-
获取根节点时的可选参数对象。下列值可供选择:
composed
:Boolean
如果检索到 shadow Root 需要返回,则设置为(false
,默认值),如果跳过 shadow Root 检索普通 Root 则设置为(true
)。
返回值
返回一个继承自 Node
的对象。返回值会因为 getRootNode()
调用的地方不同而不同; 比如说:
- 在标准的网页中调用将会返回一个
HTMLDocument
对象表示整个网页。 - 在 Shadow DOM 里调用将会返回一个与之相关联的
ShadowRoot
。
示例
第一个例子很简单,返回一个参照 HTML/document node 位置的一个节点。
js
rootNode = node.rootNode;
我们来看一个稍微复杂的例子。这个例子展示了该属性在普通的 DOM 的 shadow DOM 的差别。 (See the full source code):
html
<!-- 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>
// work on Chrome 54+,Opera41+
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
// create a 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");
// The default value of composed is false
console.log(shadowChild.getRootNode() === shadowRoot); // true
console.log(shadowChild.getRootNode({ composed: false }) === shadowRoot); // true
console.log(shadowChild.getRootNode({ composed: true }).nodeName); // #document
</script>
规范
Specification |
---|
DOM Standard # ref-for-dom-node-getrootnode① |
浏览器兼容性
BCD tables only load in the browser