Элементы веб-страницы могут содержать в себе атрибуты — сущности, которые добавляют элементу определенную информацию о нем. Благодаря атрибутам, элемент страницы можно привести в конкретное состояние (поставить «галочку» в чекбоксе), сохранить текстовые данные (data-атрибуты), произвести стилизацию с помощью CSS, а также предоставить JavaScript удобный способ воздействовать на элемент. В этой статье мы разберем правила преобразования атрибутов HTML в DOM-свойства при чтении браузером веб-страницы, выявим разницу между атрибутами и свойствами, узнаем, как управлять атрибутами с помощью свойств JavaScript, а также используя getAttribute, setAttribute и другие методы.
Сравнение свойств объекта DOM и атрибутов HTML
Во время загрузки страницы браузер проводит разбор HTML-кода и составляет из его элементов дерево объектов DOM. В процессе такого преобразования атрибуты становятся свойствами DOM-объектов. Имена свойств устанавливаются по следующим правилам:
- если атрибут является стандартным для определенного элемента по спецификации, то объект DOM для этого элемента будет содержать свойство, одноименное этому атрибуту;
- если атрибут нестандартный (его нет в спецификации для конкретного элемента), то соответствующее ему свойство в объекте создаваться не будет;
- значение большинства свойств будет идентично строке, которая является значением соответствующего атрибута;
- атрибут
styleбудет преобразован в свойствоstyle, значением которого будет объектCSSStyleDeclaration; - по причине того, что слово
classзарезервировано в JavaScript, атрибутclass, содержащий имя класса элемента, в объекте будет представлен под другим именем —className; - некоторые атрибуты, которые записываются в теге без значения (то есть имеют пустую строку в качестве значения), в свойстве будут содержать булевый тип (например, теги полей формы
checked,selected,disabledв свойстве объекта DOM будут иметь значение либоtrue, либоfalse).
HTML:
<input type="checkbox" class="someCheckbox" style="opacity: 0.6;" number='3' disabled>
JavaScript:
// Объект DOM
const someCheckbox = document.querySelector('.someCheckbox');
// Атрибут type является стандартным для input
// Значение свойства равно значению атрибута
const someCheckboxType = someCheckbox.type; // 'checkbox'
// Атрибут number нестандартный для input
const someCheckboxNumber = someCheckbox.number; // undefined
// Значение атрибута style — объект CSSStyleDeclaration
const someCheckboxStyle = someCheckbox.style; // CSSStyleDeclaration
// Значение класса извлекается через свойство className
const someCheckboxClass = someCheckbox.className; // 'someCheckbox'
// Атрибут disabled имеет булевое значение true
const someCheckboxDisabled = someCheckbox.disabled; // true Свойства объекта DOM и атрибуты HTML имеют много похожего, но также имеют отличия по двум критериям: тип данных и регистрозависимость. Отобразим эти различия в таблице:
| Атрибут | Свойство | |
| Тип данных | Строка | Нестандартные — любой, для стандартных атрибутов тип описан в спецификации |
| Регистрозависимость | Нет | Да |
Управление атрибутами тегов через JavaScript
После создания DOM-объекта становится возможным управление им из JavaScript. Объект DOM ведет себя, как обычный JavaScript-объект. Манипулируя его свойствами, мы можем влиять на HTML-атрибуты элемента веб-страницы.
В зависимости от типа атрибута, способы взаимодействия с ним через JS могут отличаться. Например, так как для нестандартных атрибутов не создаются свойства в объекте DOM, мы не можем работать со значением этих атрибутов через свойства. Рассмотрим подробнее способы работы со значениями атрибутов:
- через свойства объектов DOM;
- с помощью методов getAttribute, setAttribute, removeAttribute и hasAttribute
- используя свойство attributes.
Управление через свойства объектов DOM
Взаимодействие с атрибутами через DOM-свойства характерно для стандартных атрибутов, то есть тех атрибутов, которые закреплены за своими тегами по спецификации. Обращаясь к свойствам объекта, мы получаем доступ к значению атрибута.
Чтобы получить нужное значение атрибута, нужно просто обратиться к соответствующему свойству. Для записи нового значения — вызываем свойства и через знак «равно» устанавливаем новое.
<div class="message"></div>
// Извлечем элемент с классом message
const element = document.querySelector('.message');
// Получим его класс с помощью соответствующего свойства
const elementClass = element.className; // 'message'
// Запишем новое значение, которое будет содержать дополнительный класс
element.className = 'message message-critical';
// Удалим все классы, присвоив пустую строку
element.className = ''; Управление с помощью методов getAttribute, setAttribute, removeAttribute и hasAttribute
Нестандартные атрибуты недоступны через свойства. В этом случае на помощь приходят специальные методы объекта DOM:
- getAttribute — извлечь значение;
- setAttribute — установить значение;
- hasAttribute — проверить наличие атрибута;
- removeAttribute — удалить атрибут.
Примеры использования методов:
const pairFirst = document.querySelector('#pairFirst');
const pairSecond = document.querySelector('#pairSecond');
// Если у элемента pairSecond есть атрибут handled
// для элемента pairFirst установим атрибут status со значением active
if (pairSecond.hasAttribute('handled')) {
pairFirst.setAttribute('status', 'active');
}
// Скопируем значение атрибута status из pairFirst в pairSecond
const pairFirstStatus = pairFirst.getAttribute('status');
pairSecond.setAttribute('status', pairFirstStatus);
// Удалим у pairFirst атрибут handled
pairFirst.removeAttribute('handled'); Управление с использованием свойства attributes
Свойство attributes получает коллекцию атрибутов определенного элемента. Так как это коллекция, то ее можно перебрать в цикле JavaScript. Каждый объект коллекции содержит свойства name и value, в которых находятся, соответственно, имя и значение атрибутов.
HTML:
<div id="extra" class="common" series="16"></div>
JavaScript:
const extra = document.querySelector('#extra');
// Переберем все атрибуты элемента с идентификатором extra
// и получим их названия и значения
for (let attribute of extra.attributes) {
const attributeName = attribute.name; // id, class, series
const attributeValue = attribute.value; // 'extra', 'common', '16'
} Data-атрибуты и свойство dataset
В HTML существует возможность создавать собственные атрибуты, помимо стандартных. Чтобы быть уверенным в том, что имени создаваемого пользовательского атрибута нет в списке стандартных, при установлении нового атрибута ему добавляется префикс data-. В итоге мы получаем data-атрибут, доступ к которому можно получить через свойство dataset элемента DOM.
Такие атрибуты могут использоваться для хранения и получения каких-либо пользовательской информации. Например, с помощью datа-атрибутов можно создать индикатор выполнения. Ширина элемента, отвечающего за процент заполнения индикатора, будет зависеть от числа, находящего в data-атрибуте этого элемента — data-percentage. Такая зависимость устанавливается в CSS с помощью свойства width с относительной шириной в процентах от ширины всего индикатора. Периодически увеличивая значение атрибута data-percentage через JavaScript, мы создаем эффект заполнения. Периодичность устанавливается методом setInterval.
<!-- Изначально процент заполнения равен нулю -->
<div class="progressBar" id="progressBar">
<div data-percentage="0"></div>
</div> /* Стили самого индикатора */
.progressBar {
width: 500px;
height: 20px;
background: #fff;
border: 2px solid darkblue;
border-radius: 10px;
overflow: hidden;
}
/* Стили элемента заполнения */
.progressBar [data-percentage] {
height: 100%;
background: blue;
} // Получим элемент заполнения
const percentageElem = document.querySelector('#progressBar [data-percentage]');
// Извлечем текущее значение атрибута
const percentageNumCurrent = percentageElem.dataset.percentage;
// Увеличим его
const percentageNumNew = +percentageNumCurrent + 10;
// Обновим значение атрибута в теге
percentageElem.dataset.percentage = percentageNumNew;
// Добавим к полученному числу знак процента
// и обновим ширину элемента заполнения
percentageElem.style.width = percentageNumNew + '%';
// Используя вышеуказанный JS-код с методом setInterval, мы получим работающий индикатор выполнения Вместо свойства dataset, также возможно использовать getAttribute и setAttribute:
// Вместо percentageElem.dataset.percentage = percentageNumNew;
percentageElem.setAttribute('data-percentage', percentageNumNew); Названия data-атрибутов, состоящие из нескольких слов, которые в теге записаны через дефис, в свойстве dataset преобразуются в «верблюжью» нотацию. Атрибут data-user-address будет иметь свойство userAddress, то есть получить доступ к этому свойству можно будет так: dataset.userAddress.