获取包含相同类名的影子根的所有 div 元素答案

【问题标题】：get all div element of shadow root containing same class name获取包含相同类名的影子根的所有 div 元素
【发布时间】：2021-02-01 11:24:24
【问题描述】：

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

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

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

我的查询选择器代码 -

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

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

【问题讨论】：

使用.querySelectorAll()。它返回一个NodeList，您可以在其上调用.forEach() 方法来遍历列表并在列表中的每个元素上添加事件监听器。
querySelector() 只返回找到的第一个匹配项
[ ...shadow.querySelectorAll(".potato") ].forEach(x=>x.addEventListener......
这很完美！谢谢！
@Danny'365CSI'Engelman 不需要创建一个数组来调用.forEach() 方法。您也可以在NodeList 上调用.forEach()，由.querySelectorAll 返回。

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：