Node.getRootNode()

这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

 getRootNode() 属性返回上下文的根节点,对影子DOM同样适用,如果影子DOM允许。

语法

var root = node.getRootNode(options)

参数

options 可选
An object that sets options for getting the root node. The available options are:
  • composed: A Boolean that indicates whether the shadow root should be returned (false, the default), or a root node beyond shadow root (true).

返回值

A Node interface.

例子

第一个例子很简单。在支持的浏览器中,将会返回一个参照HTML/document node位置的一个节点。

rootNode = node.rootNode;

我们来看一个稍微复杂的例子。这个例子展示了该属性在普通的DOM的shadowDOM的差别。

<!-- 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 Status Comment
DOM
getRootNode()
Living Standard Initial definition.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 54.0 53 (53) ? 41 10.1
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 54.0 53.0 (53) ? 41 10.1 54.0

文档标签和贡献者

标签: 
 此页面的贡献者: xuetengfei
 最后编辑者: xuetengfei,