Блог

Главная - Вопросы по программированию - Элемент querySelector, у которого нет класса в дереве предков

Элемент querySelector, у которого нет класса в дереве предков

#javascript #dom #queryselector

#javascript #dom #queryselector

Вопрос:

Возможно ли с помощью querySelector выбрать элемент, если у него нет предка с определенным классом.

Например. Выберите все элементы, у которых нет класса «b» на любом уровне их дерева предков:

 <div class="a">
  <span class="element">First</span>
</div>
<div class="b">
  <span class="element">Second</span>
  <div class="c">
    <span class="element">Third</span>
  </div>
</div>

Я хотел бы исключить как второй, так и третий элементы из моего выбора, потому что они оба находятся в div класса «b».

 document.querySelector(':not(.b) > element');
// returns the First and Third (because Third is not a direct child)
  
 document.querySelector(':not(.b) element');
// returns the First and Third (because "c" fulfills the :not selection criteria of not being "b")

Это, очевидно, упрощенный пример. Элементы могут быть вложены на разных уровнях. Но пока у них есть класс «b» где-то в их дереве предков, они должны быть исключены из выборки.

Возможно ли это вообще с помощью querySelector?

Редактировать: я ищу решение, которое использует querySelector самостоятельно, поскольку я использую библиотеку, которая позволяет мне передавать только строку querySelector, и у меня нет доступа к внутреннему коду библиотеки для выполнения дополнительной фильтрации результатов. Кажется, это невозможно.

Ответ №1:

Я думаю, вам следует выбрать все области и отфильтровать их на основе их родителей.

 let elements = document.querySelectorAll('.element');
let selections = [...elements].filter(element => !element.closest(".b"));

Комментарии:

1. Да, я знаю, что существуют другие методы JavaScript, которые могут достичь этого, но я надеялся на строку querySelector, которая могла бы выполнить выбор самостоятельно. Пример кода был просто упрощенным примером. Мой «реальный» код предполагает использование сторонней библиотеки, в которую мне нужно передать строку querySelector.

2. CSS не имеет родительского селектора. Вот почему вы не можете добиться этого так, как хотите. Вы хотите выбрать некоторые элементы, и мой код дает вам их. Я не понимаю, что имеет значение, если вы выбираете одни и те же элементы другим способом. Я думаю, вы должны правильно объяснить это в своем вопросе.

3. Спасибо, БА. Да, я не думал, что это возможно, но не был уверен. Полезно знать. В моем случае это имеет значение, потому что я использую библиотеку, которая позволяет мне передавать только строку querySelector. У меня нет доступа к внутреннему коду библиотеки для выполнения дополнительной фильтрации результатов. Вопрос отредактирован для объяснения причины.