元素内任何 div 的 querySelectorAll答案

【问题标题】：querySelectorAll for any div within an element元素内任何 div 的 querySelectorAll
【发布时间】：2020-05-12 22:44:59
【问题描述】：

我希望这会对我在部分 id playGrid 内单击的任何 div 弹出警报，但它什么也没做。

<div id="playGrid" class="w">
  <section>
    <div id="0_0"></div>
    <div id="0_1"></div>
    <div id="0_2"></div>
    <div id="0_3"></div>

    <div id="1_0"></div>
    <div id="1_1"></div>
    <div id="1_2"></div>
    <div id="1_3"></div>

    <div id="2_0"></div>
    <div id="2_1"></div>
    <div id="2_2"></div>
    <div id="2_3"></div>

    <div id="3_0"></div>
    <div id="3_1"></div>
    <div id="3_2"></div>
    <div id="3_3"></div>
  </section>
</div>

JavaScript

document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el){
  el.addEventListener('click', function() {
    alert(this.id);
  });
});

【问题讨论】：

只要这些 div 不为空，它就可以工作
<div> 元素为空；它们不会在屏幕上占据任何空间，那么您将如何点击它们呢？

标签： javascript html queryselectall

【解决方案1】：

我认为问题在于您的代码在文档完全加载之前运行。要在页面加载后运行您的代码，请为“DOMContentLoaded”事件添加事件侦听器：

document.addEventListener('DOMContentLoaded', function(){
  document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el) {
    el.addEventListener('click', function() {
      alert(this.id);
    });
  });
});

https://codepen.io/mikhailsidorov/pen/BaoPKoX

【讨论】：

【解决方案2】：

两个选项像这样添加内容

  <section>
    <div id="0_0">content</div>
    <div id="0_1">content</div>
    <div id="0_2">content</div>
    <div id="0_3">content</div>

    <div id="1_0">content</div>
    <div id="1_1"></div>
    <div id="1_2"></div>
    <div id="1_3"></div>

    <div id="2_0"></div>
    <div id="2_1"></div>
    <div id="2_2"></div>
    <div id="2_3"></div>

    <div id="3_0"></div>
    <div id="3_1"></div>
    <div id="3_2"></div>
    <div id="3_3"></div>
  </section>
</div>

或通过向所有 div 添加一个类 .content 来使用 css：

.content{
height: 10px;
width:10px;
}

【讨论】：

或section>div { height: 10px } - 不需要宽度，不需要类
是的，除非您有其他部分将 div 作为直接子级，否则它会中断
好吧，那么#playGrid>section>div:p 不能有多个#playGrid:p

【解决方案3】：

这样的事情应该可以工作。另外，请确保您的脚本是在页面加载之后执行的，而不是之前。在<script> 元素上使用defer 标签或将<script> 元素移动到正文的末尾。

[ ...document.querySelectorAll('#playGrid section div') ].forEach((div) => {
   div.addEventListener('click', (event) => {
      alert(event.currentTarget.id);
   });
});

【讨论】：