Что такое DOM и выбор элементов

DOM в JavaScript: что такое Document Object Model, как устроено дерево элементов и как выбирать элементы через querySelector, getElementById и другие методы.

DOM (Document Object Model) — программный интерфейс, через который JavaScript видит и изменяет HTML-страницу. Каждый тег становится объектом (узлом) в дереве; браузер строит это дерево при загрузке страницы.

Структура дерева DOM

Корень дерева — объект document. Вся страница доступна через него.

// document — входная точка
console.log(document.title);       // заголовок страницы
console.log(document.body);        // элемент <body>
console.log(document.URL);         // URL текущей страницы

querySelector и querySelectorAll

Самые универсальные методы — принимают любой CSS-селектор.

// один элемент (первый, который найдёт)
const title = document.querySelector('h1');
const btn = document.querySelector('.btn-primary');
const input = document.querySelector('#email');

// все подходящие элементы — возвращает NodeList
const items = document.querySelectorAll('li');
console.log(items.length); // количество <li> на странице

// перебор через forEach
items.forEach(item => {
  console.log(item.textContent);
});

getElementById и getElementsByClassName

Классические методы — немного быстрее, но менее гибкие.

// по id — возвращает один элемент или null
const header = document.getElementById('main-header');

// по классу — возвращает HTMLCollection (живая коллекция)
const cards = document.getElementsByClassName('card');
console.log(cards.length);

// по тегу
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length);

Навигация по дереву

От найденного элемента можно перемещаться по дереву к родителям, детям и соседям.

const list = document.querySelector('ul');

console.log(list.parentElement);        // родитель
console.log(list.children);             // дочерние элементы (HTMLCollection)
console.log(list.firstElementChild);    // первый дочерний
console.log(list.lastElementChild);     // последний дочерний
console.log(list.nextElementSibling);   // следующий сосед

Проверка наличия элемента

querySelector вернёт null, если элемент не найден. Всегда проверяйте это перед обращением к свойствам.

const modal = document.querySelector('.modal');

if (modal) {
  console.log('Модалка найдена');
} else {
  console.log('Модалки нет на странице');
}

// или через опциональную цепочку
const text = document.querySelector('.hero')?.textContent;
console.log(text); // undefined, если .hero не существует

Коротко

DOM — дерево узлов, корень — объект document.
querySelector(selector) — один элемент по CSS-селектору (или null).
querySelectorAll(selector) — NodeList всех подходящих элементов.
Перед обращением к методам найденного элемента всегда проверяйте, что он не null.