Polymer中如何通过类名获取所有元素？

没错，this.$$(selector)确实只会返回匹配到的第一个元素，要拿到所有符合类名的元素，我给你分享几个实用的方法：

• 直接使用shadowRoot.querySelectorAll：Polymer元素的本地DOM是挂载在shadowRoot对象下的，调用this.shadowRoot.querySelectorAll(selector)就能获取到所有匹配选择器的元素集合。比如你要找类名为my-target-class的元素，代码就是this.shadowRoot.querySelectorAll('.my-target-class')。返回的是一个NodeList，要是想方便遍历的话，可以用Array.from()把它转成数组。

• 注意生命周期时机：不管用哪种方法，都要确保在元素的shadowRoot已经初始化完成后再调用。比如在Polymer 2.x+里，你可以在connectedCallback()或者ready()钩子里面操作，记得要先调用父类的对应方法（比如super.ready()）。

给你贴个实际的代码例子，一看就懂：

ready() {
  super.ready();
  // 获取所有类名为"card-item"的本地DOM元素
  const cardItems = this.shadowRoot.querySelectorAll('.card-item');
  
  // 遍历元素做你需要的操作
  cardItems.forEach(item => {
    item.addEventListener('click', () => {
      console.log('卡片被点击了');
    });
  });
}

另外要提醒一句，这个方法是针对本地DOM的，如果你的元素是在全局DOM里（不推荐Polymer这么用），那直接用document.querySelectorAll()就行，但咱们开发Polymer组件一般都是操作自己的本地DOM啦。

内容的提问来源于stack exchange，提问作者Sudipta Roy