Question

使用javascript，我希望选择属于类成员的div元素，而不是anther类的成员。在以下示例中，我想选择div元素作为类b的一部分而不在类a中。这应该导致只选择4，因为3是类a的一部分。

<body>
  <div>1<div>
  <div class="a">2</div>
  <div class="a b">3</div>
  <div class="b">4</div>
</body>

Answer 1

您可以使用查询选择器和:not

选择它们

console.log(document.querySelectorAll("div.b:not(.a)"))

    <div class="a">2</div>
    <div class="a b">3</div>
    <div class="b">4</div>

Answer 2

＆＃13;

var matches = document.querySelectorAll('.b:not(.a)');
console.log(matches);

＆＃13;

<div>1<div>
<div class="a">2</div>
<div class="a b">3</div>
<div class="b">4</div>

＆＃13;

结果是div.b，其中包含数字4（节点列表），这适用于所有元素而不仅仅是div。如果您只想在div中工作，只需将选择器更改为div.b:not(.a)

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Answer 3

var has_a = Array.from(document.getElementsByClassName("a"));
var has_b = has_a.filter(e=>!e.classList.contains('b'));

// replace the arrow notation with a lambda if you can't use it

has_b现在是一个包含类a但不包含b类的元素的数组。

如果您无法使用Array.from，请使用循环替换：

var has_a = document.getElementsByClassName("a");
var has_b = [];
for (var i=0; i<has_a.length; ++i) {
    if (!has_a[i].classList.contains('b'))
        has_b.push(has[i]);

选择具有特定类而不是其他类的元素

3 个答案: