javascript - 将 jQuery 选择器转换为 javascript querySelector

Question

我正在尝试使用 querySelector 复制这个 jQuery 选择器:

$("*:not(#player > div)")

我知道我可以使用 querySelector('*') 选择所有元素，但是如何排除匹配 #player > div 的元素

Answer 1

大多数 jQuery 选择器都可以移植到 querySelector() 或 CSS，但不是全部，因为 jQuery 扩展了某些现有选择器，同时引入了完全非标准的选择器。

在您的特定情况下，与 jQuery 不同，:not() 仅接受 CSS 中的简单选择器。 #player > div 是一个复杂的选择器，由两个简单的选择器和一个组合器组成。有关详细信息，请参阅此问题:

Why is my jQuery :not() selector not working in CSS?

您的 jQuery 选择器没有标准化的等效项。您必须通过执行 document.querySelectorAll('#player > div') 单独排除 #player > div 元素，并从原始集合中删除与该集合匹配的元素元素。

... well, actually , 虽然没有办法在单个复杂选择器中表达 :not(#player > div) ，但由于 > 组合器，它仍然可以枚举所有使用不少于四个 复杂选择器的可能性:

:root, :not(#player) > div, #player > :not(div), :not(#player) > :not(div)

这是一个概念验证:

// The following JS + CSS should give all matching elements a 1px solid red border
$(':not(#player > div)').css('border-color', 'red');

* { margin: 10px; }
html::before { content: 'html - Match'; }
body::before { content: 'body - Match'; }

:root, :not(#player) > div, #player > :not(div), :not(#player) > :not(div) {
  border-style: solid;
  border-width: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>body > p - Match</p>
<div>body > div - Match</div>
<div>
  body > div:not(#player) - Match
  <p>:not(#player) > p - Match</p>
  <div>:not(#player) > div - Match</div>
</div>
<div id=player>
  body > div#player - Match
  <p>#player > p - Match</p>
  <div>
    #player > div - Non-match
    <div>#player > div:not(#player) > div - Match</div>
  </div>
</div>

但您仍然可以更好地选择这些元素并将它们从您的原始集合中删除，如上所述，或者只是捕获一个 matches() polyfill并以这种方式排除元素。