如何使用JavaScript选择除一个元素及其所有子元素之外的所有元素？

Question

使用下面的超文本标记语言，我如何只选择父级别的所有div，除了带有attribute - class="first"的div及其使用JavaScript的子div？

换句话说，在调用一个查询之后，我希望得到一个包含以下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>

Answer 1

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

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>

​

Answer 2

您将需要使用直接子组合器和negation伪类来构建CSS selector。

Vanilla JavaScript：

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

jQuery：

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

在上面的示例中，我假设这些div是body元素的直接子元素，但如果不是，您可以使用其父元素的id或class：

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

将是：

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

和

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

将是：

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

直接子组合符>只选择满足第二个选择器的条件的元素(所有div元素都是div)，并且只比第一个选择器低一级(正文为body，容器div为#container和.container )。忽略第一个选择器以下的其他元素(例如<div class="header">Third</div>等)。

negation伪类接受一个简单的选择器作为参数(在本例中为.first)，并从结果中排除与该选择器匹配的元素。

你可以在这里看到一个演示：http://jsbin.com/puqosimigu/edit?html,js,console