MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

Node.getRootNode()

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

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

语法

var root = node.getRootNode(options)

参数

options 可选
获取根节点时的可选参数对象. 下列值可供选择:
  • composedBoolean 如果检索到 shadow Root 需要返回, 则设置为 (false, 默认值), 如果跳过shadow Root 检索普通Root则设置为 (true).

返回值

返回 Node .

样例

第一个例子很简单。在支持的浏览器中,将会返回一个参照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.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

文档标签和贡献者

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