javascript - 如何使用 JavaScript 选择所有元素，除了一个及其所有子元素？

Question

对于以下 HTML，我如何才能仅在父级选择所有 div，除了具有属性的 div - class="first" 及其使用 JavaScript 的子级？

换句话说，在调用查询后我想得到一个包含这些 div 的数组:class="all"、class="second" 和 类=“第三”。

<div class="all">
    <div class="header">All</div>
    <div class="cell-1"></div>
    <div class="cell-2"></div>
    <div class="cell-3"></div>
    <div class="cell-4"></div>
</div>
<div class="first">
    <div class="header">First</div>
    <div class="cell-1"></div>
    <div class="cell-2"></div>
    <div class="cell-3"></div>
    <div class="cell-4"></div>
</div>
<div class="second">
    <div class="header">Second</div>
    <div class="cell-1"></div>
    <div class="cell-2"></div>
    <div class="cell-3"></div>
    <div class="cell-4"></div>
</div>
<div class="third">
    <div class="header">Third</div>
    <div class="cell-1"></div>
    <div class="cell-2"></div>
    <div class="cell-3"></div>
    <div class="cell-4"></div>
</div>

Answer 1

这些 div 是某个容器的子元素(至少是 body，如果不是更直接的话)。所以你可以使用带有 child combinator 的选择器和一个 :not您不想要的 .first 元素的子句:

var divs = document.querySelectorAll("body > div:not(.first)");

当然，如果 body 不是它们的容器，请将其替换为该元素的选择器。

例子:

var divs = document.querySelectorAll("body > div:not(.first)");
console.log("matching elements: " + divs.length);
Array.prototype.forEach.call(divs, function(div, index) {
  console.log(index + ": " + div.className);
});

<div class="all">
  <div class="header">All</div>
  <div class="cell-1"></div>
  <div class="cell-2"></div>
  <div class="cell-3"></div>
  <div class="cell-4"></div>
</div>
<div class="first">
  <div class="header">First</div>
  <div class="cell-1"></div>
  <div class="cell-2"></div>
  <div class="cell-3"></div>
  <div class="cell-4"></div>
</div>
<div class="second">
  <div class="header">Second</div>
  <div class="cell-1"></div>
  <div class="cell-2"></div>
  <div class="cell-3"></div>
  <div class="cell-4"></div>
</div>
<div class="third">
  <div class="header">Third</div>
  <div class="cell-1"></div>
  <div class="cell-2"></div>
  <div class="cell-3"></div>
  <div class="cell-4"></div>
</div>