При написании исходного кода HTML вы можете определить атрибуты ваших элементов HTML. Затем, как только браузер проанализирует ваш код, будет создан соответствующий узел DOM. Этот узел является объектом, и поэтому у него есть свойства .
Например, этот элемент HTML:
<input type="text" value="Name:">
имеет 2 атрибута ( typeи value).
После того, как браузер проанализирует этот код, будет создан объект HTMLInputElement , и этот объект будет содержать десятки свойств, таких как: accept, accessKey, align, alt, атрибуты, автофокус, baseURI, флажок, childElementCount, childNodes, children, classList, className, высота клиента и т. д.
Для данного объекта узла DOM свойства - это свойства этого объекта, а атрибуты - это элементы attributesсвойства этого объекта.
Когда узел DOM создается для данного элемента HTML, многие его свойства относятся к атрибутам с одинаковыми или похожими именами, но это не отношение один к одному. Например, для этого элемента HTML:
<input id="the-input" type="text" value="Name:">
соответствующий DOM - узел будет иметь id, typeи valueсвойство (среди прочих):
idСвойство отражено свойство для idатрибута: Получение свойства считывает значение атрибута, и установив свойство записывает значение атрибута. idявляется чисто отраженным свойством, оно не изменяет и не ограничивает значение.
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Свойство отражает текущее текстовое содержимое внутри-поле ввода, в то время как valueатрибут содержит начальный текст-содержимое 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), и т.д. на. Спецификация охватывает различные виды отражения.
