Node.getRootNode()

翻译不完整。 请帮助我们翻译这篇文章!

Node 接口的 getRootNode() 方法返回上下文中的根节点,如果 shadow DOM 可用,则对 shadow DOM 同样适用。

语法

var root = node.getRootNode(options);

参数

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

返回值

返回一个继承自 Node 的对象。返回值会因为 getRootNode() 调用的地方不同而不同; 比如说:

  • 在标准的网页中调用将会返回一个 HTMLDocument 对象表示整个网页。
  • 在Shadow DOM里调用将会返回一个与之相关联的 ShadowRoot

示例

第一个例子很简单,返回一个参照 HTML/document node 位置的一个节点。

rootNode = node.rootNode;

我们来看一个稍微复杂的例子。这个例子展示了该属性在普通的 DOM 的 shadow DOM 的差别。 (See the full source code):

<!-- 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>

规格

规范 状态 备注
DOM
getRootNode()
Living Standard Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getRootNodeChrome Full support 54Edge Full support 79Firefox Full support 53IE No support NoOpera Full support 41Safari Full support 10.1WebView Android Full support 54Chrome Android Full support 54Firefox Android Full support 53Opera Android Full support 41Safari iOS Full support 10.3Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support