如何通过js查找具有相同类的所有子元素

Question

我想找到具有特定类别的所有元素。我的 HTML 代码：<div class="pb-30 faq" id="faq-1"> <div class="flex flex-row">  <div class="w-20">    <div class="hw-24 lol close" id="test">     </div>   </div> </div><div class="close-dialog lol" id="test-2"> <div class="flex flex-col">    </div>   </div> </div>我想找到带有 class 的元素lol。我可以找到第一个孩子，但找不到另一个。这是我的简单js代码：document.querySelectorAll(".faq").forEach(x => x.addEventListener("click", function(){     faqToggle(this.id)}))function faqToggle(id) {    const clickedFaq = document.querySelectorAll(`div#${id} > div.lol`)    console.log(clickedFaq)}谢谢你的帮助

Answer 1

CSS 中的大于号 ( >) 选择器用于选择具有特定父级的元素。它被称为元素>元素选择器。它也称为子组合选择器，这意味着它仅选择父元素的直接子元素。它看起来只是标记结构的下一层，而不是更深入的部分。不选择不是指定父级的直接子级的元素。

相反，您应该使用 awhite space来匹配元素的所有后代

const clickedFaq = document.querySelectorAll(`div#faq-1 div.lol`);

console.log(clickedFaq)

<div class="pb-30 faq" id="faq-1">

  <div class="flex flex-row">

    <div class="w-20">

      <div class="hw-24 lol close" id="test">

      </div>

    </div>

  </div>

  <div class="close-dialog lol" id="test-2">

    <div class="flex flex-col">

    </div>

  </div>

</div>

Answer 2

您想要使用后代组合器而不是子组合器。

这意味着在选择器中替换>为空格 。

console.log(document.querySelectorAll(".faq .lol"));

 <div class="pb-30 faq" id="faq-1">

   <div class="flex flex-row">

     <div class="w-20">

       <div class="hw-24 lol close" id="test">

         test

       </div>

     </div>

   </div>

   <div class="close-dialog lol" id="test-2">

     test

     <div class="flex flex-col">

     </div>

   </div>

</div>