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

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