Свойства узлов

Свойства и атрибуты

Во время построения DOM-дерева, некоторые стандартные HTML-атрибуты становятся свойствами элементов. Посмотрим на несколько часто использующихся свойств.

• value - содержит текущий текстовый контент элементов форм.

• checked - хранит состояние чекбокса или радиокнопки.

• name - хранит значение, указанное в HTML-атрибуте name.

• src - путь к изображению тега <img>.

Свойство textContent​

elem.textContent возвращает текстовый контент внутри элемента. Доступно для чтения и записи. Не зависимо что будет передано в textContent, данные всегда будут записаны как текст.

Свойство classList​

В свойстве classList хранится объект с методами для работы с классами элемента.

• elem.classList.contains(cls) - возвращает true или false в зависимости от того, есть ли у элемента класс cls.

• elem.classList.add(cls) - добавляет класс cls в список классов элемента.

• elem.classList.remove(cls) - удаляет класс cls из списка классов элемента.

• elem.classList.toggle(cls) - если класса cls нет, то добавляет его, если есть, наоборот удаляет.

• elem.classList.replace(oldClass, newClass) - заменяет существующий класс oldClass на указанный newClass.

Свойство style​

Используется для чтения и изменения инлайновых стилей. Возвращает объект CSSStyleDeclaration, который содержит список всех свойств, определенных только во встроенных стилях элемента, а не весь CSS. При записи свойства записываются в camelCase, то есть background-color превращается в element.style.backgroundColor и т. д.

const button = document.querySelector(".btn");

button.style.backgroundColor = "teal";
button.style.fontSize = "24px";
button.style.textAlign = "center";

console.log(button.style); // inline styles object

На практике стилизация элементов выполняется добавленим CSS-классов. Свойство style используется для добавления каких-то динамических стилей, например во время анимации.

Атрибуты​

DOM-элементам соответствуют HTML-теги у которых есть текстовые атрибуты. Доступ к атрибутам осуществляется при помощи стандартных методов. Эти методы работают со значением, которое находится в HTML.

• elem.hasAttribute(name) - проверяет наличие аттрибута, возвращает true или false.

• elem.getAttribute(name) - получает значение атрибута и возвращает его.

• elem.setAttribute(name, value) - устанавливает атрибут.

• elem.removeAttribute(name) - удаляет атрибут.

• elem.attributes - свойство, возвращает объект всех атрибутов элемента.

data-атрибуты​

Позволяют добавить тегу произвольный атрибут и получить его значение в JavaScript. Эту возможность используют для того, чтобы упростить написание кода, например связать данные и разметку по уникальному идентификатору, указать тип действия кнопки и т. п.

<button type="button" data-action="save">Save</button>
<button type="button" data-action="close">Close</button>

Для получения значения data-атрибута используется свойство dataset, после которого идет имя атрибута. То есть data- отбрасывается, а остальное имя записывается как имя свойства объекта.

const saveBtn = document.querySelector('button[data-action="save"]');
console.log(saveBtn.dataset.action); // "save"

const closeBtn = document.querySelector('button[data-action="close"]');
console.log(closeBtn.dataset.action); // "close"