javascript - 在 vanilla JS 中，如何将 querySelectorAll 与 2 个伪选择器一起使用？

Question

我正在将一些 jQuery 重写为 vanilla JS - 它看起来像这样:

$('.main-container').children('.module:has(a)').not('#promo');

我尝试过的:

document.querySelectorAll('.main-container .module:has(a):not(#promo)');

但是在一个语句中使用两个伪选择器让我感到困惑。仅使用 :not(#promo) 选择器就可以正常工作:

document.querySelectorAll('.main-container .module:not(#promo)');

但是当我尝试添加 :has(a) 时，事情就崩溃了。我错过了什么？

Answer 1

像这样重新排列选择器:

var modules = document.querySelectorAll('.main .module:not(#exclude)');

然后对 .module 进行 filter() ，该 .contains(a)

查看演示并让我知道 HTML 是否正确，因为它尚未发布

演示

应排除索引 2、5 和 9

var modules = Array.from(document.querySelectorAll('.main .module:not(#exclude)'));

var hasA = modules.filter(function(module, index, hasA) {
  let a = module.querySelector('a');
  return module.contains(a);
});

hasA.map(function(module, index, hasA) {
  module.insertAdjacentText('beforeend', ' INCLUDED');
  return console.log(`module ${index}: ${module.textContent}`);
});

.as-console-wrapper {
  width: 60%;
  margin-left: 40%;
  min-height: 100%;
}

<ol class='main' start='0'>
  <li class='module'><a href='#/'>LINK</a></li>
  <li class='module'><a href='#/'>LINK</a></li>
  <li id='exclude' class='module'>
    <a href='#/'>LINK</a>
  </li>
  <li class='module'><a href='#/'>LINK</a></li>
  <li class='module'><a href='#/'>LINK</a></li>
  <li class='component'>
    <a href='#/'>LINK</a>
  </li>
  <li class='module'><a href='#/'>LINK</a></li>
  <li class='module'><a href='#/'>LINK</a></li>
  <li id='include' class='module'>
    <a href='#/'>LINK</a>
  </li>
  <li class='module'>NO LINK</li>
</ol>