如何使用 querySelectorAll select 所有 DIV？

Question

我想调用所有 div 因为 TUTTIiDIV 已经是一个数组。当我运行此代码时，控制台看起来没问题，但代码无法按预期工作。

如何select数组的所有元素TUTTIiDIV？

document.addEventListener("DOMContentLoaded", function() {
  var TUTTIiDIV = document.querySelectorAll("div");
  document TUTTIiDIV.onclick = function() {
    coloraicontorni()
  }

}); //END DOMcontentLoaded

function 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

你可以这样做，我已经调整了你的功能

运行下面的片段：

var TUTTIiDIV = document.querySelectorAll("div");


for (let i = 0; i < TUTTIiDIV.length; i++) {
//addEventListener "click" for each div that you are looping through with querySelectorAll
  TUTTIiDIV[i].addEventListener("click", function() {
    TUTTIiDIV[i].classList.toggle("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 2

这对我有用。如果你也给我反馈。 ;)

根据 Scott Marcus 的评论进行编辑。

const tuttiDiv = document.querySelectorAll('div');
document.addEventListener("click", (event) => {
  if(event.target.nodeName === "DIV"){
    tuttiDiv.forEach((div) => {
      div.classList.toggle("contorno");
    });
  }
});

Answer 3

正如您正确指出的 TUTTIiDIV 是一个集合，因此它不会设置 onclick 属性，但是您的 coloraicontorni 函数正确地循环了集合并修改其 classList.

但是，更好的是，使用 event delegation 更简单地解决这个问题。

此外，您应该只引用一次 <script>，并且应该恰好在结束 body 标记之前，以便在处理 script 时，所有 HTML 将被解析。这消除了对 DOMContentLoaded 事件处理程序的需要。

查看下面的评论：

// If your <script> is located just before the closing body tag,
// then it is not necessary to set up the DOMContentLoaded event
//document.addEventListener("DOMContentLoaded", function(){

// Instead of setting up an event handler on each <DIV>, just
// set up a single event handler on the document and when the
// click events bubble up to it, check event.target to see
// which element actually triggered the event. This is called
// "event delegation".

let divs = document.querySelectorAll("div");

document.addEventListener("click", function(event){
  // Check to see if it was a <div> that triggered the event
  if(event.target.nodeName === "DIV"){
    // Loop over all the <div> elements in the collection
    divs.forEach(function(div){
      div.classList.add("contorno");  // Add the class
    });
  }
});

*    { 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 4

使用最近容器的委派来选择对该容器中任何内容的点击

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>

Answer 5

let divs = [...document.getElementsByTagName('div')];
   divs.forEach(div => {
       div.addEventListener('click',function(){
            div.classList.toggle('border');
       })
   });

div{
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
}
.border{
    border: 10px solid black;
}

<div class='d' style="background: red;"></div>
<div class='d' style="background: green;"></div>
<div class='d' style="background: blue"></div>

如何使用 querySelectorAll select 所有 DIV？

How can I select all DIVs with querySelectorAll?

html

javascript

css

onclick