[Перевод] Как создать элементы HTML с несколькими классами с помощью JavaScript
В этой статье мы рассмотрим, как создать элементы HTML с несколькими классами с помощью JavaScript.
Как создать элементы 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, чтобы выбрать элемент с любыми классами, которые нам нужны.
