Связь атрибутов HTML и DOM-свойств в JavaScript

В этом руководстве вы узнаете о взаимосвязи между атрибутами HTML и свойствами объекта DOM в JavaScript.

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

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

<input type="text" id="username">

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

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

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

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

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

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

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

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

<input type="text" id="username" secured="true">

В этом примере secured — это нестандартный атрибут:

let input = document.querySelector('#username');
console.log(input.secured); // undefined

Методы атрибутов

Для доступа как к стандартным, так и к нестандартным атрибутам используются следующие методы:

• element.getAttribute(name) – получить значение атрибута.
• element.setAttribute(name, value) – установить значение для атрибута.
• element.hasAttribute(name) — проверить наличие атрибута.
• element.removeAttribute(name) – удалить атрибут.

element.attributes

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

let input = document.querySelector('#username');
for (let attr of input.attributes) {
    console.log(`$ {
        attr.name
    } = $ {
        attr.value
    }`)
}

Выход:

type = text
id = username
secure = true

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

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

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

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

<input type="text" id="username" tabindex="1">

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

let input = document.querySelector('#username');

// attribute -> property
input.setAttribute('tabindex', 2);
console.log(input.tabIndex);  // 2


// property -> attribute
input.tabIndex = 3;
console.log(input.getAttribute('tabIndex')); // 3

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

let input = document.querySelector('#username');

// attribute -> property: OK
input.setAttribute('value','guest');
console.log(input.value);  // guest


// property -> attribute: doesn't change
input.value = 'admin';
console.log(input.getAttribute('value')); // guest

Свойства DOM типизированы

Значение атрибута всегда является строкой. Однако, когда атрибут преобразуется в свойство объекта DOM, значение свойства может быть строкой, логическим значением, объектом и т. д.

Следующий элемент checkbox имеет атрибут checked и преобразуется его в свойство, это логическое значение:

<input type="checkbox" id="chkAccept" checked> Accept

let checkbox = document.querySelector('#chkAccept');
console.log(checkbox.checked); // true

Ниже показан элемент input с атрибутом style :

<input type="password" id="password" style="color:red;with:100%">

Атрибут style — это строка, а свойство style — объект:

let input = document.querySelector('#password');

let styleAttr = input.getAttribute('style');
console.log(styleAttr);

console.dir(input.style);

Выход:

[object CSSStyleDeclaration]

Атрибуты data-*

Если вы хотите добавить к элементу настраиваемый атрибут, вы должны добавить к нему префикс data- — например, data-secured, поскольку все атрибуты начинаются с data- — зарезервированы для использования разработчиком.

Чтобы получить доступ к атрибутам data-*, вы можете использовать свойство dataset. Например, у нас есть следующий элемент div с пользовательскими атрибутами:

<div id="main" data-progress="pending" data-value="10%"></div>

Ниже показано, как получить доступ к атрибутам data-* через свойство dataset :

let bar = document.querySelector('#main');
console.log(bar.dataset);

Выход:

[object DOMStringMap] {
    progress: "pending",
    value: "10%"
}

Заключение

• Атрибуты указываются в элементах HTML.
• Свойства — это указанные объекты DOM.
• Атрибуты преобразуются в свойства соответственно.
• Используйте свойство element.attributes для доступа к стандартным и пользовательским атрибутам элемента.
• Используйте свойство element.dataset для доступа к атрибутам data-*.