DOM-свойства и атрибуты

PreviousНавигация по DOM NextСоздание и удаление узлов

Last updated 1 year ago

DOM-свойства и атрибуты

1. Свойства

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

hidden - контролирует видимость элемента.
value - содержит текущий текстовый контент элементов input, select, textarea.
checked - хранит состояние чекбокса или радиокнопки.
name - хранит значение, указанное в HTML-атрибуте name.
src - путь к изображению тега <img>.

1.1. Свойство Node.textContent

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

1.2. Свойство HTMLElement.style

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

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

button.style.backgroundColor = 'teal';
console.log(button.style); // объект инлайн стилей
Copy

1.3. Свойство Element.classList

Объект содержит методы для работы с классами элемента.

elem.classList.contains(cls) - возвращает true или false в зависимости от того, есть ли у элемента класс cls
elem.classList.add(cls) - добавляет класс cls в список классов элемента
elem.classList.remove(cls) - удаляет класс cls из списка классов элемента
elem.classList.replace(oldClass, newClass) - заменяет существующий класс на указанный
elem.classList.toggle(cls) - если класса cls нет - добавляет его, если есть- удаляет

2. Атрибуты

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

elem.hasAttribute(name) - проверяет наличие аттрибута, возвращает true или false
elem.getAttribute(name) - получает значение атрибута и возвращает его
elem.setAttribute(name, value) - устанавливает атрибут
elem.removeAttribute(name) - удаляет атрибут
elem.attributes - свойство, возвращает коллекцию всех атрибутов элемента

2.1. HTML5 data-атрибуты

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