javascript - QuerySelectorAll 返回超过预期

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>

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

我正在尝试使用 QuerySelectorAll 返回嵌套在“主”div 中的所有“子”div。我目前正在使用

document.querySelectorAll(".main .sub")

但这会返回类名以“sub”开头的所有 div，因此它还会返回类名为“sub second”或“sub third”的 div 是否可以只选择类为“sub”的 div。

我也想点击使用后的结果

document.querySelectorAll(".main .sub").click()

但这会返回一个错误，我认为这是因为

.click()

一次只能处理一个对象。是否可以选择所有类名为“sub”的 div，然后使用类似于

的内容单击它们

.click()

Answer 1

你可以使用这个选择器:

document.querySelectorAll(".main [class='sub']")

您可以按如下方式迭代结果项:

var divs = document.querySelectorAll(".main [class='sub']");

[].forEach.call(divs, function(div) {
  // do whatever
  div.style.color = "red";
});

<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>

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