Урок 01

Что такое DOM

DOM (Document Object Model) — представление HTML-документа в виде дерева объектов. Браузер парсит HTML и строит дерево, с которым можно работать через JavaScript.

Дерево DOM

<!DOCTYPE html>
<html>
<head>
    <title>Мой сайт</title>
</head>
<body>
    <h1>Заголовок</h1>
    <p>Текст</p>
</body>
</html>

Превращается в дерево:

document
└── html
    ├── head
    │   └── title → "Мой сайт"
    └── body
        ├── h1 → "Заголовок"
        └── p → "Текст"

document

Точка входа. Глобальный объект, представляющий весь документ.

document.title;       // 'Мой сайт'
document.URL;         // 'https://...'
document.body;        // <body>
document.documentElement; // <html>

Типы узлов

  • Element — HTML-элементы (<div>, <p>)
  • Text — текст внутри элементов
  • Comment — комментарии <!-- -->
  • Document — сам документ

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

const el = document.querySelector('h1');

el.nodeType;      // 1 — Element
el.nodeName;      // 'H1'
el.tagName;       // 'H1'
el.textContent;   // текст без HTML
el.innerHTML;     // HTML внутри
el.outerHTML;     // с самим элементом

Навигация

el.parentElement;        // родитель
el.children;             // дочерние элементы
el.childNodes;           // все узлы, включая текст
el.firstElementChild;    // первый дочерний элемент
el.lastElementChild;     // последний
el.nextElementSibling;   // следующий сосед
el.previousElementSibling; // предыдущий

Живые и статические коллекции

const live = document.getElementsByTagName('div'); // живая
const static = document.querySelectorAll('div');  // статическая

Живая обновляется при изменении DOM. Статическая — нет.

Атрибуты

el.getAttribute('href');
el.setAttribute('href', '/new');
el.removeAttribute('href');
el.hasAttribute('href');

Свойства элемента:

el.id;
el.className;
el.classList;
el.href; // для ссылок

classList

el.classList.add('active');
el.classList.remove('active');
el.classList.toggle('active');
el.classList.contains('active');
el.classList.replace('old', 'new');

data-атрибуты

<div data-user-id="42" data-role="admin"></div>

el.dataset.userId; // '42'
el.dataset.role;   // 'admin'

Каждое data- превращается в свойство dataset в camelCase.

Стили

el.style.color = 'red';
el.style.fontSize = '16px';
el.style.cssText = 'color: red; font-size: 16px';

Свойства в camelCase: font-size → fontSize.

Проверки

el.matches('.active');        // соответствует селектору
el.closest('.container');     // ближайший родитель по селектору
el.contains(other);           // содержит ли узел

Итоги

  • DOM — дерево объектов документа
  • document — точка входа
  • Узлы: element, text, comment
  • Навигация через parentElement, children, nextElementSibling
  • Атрибуты через getAttribute или свойства
  • classList и dataset для классов и data-атрибутов