Атрибуты тэга и свойства объекта

Связь атрибутов и свойств

У элемента страницы могут быть атрибуты, которые заданы в тэге элемента. А у DOM-объекта, соответствующего этому элементу, есть свойства. В том числе, у него есть свойства, совпадающие с атрибутами элемента. Если какому-то элементу задан атрибут, то у объекта появляется такое-же свойство. JavaScript позволяет работать и с атрибутами элемента и со свойствами объекта.

Для обращения к атрибутам есть метод getAttribute(), который возвращает значение атрибута и метод setAttribute(), который присваивает новое значение атрибуту.

элемент.getAttribute(атрибут)

элемент.setAttribute(атрибут, значение)

Метод setAttribute() можно использовать для создания нового атрибута и для изменения существующего.

Создадим страницу, добавим на неё элемент и установим ему id. Выведем id через атрибут и через свойство:

HTML код:

<div id="inform">Блок</div>

JavaScript:

let div = document.getElementById('inform');
console.log('Атрибут: ' + div.getAttribute('id'));
console.log('Свойство: ' + div.id);

В основном, атрибут и свойство совпадают, но есть исключения:

• Значением атрибута может быть только строка. Если атрибуту присвоить другой тип данных, то он преобразуется в строку. А свойство может иметь любое значение.
• В имени атрибута регистр символов не имеет значения. А свойство объекта подчинается обычным правилам JavaScript. В имени свойства регистр символов имеет значение.
• Для классов названия атрибута и свойства не совпадают. Атрибут назавается class, а свойство называется className.
• В атрибуте может быть указан относительный путь к файлу, а свойством объекта может быть только абсолютный путь к файлу. Если в атрубуте указан относительный путь, то в свойстве он преобразуется в абсолютный.

Если сравнивать атрибуты и свойства, то атрибуты отображают HTML-код страницы. Атрибут конечно не меняет код страницы, но он существует по его правилам. А объект представляет элемент страницы в таком виде, в котором его видит браузер. Свойства объекта показывают, каким получился элемент в результате работы страницы.

Изменение атрибутов и свойств

Если изменить значение атрибута, то меняется значение соответствующего свойства. В обратную сторону правило тоже работает, но не всегда. В большинстве случаев изменение свойства меняет атрибут. Но есть атрибуты, которые не меняют своё значение при изменении свойства. В основном, это атрибуты, которые есть у элементов формы.

Добавим на страницу элемент, изменим у него класс и посмотрим как изменится свойство:

HTML код:

<p class="art">Текст</p>

JavaScript:

let p = document.querySelector('p');
p.setAttribute('class', 'user');
console.log(p.className);

Измените свойство объекта, поcмотрите, изменится ли атрибут.

Список атрибутов

Свойство attributes содержит список всех атрибутов, которые есть у элемента.

Пример:

HTML код:

<input type="text" name="login">

JavaScript:

let login = document.querySelector('input');
login.setAttribute('size', '20');
console.log(login.attributes);