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

Question

使用JavaScript如何选择父级所有的div，除了带有属性 class="first" 和它的子元素？

换句话说，在调用查询后，我想要获得一个数组，其中包含这些div：class="all"、class="second"和class="third"。

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

- user2992672

Answer 1

这些

元素是某个容器的子元素（至少是，如果不是更直接的元素）。因此，您可以使用带有子组合器和: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>

- T.J. Crowder

---

真诚的问题：容器真的需要吗？document.querySelectorAll("div:not(.first)")似乎也能正常工作。 - Gerardo Furtado

@Gerardo Furtado：这将匹配所有内部div以及外部div。不确定提问者是否想要如此庞大的元素集合。另外，它还会匹配.first的子元素——这可能是提问者*不想要的。 - BoltClock

是的，我之所以问这个问题，是因为我认为这个（选择他们所有的孩子）就是他/她想要的......不管怎样，这并不清楚。 - Gerardo Furtado

从问题中可以看出：“我想要获取这些div的数组：class="all"，class="second"和class="third"。” 这表明只需要这三个。 - T.J. Crowder

@T.J.Crowder 是的，你说得对。除此之外，它还匹配了.first的所有子元素，正如@BoltClock所说，这绝对不是OP想要的。 - Gerardo Furtado

Answer 2

您需要使用直接子级组合器和否定伪类来构建您的CSS选择器。

原生JavaScript：

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

jQuery:

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

在上面的例子中，我假设这些div是元素的直接子元素，但如果它们不是，你可以使用它们父级的id或class。

<div id="container">
   //divs here
</div>     

would be:

document.querySelectorAll("#container > div:not(.first)");

and

<div class="container">
   //divs here
</div>     

would be:

document.querySelectorAll(".container > div:not(.first)");

直接子元素组合器>仅选择符合第二个选择器的标准（对于所有div元素为div）并且仅在第一个选择器下面一级的元素（对于body，容器div的#container和.container） 。忽略第一个选择器下面其他级别的元素（例如<div class="header">Third</div>等）。

否定伪类以简单选择器作为参数（在本例中为.first），并从结果中排除匹配该选择器的元素。

您可以在此处查看演示：http://jsbin.com/puqosimigu/edit?html，js，console。

- stephenlcurtis