获取包含相同类名的 shadow root 的所有 div 元素

Question

我的 HTML 页面中有一个 shadowRoot，我通过这段代码访问

var shadow = document.getElementById(
        "3rd-party-div"
      ).shadowRoot; 

现在我能够观察到我有两个具有相同类名的 div。 我试图通过 queryselector 获取两个 div，但我只能获取第 1 次出现的 div。

我的查询选择器代码 -

shadow.querySelector(".potato").addEventListener("click", () => {
            alert("clicked potato");
});

有没有办法让两个div具有相同的类名？

Answer 1

正如@Yousaf、@charlietfl 和@Danny '365CSI' Engelman 发布的那样，querySelectorAll 成功了。

Answer 2

使用 for 循环遍历要访问的两个 div 元素。

var shadows = document.getElementsByClassName('.3rd-party-div');
for(var i of shadows){
  i.addEventListener('click',()=>{
  alert('clicked ');
 }
}