При написании исходного кода HTML вы можете определить атрибуты для ваших элементов HTML.Затем, как только браузер проанализирует ваш код, будет создан соответствующий узел DOM.Этот узел является объектом, и поэтому он имеет свойства .
Например, этот элемент HTML:
<input type="text" value="Name:">
имеет 2 атрибута (type и value).
После того, как браузер проанализирует этот код, будет создан объект HTMLInputElement , и этот объект будет содержать десятки свойств, таких как: accept, accessKey, align, alt, attribute, autofocus, baseURI, флажок, childElementCount, childNodes, children, classList, className, clientHeight и т. д.
Для данного объекта узла DOM свойства - это свойства этого объекта, а атрибуты - элементы attributesсвойство этого объекта.
Когда для данного элемента HTML создается узел DOM, многие из его свойств относятся к атрибутам с одинаковыми или похожими именами, но это не отношение один-к-одному.Например, для этого элемента HTML:
<input id="the-input" type="text" value="Name:">
соответствующий узел DOM будет иметь свойства id, type и value (среди прочих):
Свойство id является отраженным свойством для атрибута id: получение свойства считывает значение атрибута, а установка свойства записывает значение атрибута.id является отраженным свойством pure , оно не изменяет и не ограничивает значение.
Свойство type является отраженным свойством для атрибута type: получение свойства считывает значение атрибута, а установка свойства записывает значение атрибута.type не является чисто отраженным свойством, поскольку оно ограничено известными значениями (например, допустимыми типами ввода).Если у вас было <input type="foo">, то theInput.getAttribute("type") дает вам "foo", а theInput.type дает вам "text".
В отличие от этого свойство value не отражаетатрибут value.Вместо этого это текущее значение входа.Когда пользователь вручную изменяет значение поля ввода, свойство value будет отражать это изменение.Поэтому, если пользователь вводит "John" в поле ввода, тогда:
theInput.value // returns "John"
, тогда как:
theInput.getAttribute('value') // returns "Name:"
Свойство value отражает текст current -content внутри поля ввода, тогда как атрибут value содержит текстовое содержимое initial атрибута value из исходного кода HTML.
Так что если вы хотите знать, чтов настоящее время внутри текстового поля, прочитайте свойство.Однако если вы хотите узнать, какое было начальное значение текстового поля, прочитайте атрибут.Или вы можете использовать свойство defaultValue, которое является чистым отражением атрибута value:
theInput.value // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue // returns "Name:"
Существует несколько свойств, которые непосредственно отражают их атрибут (rel, id), некоторые являются прямыми отражениями с немного отличающимися именами (htmlFor отражает атрибут for, className отражает атрибут class), многие отражают их атрибут, но с ограничениями / модификациями (src, href, disabled, multiple) и т. Д. Спецификация охватывает различные виды отражения.