Node.getRootNode()

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 位置的一个节点。

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>

规格

浏览器兼容性