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

1. Свойства

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

• hidden - контролирует видимость элемента.

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

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

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

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

Ссылка на пример в Codepen.io

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

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

Ссылка на пример в Codepen.io

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 нет - добавляет его, если есть- удаляет

Ссылка на пример в Codepen.io

2. Атрибуты

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

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

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

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

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

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

Ссылка на пример в Codepen.io

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

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

Ссылка на пример в Codepen.io

How You Can Use HTML5 Custom Data Attributes and Why