Как использовать метод querySelector для получения HTML элемента, который не имеет определенного класса?

Question

Зигмунд

javascript , html

Как использовать метод querySelector для получения HTML элемента, который не имеет определенного класса?

Как получить элементы с классом "element-1", но без класса "none" в JavaScript? Я пытался использовать следующий код, но он возвращает пустую коллекцию:

```javascript
const elements = document.querySelectorAll('.element-1:not(.none)');
```

Вот пример HTML-разметки, на которой я хочу провести эту операцию:

```html
<div class="container">
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1 none"></div>
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1 none"></div>
</div>
```

Пожалуйста, подскажите, что я делаю не так.

15 октября 2023 г. 16:49

Ответы на вопрос 2

Похожие вопросы

Answer 1

Вы почти верно использовали метод `querySelectorAll`, но у вас неправильно задан селектор `:not(.none)`. Проблема заключается в том, что селектор `:not(.none)` означает "элементы, у которых нет класса none", но у ваших элементов класс "none" установлен в качестве второго класса. Чтобы выбрать элементы с классом "element-1" и без класса "none", вы можете использовать следующий селектор:

```javascript
const elements = document.querySelectorAll('.element-1:not(.none)');
```

Если у вас класс "none" всегда является вторым классом, вы можете использовать селектор `[class^="element-1"]:not([class*=" none"])`. Этот селектор означает "элементы с классом, начинающимся на 'element-1', и без класса, содержащего ' none'".

Вот код, который работает с вашим примером HTML-разметки:

```javascript
const elements = document.querySelectorAll('[class^="element-1"]:not([class*=" none"])');
```

Это должно вернуть вам коллекцию содержащихся в элементе `container` элементов `div` с классом "element-1", но без класса "none".

Answer 2

Внимательно изучите документацию: `document.querySelectorAll(selectors)`.

Хочу обратить ваше внимание на параметр `selectors`. Это строка `DOMString`, которая содержит один или несколько CSS селекторов. Строка должна быть валидным CSS селектором, иначе будет сгенерирована ошибка `SyntaxError`. Если вам нужно найти несколько элементов, то используйте запятую для разделения селекторов.

В данном случае, вам нужно получить список элементов, которые имеют определенный класс, и затем, используя фильтрацию, отсеять те элементы, которые имеют ненужный класс. Вы можете это сделать вручную или с помощью селектора.

Дополнительную информацию вы можете найти по ссылке: [ссылка на документацию](https://developer.mozilla.org/ru/docs/Web/API/Docu...).