如何访问这个 div

Question

我需要访问 class 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

但其中 none 似乎有效。我怎样才能访问那个 class？

Answer 1

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

或

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

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

使用点 (.) 字符调用带有其 class 的元素，或尖锐 (#) 字符调用带有其 ID 的元素。

阅读docs

如何访问这个 div

How to acces this div

html

javascript

dom

shadow-dom