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

Question

使用以下 HTML，如何仅选择父级的所有 div，但带有属性的 div 除外 -class="first"及其使用 JavaScript 的子级？

换句话说，在调用查询后，我想获得一个包含以下 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至少，如果不是更直接的话）。因此，您可以使用带有子组合器的选择器和您不想要:not的.first元素的子句：

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

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

例子：

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

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);
});

Answer 2

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

普通 JavaScript：

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

jQuery：

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

在上面的示例中，我假设这些 div 是该元素的直接子元素body，但如果它们不是，您可以使用其父元素的idor来代替：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对于主体#container和.container容器 div）。第一个选择器下方的其他元素附加级别将被忽略（例如<div class="header">Third</div>等）。

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

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