如何在“纯”JS中选择没有父类的元素？

Question

除了包含在 .toc-excluded

我试过了

const headings = document.querySelectorAll(
  ".article--full :not(.toc-excluded) h2, .article--full :not(.toc-excluded) h3"
);
headings.forEach(hd => hd.classList.add("red"))

.red {
  color: red;
}

<div class='article--full'>
  <div>many divs in between</div>
  <div class='toc-excluded'>
    <div>many divs in between</div>
    <h2>h2</h2>
    <h3>h3</h3>
  </div>
  <div>many divs in between</div>
  <div class='manyotherdivs'><h2>h2</h2></div>
   <div class='manyotherdivs'><h3>h3</h3></div>
</div>

Answer 1

:not 的所有语法还没有完全支持，因此最好还是依赖旧的好 JS。正如利亚姆建议的那样，您必须过滤要从列表中排除的元素，如下所示：

const headings = Array.from(
    document.querySelectorAll('.article--full h2, .article--full h3')
  ).filter(el => !el.closest('.toc-excluded'));

headings.forEach(hd => hd.classList.add("red"));

.red {
  color: red;
}

h2,
h3 {
  color: black;
}

<div class="article--full">
  <div>many divs in between</div>
  <div class="toc-excluded">
    <div>many divs in between</div>
    <h2>h2</h2>
    <h3>h3</h3>
  </div>
  <div>many divs in between</div>
  <div class="manyotherdivs">
    <h2>h2</h2>
  </div>
  <div class="manyotherdivs">
    <h3>h3</h3>
  </div>
</div>

返回的NodeList必须在过滤前转换为数组，因为列表本身是只读的，不支持filter方法。 header 元素需要自己的 CSS，否则字体颜色会被继承，不会有任何视觉差异。