如何用纯JavaScript选中所有标签元素并绑定事件监听？

嘿，我来帮你搞定这个问题～你遇到的报错原因很明确：document.getElementsByTagName('td')返回的不是单个DOM元素，而是一个HTMLCollection（类似数组的元素集合），集合本身没有addEventListener方法，所以直接调用会触发类型错误。

另外，你代码里还有个小问题：设置背景色需要通过element.style.backgroundColor，而不是直接element.backgroundColor，后者不是正确的DOM元素属性哦。

下面给你几种可行的实现方式：

方法1：遍历元素集合逐个绑定事件 #

这是最直接的方式，把集合里的每个td元素单独拿出来添加事件监听：

const cells = document.getElementsByTagName('td');

// 用for循环遍历（兼容所有浏览器）
for (let i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function() {
    const cellColor = document.getElementById('colorPicker').value;
    this.style.backgroundColor = cellColor;
  });
}

// 或者转成数组后用forEach（现代浏览器支持）
Array.from(cells).forEach(cell => {
  cell.addEventListener('click', () => {
    const cellColor = document.getElementById('colorPicker').value;
    cell.style.backgroundColor = cellColor;
  });
});

方法2：事件委托（更高效，支持动态元素） #

如果你的页面里会动态添加td元素，上面的方法就失效了——因为动态新增的元素不会自动绑定事件。这时候推荐用事件委托：给td的父元素（比如table）绑定事件，利用事件冒泡机制来处理点击，这样不管是现有还是新增的td都能触发：

// 找到table父元素（如果有多个table可以更精准地选择）
const table = document.querySelector('table');

table.addEventListener('click', function(e) {
  // 判断点击的目标是不是td
  if (e.target.tagName === 'TD') {
    const cellColor = document.getElementById('colorPicker').value;
    e.target.style.backgroundColor = cellColor;
  }
});

这种方式的优势是只需要绑定一次事件，性能更优，还能覆盖动态生成的元素。

为什么你的代码报错？ #

再回顾下你的代码问题：

• el是HTMLCollection，不是单个元素，所以不能直接调用addEventListener
• 设置背景色时缺少style属性，应该是this.style.backgroundColor

调整后就能正常工作啦～

内容的提问来源于stack exchange，提问作者Molham Al Nasr