Перевести селектор jQuery на javascript querySelector

98
5

Я пытаюсь реплицировать этот селектор jQuery с помощью querySelector:


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

Я знаю, что я могу выбрать все элементы с помощью querySelector('*'), но как я могу исключить элементы, соответствующие #player > div

спросил(а) 2021-01-25T17:16:11+03:00 4 месяца, 2 недели назад
1
Решение
88

Большинство селекторов jQuery можно портировать на querySelector() или CSS, но не все из них, поскольку jQuery расширяет некоторые существующие, а также полностью вводит нестандартные селектор.


В вашем конкретном случае, в отличие от jQuery, :not() принимает только простой селектор в CSS. #player > div - сложный селектор, состоящий из двух простых селекторов и комбинатора. См. Этот вопрос для деталей:


Почему мой jQuery: not() не работает в CSS?


Нет стандартизованного эквивалента для вашего селектора jQuery. Вам нужно будет исключить элементы #player > div отдельно, выполнив document.querySelectorAll('#player > div') и удалив элементы, соответствующие этому набору из исходного набора элементов.


... ну, на самом деле, в то время как нет способа выразить :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 и исключая элементы таким образом.

ответил(а) 2021-01-25T17:16:11+03:00 4 месяца, 2 недели назад
45

Используйте это, чтобы удалить ненужные элементы.

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

ответил(а) 2021-01-25T17:16:11+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема