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

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