Получение делений по классам с помощью querySelector () и исключение другого класса

Question

Я пытаюсь просто получить все первые дивы, извлекая вторые дивы:

<div class="_5pcr userContentWrapper">
<div class="_5pcr userContentWrapper _4nef">

Я искал и понял, что функция querySelector должна выполнять свою работу.Однако я попробовал это с несколькими входами, но все они приводят к пустому списку.Если я использую функцию DOM getElementsByClass, она работает, но затем, конечно, я получил все div, а также вторые, которые мне не нужны.Вот вызовы функций querySelector, которые я пробовал:

listOfPosterName = document.querySelectorAll('div._5pcr userContentWrapper:not(._4nef)');
listOfPosterName = document.querySelectorAll('DIV._5pcr userContentWrapper');
listOfPosterName = document.querySelectorAll('_5pcr userContentWrapper:not(_4nef)');
listOfPosterName = document.querySelectorAll('DIV.userContentWrapper:not(_4nef)');

Я даже пытался получить тот же результат, что и с "getElementsByClass ('_ 5pcr userContentWrapper')" с этим:

listOfPosterName = document.querySelectorAll('_5pcr userContentWrapper');

Это также не сработало.Я думал, что это проблема из-за пробела между классами, но я также проверил это с одним классом.

Я действительно ценю помощь!

Answer 1

Вы неправильно пишете селекторы.

Когда вы хотите выбрать элемент, имеющий несколько классов, вы должны сделать:

document.querySelectorAll('.class1.class2.class3');

Когда вы оставляете символ space вселектор - он становится так называемым селектором descendant.Пример:

<div class="class1">
  <p class="class2"></p>
</div>

В этом случае class2 можно выбрать с помощью селектора descendant:

document.querySelector('.class1 .class2');

Ваш фиксированный пример может выглядеть так:

<div class="_5pcr userContentWrapper">
<div class="_5pcr userContentWrapper _4nef">

document.querySelectorAll('._5pcr.userContentWrapper:not(._4nef)');

Answer 2

querySelector() работает просто отлично, но вы должны правильно передать селектор.Несколько классов должны объединяться вместе, а не разделяться пробелами, как в HTML.

document.querySelector("._5pcr.userContentWrapper").classList.add("selected");

.selected { background-color:yellow; }

<div class="_5pcr userContentWrapper">Me</div>
<div class="_5pcr userContentWrapper _4nef">Not Me</div>

Answer 3

Ваша проблема просто в размещении слишком большого количества места, где это не нужно:

  listOfPosterName = document.querySelectorAll('._5pcr.userContentWrapper:not(._4nef)');