Понимание отношений между атрибутами HTML и свойствами объекта DOM.

Когда веб-браузер загружает HTML-страницу, он создает соответствующие объекты DOM на основе узлов DOM документа.

Например, если страница содержит следующий элемент input :

Например, если страница содержит следующий элемент ввода:

Веб-браузер создаст объект HTMLInputElement .

Элемент input имеет два атрибута:

Атрибут type со значением text.

Атрибут id со значением username.

Сгенерированный объект HTMLInputElement будет иметь соответствующие свойства:

input.type с текстом значения.

input.id со значением username.

Другими словами, веб-браузер автоматически преобразует атрибуты элементов HTML в свойства объектов DOM.

Однако веб-браузер только преобразует стандартные атрибуты в свойства объекта DOM. Стандартные атрибуты элемента перечислены в спецификации элемента.

Сопоставление атрибут-свойство не всегда однозначно. Например:

элемент.атрибуты

Свойство element.attributes предоставляет динамическую коллекцию атрибутов, доступных для определенного элемента. Например:

Вывод:

Обратите внимание, что element.attributes является NamedNodeMap, а не массивом, поэтому у него нет методов массива.

Синхронизация атрибутов и свойств

При изменении стандартного атрибута соответствующее свойство автоматически обновляется с некоторыми исключениями, и наоборот.

Предположим, у вас есть следующий элемент ввода:

В следующем примере показано, как изменение атрибута tabindex распространяется на свойство tabIndex и наоборот.

В следующем примере показано, что изменение атрибута значения отражается в значении;

Завтра продолжим.. Сегодня не очень хорошо себя чувствую.

Спасибо за прочтение.