Advanced Frontend — онлайн-курсы по фронтенд-разработке

В прошлом уроке мы познакомились с объектом document. Теперь разберёмся, как именно через него получить доступ к конкретным элементам страницы.

Что такое DOM

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

Возьмём простой HTML:

<body>
  <header>
    <h1>Санкт-Петербург</h1>
  </header>
  <main>
    <p class="description">Культурная столица России.</p>
  </main>
</body>
html

Браузер строит из него такое дерево:

body
├── header
│   └── h1 — «Санкт-Петербург»
└── main
    └── p.description — «Культурная столица России.»

Каждый узел этого дерева — полноценный JavaScript-объект со своими свойствами и методами. Получив такой объект, мы можем читать его содержимое, менять стили, удалять его или добавлять внутрь новые элементы.

Поиск элементов

document предоставляет несколько методов для поиска элементов в DOM-дереве.

`document.getElementById`

Возвращает элемент по его уникальному id. Если элемента с таким id нет — вернёт null:

const header = document.getElementById('main-header');
console.log(header); // <header id="main-header">...</header>
js

`document.getElementsByClassName`

Возвращает коллекцию всех элементов с указанным классом. Это не массив, а HTMLCollection — похожий объект, но без методов map, filter и т.д.:

const cards = document.getElementsByClassName('card');
console.log(cards.length); // количество найденных элементов
js

`document.querySelector`

Возвращает первый элемент, соответствующий CSS-селектору. Это самый гибкий метод — в качестве аргумента принимает любой валидный CSS-селектор:

const title = document.querySelector('h1');
const firstCard = document.querySelector('.card');
const featuredCard = document.querySelector('.card.featured');
const navLink = document.querySelector('nav a');
js

Если ничего не нашлось — вернёт null. Это важно помнить: попытка обратиться к свойствам null приведёт к ошибке.

`document.querySelectorAll`

Возвращает все элементы, соответствующие CSS-селектору, в виде NodeList. В отличие от HTMLCollection, NodeList поддерживает forEach:

const allCards = document.querySelectorAll('.card');

allCards.forEach((card) => {
  console.log(card);
});
js

Если нужны map или filter — преобразуйте в массив через Array.from:

const cardsArray = Array.from(document.querySelectorAll('.card'));
const texts = cardsArray.map((card) => card.textContent);
js

Какой метод выбрать

На практике чаще всего используют querySelector и querySelectorAll — они гибкие и принимают любые CSS-селекторы. getElementById тоже встречается часто: он чуть быстрее по производительности и явно показывает, что ищем по уникальному идентификатору.

// Современный подход
const hero = document.querySelector('#hero');
const cards = document.querySelectorAll('.attractions .card');
js

Поиск внутри элемента

Методы querySelector и querySelectorAll можно вызывать не только на document, но и на любом найденном элементе. В таком случае поиск ведётся только внутри него:

const section = document.querySelector('.features');
const title = section.querySelector('h2'); // ищет h2 только внутри .features
js

Это удобно и делает код более надёжным — вы точно знаете, в каком контексте ищете.

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

Иногда удобнее не искать элемент с нуля, а перейти к нему от уже найденного. Для этого у каждого DOM-узла есть несколько свойств:

const item = document.querySelector('.feature');

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

В следующем уроке научимся изменять найденные элементы — менять текст, стили, классы и атрибуты.

Доступ к DOM-элементам