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