如何使用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 ，如果不是更直接的东西）。 因此，您可以使用带有子组合子的选择器和您不想要的.first元素的: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

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

香草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>等）。

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

你可以在这里看一个演示： http ： //jsbin.com/puqosimigu/edit？html，js，console