HTML атрибуты и DOM свойства
При написании HTML-кода вы можете определить атрибуты HTML элементов. Как только браузер проанализирует ваш код, будет создан соответствующий узел DOM. Этот узел является объектом, и поэтому у него есть свойства.
Рассмотрим следующий HTML элемент.
<input id="name" type="text" value="Вася">После того, как браузер проанализирует этот код, будет создан объект HTMLInputElement:
Созданный объект будет содержать десятки свойств, таких как: accept, accessKey, align, alt, assignedSlot, attributeStyleMap, attributes, autocapitalize, autocomplete, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight и другие.
Для данного объекта свойства - это свойства самого объекта, а атрибуты - это элементы свойства attributes этого объекта.
В данном конеретном случае значение attributes это объект типа NamedNodeMap
{
0: type,
1: value,
length: 2
}Когда для соответствующего HTML элемента будет создан DOM узел, большинству его атрибутов будут сопоставлены свойства с одинаковыми или похожими именами, но это отношение не один к одному. Например, для рассматриваемого input элемента соответствующий DOM узел среди прочих свойств будет иметь:
- id
- type
- value
Свойство id является отраженным (reflected property) для атрибута id: геттер свойства считывает значение атрибута, а сеттер свойства записывает значение атрибута. id является полностью (pure) отраженным свойством.
Аналогично свойство type является отраженным свойством для атрибута type: геттер свойства считывает значение атрибута, а сеттер свойства записывает значение атрибута. Но type не является полностью отраженным свойством, поскольку он ограничен набором значений (text, number, checkbox, radio и другие).
Если задать <input type="foo">, то myInput.getAttribute('type') вернёт "foo", а myInput.type - значение по-умолчанию ("text").
В отличие от id и type, свойство value не отражает атрибут value. Вместо этого оно возвращает текущее значение input'а. Когда пользователь вручную изменяет значение поля ввода, свойство value будет отражать это изменение. Так что, если пользователь вводёт «Маша» в поле ввода, то myInput.value вернёт «Маша», в то время как myInput.getAttribute('value') - значение атрибута («Вася»).
Свойство value отражает текущее текстовое содержимое внутри поля ввода, тогда как атрибут value содержит начальное текстовое содержимое атрибута из исходного кода HTML.
Стоит отметить, что для атрибута value есть полностью отражённое свойство - defaultValue.
Вместо заключения
Значение HTML атрибута указывает начальное значение;
Значение DOM свойства является текущим значением;
Атрибуты инициализируют DOM свойства.