JavaScript | Как получить значения из класса для HTML-элемента?

JavaScript | Как получить значения из класса для HTML-элемента?

Есть HTML-разметка:

<body>
   <h1 class="zagolovok nomer odin">Как получить значения атрибута HTML-элемента?</h1>
</body>

Мы хотим для заголовка h1 получить список всех значений класса — «zagolovok«, «nomer«, «odin»

 

Шаг № 1 — Получение элемента h1

Предположим, что у нас «правильный» сайт и заголовок H1 встречается на странице всего 1 раз. Создадим переменную elh1, в которой будем хранить наш заголовок H1 в виде объекта JavaScript. Получим этот элемент <h1>:

var elh1 = document.getElementsByTagName("h1")[0]
Получили элемент h1 с классом - JavaScript
Получили элемент h1 с классом — JavaScript

 

Шаг № 2 — Получаем список из свойства classList

У элемента(объекта) h1 вызываем получение значения по свойству classList.

elh1.classList

В ответ нам возвращается объект-прототип класса DOMTokenList

["zagolovok", "nomer", "odin", value: "zagolovok nomer odin"]
Получили DOMTokenList для h1 - JavaScript
Получили DOMTokenList для h1 — JavaScript

 

Шаг № 3 — Превращаем DOMTokenList в Array

При помощи оператора spread извлекаем элементы с целочисленными индексами из объекта DOMTokenList

[...elh1.classList]

Теперь это массив, в котором каждое значение класса является отдельным элементом массива. Задача выполнена.

Преобразовали DOMTokenList в Array - JavaScript
Преобразовали DOMTokenList в Array — JavaScript

После преобразования исчезает такой элемент — value: «zagolovok nomer odin«. Остаются только нужные нам значения.

 

Информационные ссылки

Стандарт DOM на русском — Раздел «Атрибут classList» — https://efim360.ru/dom/#dom-element-classlist

Стандарт DOM — Раздел «Interface Element» — https://dom.spec.whatwg.org/#interface-element