javascript - 如何选择 "sub"元素内的所有 "main"元素

Question

<div class="main">
    <p>I don't want this</p>
    <div class="sub">I want this</div>
</div>

<div class="main">
    <p>I don't want this</p>
    <div class="sub">I want this</div>
</div>

任何人都知道如何选择“主”元素内的所有“子”元素。我试过了 document.getElementsByClassName("main").getElementsByClassName("sub")
但这是行不通的。为了澄清，我想获取“主”类中的所有“子”元素，但不太清楚如何实现。任何帮助将不胜感激

Answer 1

只需将 CSS 选择器与 document.querySelectorAll() 结合使用即可:

var subs = document.querySelectorAll('.main .sub');

但是，您发布的 HTML 并未将 .sub 元素放置在 .main 元素内；他们是 sibling ；在这种情况下:

var subs = document.querySelectorAll('.main + .sub');

或者:

var subs = document.querySelectorAll('.sub');