[Перевод] Как создать элементы HTML с несколькими классами с помощью JavaScript

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

c7596e56daebb5321724e4174e8f4fc0.jpg

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

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

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

foo
bar
baz

Мы можем получить 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:

foo
bar
baz

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

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

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

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

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

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

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

foo
bar
baz

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

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

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

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

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

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

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

foo
bar
baz

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

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

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

Заключение

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

© Habrahabr.ru