如何访问浏览器的DocumentFragment节点？

Question

对于页面铬://历史，在Developer Tools中，DOM元素树显示DocumentFragment类型的节点，如下面的屏幕快照中所选的#shadow-root (open)：

​

​

我的问题是如何使用querySelector或其他Javascript方法来选择这样的节点？

与这个网站上的另一个答案不同，DocumentFragment.querySelector并不存在。

Answer 1

正如在developer.mozilla.org上解释的，

ShadowRoot的ShadowRoot接口是DOM子树的根节点，它与文档的主DOM树分开呈现。 您可以使用元素的Element.shadowRoot属性检索对元素阴影根的引用，条件是它是使用Element.attachShadow()创建的，模式选项设置为open。

在你的例子中，看起来你需要

var shroot = document.getElementById('history-app').shadowRoot
                     .getElementById('history').shadowRoot;

正如你所看到的，我们(显然)必须一步一步地浏览DOM .例如，尝试直接访问'history'元素是行不通的，因为它本身就在shadowRoot中。