В этой статье мы рассмотрим, как получить элементы HTML с несколькими классами с помощью JavaScript.

Как получить элементы HTML с двумя классами

Чтобы получить элементы HTML с обоими классами, мы можем использовать методы getElementsByClassName или querySelectorAll.

Например, если у нас такой код HTML:

<div class='class1'>
  foo
</div>
<div class='class2'>
  bar
</div>
<div class='class1 class2'>
  baz
</div>

Мы можем получить div с текстом ‘baz’, написав следующее:

const list1 = document.getElementsByClassName("class1 class2");
const list2 = document.querySelectorAll(".class1.class2");
console.log(list1)
console.log(list2)

Мы вызываем getElementsByClassName с 'class1 class2', чтобы получить div, причем у нас есть как class1, так и class2.

Аналогично можно поступить с querySelectorAll, используя CSS-селектор “.class1.class2”.

Таким образом, list1 – это HTMLCollection с 3-м div.

А list2  – это NodeList с 3-м div.

Как получить элементы HTML с как минимум одним классом

Мы можем получить элементы HTML с как минимум одним классом, используя метод querySelector.

Например, если у нас следующий код HTML:

<div class='class1'>
  foo
</div>
<div class='class2'>
  bar
</div>
<div class='class1 class2'>
  baz
</div>

Мы можем написать:

const list = document.querySelectorAll(".class1,.class2");
console.log(list)

Мы используем “.class1,.class2” с querySelectorAll, чтобы получить элементы с class1 или class2 или с обоими в качестве класса.

Таким образом, list – это NodeList со всеми тремя элементами.

Как получить элементы HTML с одним классом, но не двумя

Мы можем использовать querySelector, чтобы получить элементы HTML с одним классом, но не двумя.

Например, у нас есть следующий код HTML:

<div class='class1'>
  foo
</div>
<div class='class2'>
  bar
</div>
<div class='class1 class2'>
  baz
</div>

Тогда мы пишем:

const list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");
console.log(list)

Мы используем псевдоселектор :not чтобы исключить class2 с class1 и class1 с class2

Таким образом, list – это NodeList с двумя первыми div.

Как получить элементы HTML без классов или только с одним классом

Чтобы получить все элементы без классов или только с одним классом, мы снова можем использовать псевдоселектор :not.

Например, у нас есть следующий код HTML:

<div class='class1'>
  foo
</div>
<div class='class2'>
  bar
</div>
<div class='class1 class2'>
  baz
</div>

И мы можем написать:

const list = document.querySelectorAll(":not(.class1),:not(.class2)");
console.log(list)

чтобы выбрать что-либо, кроме div с class1 или class2.

Заключение

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

Комментарии (5)


  1. pavel_kah
    13.09.2022 09:29
    +1

    А причем тут создание, стесянюсь спросить?


  1. BetsuNo
    13.09.2022 09:35
    +12

    Россельхозбанк продолжает радовать содержательными и интересным статьями. /s


    1. bay73
      13.09.2022 09:37
      +4

      Ага, кажется уже понятно в какой банк свои деньги отдавать точно не стоит :)))


  1. CALLlA
    13.09.2022 15:49
    +4

    4 дня назад увидел переводную статью банка о UseEffect https://habr.com/ru/company/rshb/blog/687364/

    В комментарии спросил, нет ли ошибки в одном из пунктов. По отсутствию реакции и на другие комментарии понял, что проблема в бюджете.

    Банк выделил бюджет только на перевод нескольких материалов. Не назову даже это рядом статей, т.к. это хаотично надерганные материалы невысокого качества, причем с ошибками в оригинальных текстах. Бюджета на вычитку специалистом, а также на какой-то фидбек не нашлось.

    В чем выгода от публикации этих переводов для банка? Если ставилась задача повышения своего HR-брэнда в глазах IT-сообщества, то скорее наоборот показали, что ни обратной связи, ни толковых специалистов по фронту там ожидать не стоит. А ведь можно же было в этих статьях хотя бы попытаться показать себя "фронтовикам" с лучшей стороны. Но для этого нужен был не копеечный перевод, а подключение толковых технарей, которые бы рассказали, что вот на Rect мы реализовали вот это, npm мы используем вот так-то.

    Лично мне более интересен такой pr, а не засорение ленты переводами низкокачественных индусостатей


  1. Metotron0
    13.09.2022 19:19
    +3

    Это же просто перечисление CSS-селекторов. Статья сводится к тому, что в querySelector можно писать селекторы. Ну да, это так, он для этого и нужен.