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选择器没有标准化的等效项。您必须单独排除#player > div元素，执行document.querySelectorAll('#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并以这种方式排除元素，你仍然会好得多。

Answer 2

使用此选项可删除不需要的元素。

var el = Array.prototype.slice.call(document.querySelectorAll('*'),0)
el.splice(el.indexOf(document.querySelectorAll('html')),1)

将jQuery选择器转换为javascript querySelector

2 个答案: