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

Содержание скрыть

1 Чем отличаются атрибуты и свойства
2 Изменение свойства элементов в JavaScript
3 Кроссбраузерность

Манипуляция элементами DOM-дерева является неотъемлемой составляющей современной веб-разработки. С развитием нативного языка атрибуты и свойства элементов в JavaScript можно изменять не сложнее, чем с помощью 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-дереве останется неизменным. Это зачастую кажется действительно глупым решением, так как реально сбивает с толку.

input.value = 'Всем привет!';
console.log(input.value);

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

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