如何使用 querySelectorAll 选择所有 DIV？

Question

我想调用 all divs 因为TUTTIiDIV它已经是一个数组。当我运行此代码时，控制台看起来不错，但代码无法按预期工作。如何选择数组的所有元素TUTTIiDIV？document.addEventListener("DOMContentLoaded", function() {  var TUTTIiDIV = document.querySelectorAll("div");  document TUTTIiDIV.onclick = function() {    coloraicontorni()  }}); //END DOMcontentLoadedfunction coloraicontorni() {  var TUTTIiDIV = document.querySelectorAll("div");  for (i = 0; i <= TUTTIiDIV.length; i++) {    TUTTIiDIV[i].classList.add('contorno');  }};* {  box-sizing: border-box;}body {  background-color: antiquewhite;}#rosso {  width: 25%;  height: 150px;  background-color: red;  display: inline-block;}#blu {  width: 25%;  height: 150px;  background-color: blue;  display: inline-block;}#giallo {  width: 25%;  height: 150px;  background-color: yellow;  display: inline-block;}.contorno {  border: 8px solid black;}<div id="rosso"></div><div id="blu"></div><div id="giallo"></div>

Answer 1

使用最近容器中的委托来选择单击该容器中的任何内容

window.addEventListener("load", function() { // when the page has loaded

  document.getElementById("container").addEventListener("click", function(e) {

    [...this.querySelectorAll("div")] // the "this" is the container

    .forEach(div => div.classList.add('contorno'));

  });

});

* {

  box-sizing: border-box;

}

body {

  background-color: antiquewhite;

}

#rosso {

  width: 25%;

  height: 150px;

  background-color: red;

  display: inline-block;

}

#blu {

  width: 25%;

  height: 150px;

  background-color: blue;

  display: inline-block;

}

#giallo {

  width: 25%;

  height: 150px;

  background-color: yellow;

  display: inline-block;

}

.contorno {

  border: 8px solid black;

}

<div id="container">

  <div id="rosso"></div>

  <div id="blu"></div>

  <div id="giallo"></div>

</div>

如果您只想单击 div，请执行以下操作

window.addEventListener("load", function() { // when the page has loaded

  document.getElementById("container").addEventListener("click", function(e) {

    if (e.target.tagName === "DIV") { // only if we click a div in the container

      [...this.querySelectorAll("div")] // the "this" is the container

      .forEach(div => div.classList.add('contorno'));

    }

  });

});

* {

  box-sizing: border-box;

}

body {

  background-color: antiquewhite;

}

#rosso {

  width: 25%;

  height: 150px;

  background-color: red;

  display: inline-block;

}

#blu {

  width: 25%;

  height: 150px;

  background-color: blue;

  display: inline-block;

}

#giallo {

  width: 25%;

  height: 150px;

  background-color: yellow;

  display: inline-block;

}

.contorno {

  border: 8px solid black;

}

<div id="container">

  <div id="rosso"></div>

  <div id="blu"></div>

  <div id="giallo"></div>

</div>