JS获取ShadowDOM中的节点
有的网站中有ShadowDOM节点,对于这种节点,直接在控制台使用元素选择器是无法获取到的。
无法获取到Shadow中的DOM节点
那怎么获取呢?这里结合ShadowDOM的特性分shadowroot(open)和shadowroot(closed)两种情况。1、shadowroot(open)
假设页面中有一个id为open的p元素,我们可以通过下面的代码将它设置为一个open状态的ShadowDOM节点,并为它添加一个子节点eleopenchild。
此时,我们想要访问它下面的子节点,可以通过open元素下的shadowRoot属性获取到它下面的shadow上下文,然后再通过元素选择器获取到它的子节点JS获取shadow中的节点document。querySelector(open)。shadowRoot。querySelector(eleopenchild)2、shadowroot(closed)
假设页面中有一个id为closed的p元素,我们可以通过下面的代码将它设置为一个closed状态的ShadowDOM节点,并为它添加一个子节点eleclosedchild。
此时,上面的方法就行不通了,closed元素的shadowRoot属性为null
closed元素的shadowRoot属性为null
MDN文档中的说明
此时如果想要获取closedshadow中p,就需要借助浏览器插件,思路是:
在页面创建ShadowDOM之前,将Element对象原型链上的attachShadow方法篡改掉,使得创建的所有ShadowDOM都是open状态。
这里我创建一个油猴脚本,添加下面的代码:Element。prototype。attachShadowElement。prototype。attachShadowElement。prototype。attachShadowfunction(){returnthis。attachShadow({mode:open})}
油猴脚本
写完脚本后保存,使之生效。然后刷新页面,此时,再次创建ShadowDOM的话,得到的都是open状态的。
万shadow皆open实例
示例