这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
getRootNode()
属性返回上下文的根节点,对shadow DOM同样适用,如果shadow DOM允许。
语法
var root = node.getRootNode(options)
参数
- options 可选
- 获取根节点时的可选参数对象. 下列值可供选择:
composed
:Boolean
如果检索到 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 |