[JavaScript] How to select all tag elements with JS

[Question] 

I have a question about how to select all tag elements in HTML page with JavaScript and apply an Event listener to them.

With jQuery we can do like this

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

But how can I do it with pure JavaScript? I have this code:

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

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

But this gives an error in console:

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

[Answer] 

getElementsByTagName() returns collection. You have to iterate over all the element to add the event:

Try with querySelectorAll() and forEach():

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

Please Note: querySelectorAll() is supported by all the modern browsers. Some older browsers does not support it.

Try the following with Array.prototype.forEach() if you want to work with older browsers:

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

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>

[출처] https://stackoverflow.com/questions/49400236/how-to-select-all-tag-elements-with-js