时间戳

首页 > 解决方案 > 如何访问这个 div

javascript - 如何访问这个 div

问题描述

我需要访问课程chat-wrapper根

我已经尝试了所有这些选项

// 1 --> error: document.querySelector(...).shadowRoot.querySelector(...).shadowRoot.getElementByClassName is not a function at HTMLElement
document.querySelector('df-messenger').shadowRoot.querySelector('df-messenger-chat').shadowRoot.getElementsByClassName('chat-wrapper')

// 2 --> null
document.querySelector('df-messenger').shadowRoot.querySelector('df-messenger-chat').shadowRoot.querySelector('chat-wrapper')

// 3 error: document.querySelector(...).shadowRoot.querySelector(...).shadowRoot.getElementByTagName is not a function at HTMLElement
document.querySelector('df-messenger').shadowRoot.querySelector('df-messenger-chat').shadowRoot.getElementsByTagName('div')

// 4 --> undefined
document.querySelector('df-messenger').shadowRoot.querySelector('df-messenger-chat').shadowRoot.div

但它们似乎都不起作用。我怎么能访问那个类？

标签： javascripthtmldomshadow-dom

解决方案

document.querySelector(".chat-wrapper");

或者

document.querySelector("div.chat-wrapper");

请记住：querySelector() 返回文档中与指定选择器匹配的第一个元素

使用点 (.) 字符调用具有其类的元素，或使用尖 (#) 字符调用具有其 id 的元素。

阅读文档

推荐阅读