Атрибуты и свойства элементов в JavaScript

Термины «атрибуты» и «свойства» элементов в JavaScript зачастую путают друг с другом. На самом деле между ними существует достаточно весомая разница. В чем она заключается? Давайте попробуем разобраться. Манипуляция элементами DOM-дерева является неотъемлемой составляющей современной веб-разработки. С развитием нативного языка атрибуты и их теперь можно изменять не сложнее, чем с помощью jQuery.

Чем отличаются атрибуты и свойства

Эти термины часто используются взаимозаменяемо, но на самом деле — это две разные вещи:

• атрибут: начальное состояние элемента при рендеринге DOM-дерева;
• свойство: текущее состояние DOM-элемента.

В большинстве случаев они синхронизируются автоматически. Например, при использовании setAttribute() для обновления атрибута ID его свойство id тоже обновляется.

<p class="element">Текст</p>
// Присваиваем элемент в переменную
let text = document.querySelector('.element');

// Обновляем ID
text.setAttribute('id', 'first-paragraph');

// Оба варианта выведут в консоль id элемента
let id_1 = text.getAttribute('id');
let id_2 = text.id;

console.log(id_1);
console.log(id_2);

Но изменяемые пользователем свойства формы, такие как value, checked и selected, не синхронизируются автоматически.

Изменение свойств элементов в JavaScript

В примере ниже представлено поле с id greeting. Если пользователь введёт в него что-нибудь, использование метода Element.setAttribute() для обновления value не изменит то, что отображается в DOM-дереве. В результате, свойство value этого элемента тоже останется неизменным.

<label for="greeting">Приветствие</label>
<input type="text" id="greeting">
// Присваиваем инпут в переменную
let input = document.querySelector('#greeting');

// Обновляем value
input.setAttribute('value', 'Привет!');

// При внесении каких-либо изменений в input оба варианта ниже выведут в консоль 'Привет!'
// Если input был обновлен, val_1 вместо этого вернет все, что было введено в поле
let val_1 = input.value;
let val_2 = input.getAttribute('value');

console.log(val_1);
console.log(val_2);

Если же для манипуляции попытаться получить доступ  к value напрямую, это приведёт к обновлению пользовательского интерфейса. Value самого инпута в DOM-дереве останется неизменным. Это зачастую кажется действительно глупым решением, так как реально сбивает с толку.

Читайте также: Малоизвестные атрибуты HTML-элементов.

В тоже время, такой способ позволяет выбирать различные подходы. Все зависит от того, требуется ли перезаписывать обновления на основе вводимых пользователем данных или нет.

Если обновление требуется, но только если пользователь не внес никаких изменений, подойдёт метод Element.setAttribute(). При необходимости перезаписать изменения свойства элементов в JavaScript потребуется обращение к value.

Кроссбраузерность

Метод Element.setAttribute() уже давно поддерживается всеми популярными браузерами.