> For the complete documentation index, see [llms.txt](https://aleksandra-hrevtsova.gitbook.io/senior-front-end-javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aleksandra-hrevtsova.gitbook.io/senior-front-end-javascript/dom/svoistva-uzlov.md).

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

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

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

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

### Свойство `textContent`[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/properties#%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE-textcontent) <a href="#svoistvo-textcontent" id="svoistvo-textcontent"></a>

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

### Свойство `classList`[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/properties#%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE-classlist) <a href="#svoistvo-classlist" id="svoistvo-classlist"></a>

В свойстве `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`[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/properties#%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE-style) <a href="#svoistvo-style" id="svoistvo-style"></a>

Используется для чтения и изменения инлайновых стилей. Возвращает объект `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` используется для добавления каких-то динамических стилей, например во время анимации.

### Атрибуты[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/properties#%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B) <a href="#atributy" id="atributy"></a>

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

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

### data-атрибуты[​](https://goit.global/textbooks/javascript-yk5evp/v2/docs/lesson-11/properties#data-%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D1%8B) <a href="#data-atributy" id="data-atributy"></a>

Позволяют добавить тегу произвольный атрибут и получить его значение в 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"
```