javascript - 如何用JS选择所有标签元素

Question

我有一个关于如何使用 JavaScript 选择 HTML 页面中的所有标签元素并向它们应用事件监听器的问题。

使用 jQuery，我们可以这样做

$('td').on('click', function(){...});

但是我怎样才能用纯 JavaScript 来做到这一点呢？我有这个代码:

const el = document.getElementsByTagName('td');
el.addEventListener("click", function(){

    let cellColor = document.getElementById("colorPicker").value;
    this.backgroundColor = cellColor;
});

但这会在控制台中出现错误:

Uncaught TypeError: el.addEventListener is not a function at makeGrid (designs.js:34) at designs.js:42

Answer 1

getElementsByTagName() 返回集合。您必须迭代所有元素才能添加事件:

尝试使用querySelectorAll()和forEach():

const el = document.querySelectorAll('td');
el.forEach(function(td){
  td.addEventListener("click", function(){
    let cellColor = document.getElementById("colorPicker").value;
    this.style.backgroundColor = cellColor;
  });
});

请注意: 所有现代浏览器都支持 querySelectorAll()。一些较旧的浏览器不支持它。

使用 Array.prototype.forEach() 尝试以下操作如果您想使用旧版浏览器:

const el = document.getElementsByTagName('td');
[].forEach.call(el, function(td){
  td.addEventListener("click", function(){
    let cellColor = document.getElementById("colorPicker").value;
    this.style.backgroundColor = cellColor;
  });
});

Cell Color: <input id="colorPicker" value="#FF5733"/>
<table>
  <tbody>
    <tr><td>11</td><td>12</td><td>13</td></tr>
    <tr><td>21</td><td>22</td><td>23</td></tr>
    <tr><td>31</td><td>32</td><td>33</td></tr>
  </tbody>
</table>