JS: DOM API
2026-02-26 16:30 Diff
https://ru.hexlet.io/courses/js-dom/lessons/search/theory_unit

Как правило, в реальных фронтенд-задачах нужно манипулировать наборами элементов, находящимися где-то глубоко в DOM-дереве. Причем зачастую эти элементы разбросаны по его разным частям. Например, мы можем отметить список файлов на удаление и выполнить это действие. С точки зрения изменения DOM-дерева эта задача сводится к выборке всех элементов, которые представляют файлы с точки зрения визуализации, а также к их последующему удалению.

В такой ситуации ручной проход по дереву окажется крайне утомительным занятием. DOM предлагает сразу несколько способов решения этой задачи, которые мы изучим в этом уроке.

Поиск по идентификатору

Это самый простой вариант поиска:

В соответствии со спецификацией, id обязан быть уникальным на странице, поэтому и метод getElementById() всегда возвращает один элемент. С другой стороны, по случайности в HTML может оказаться несколько тегов с одним id. В такой ситуации браузер вернет первый встреченный элемент.

Поиск по классу

Если нужна обработка сразу нескольких элементов, то больше подойдет поиск по классу:

Поиск по тегу

При необходимости можно искать по тегу. На практике такое встречается нечасто, но знать про этот метод полезно:

Поиск по селектору

Это самый универсальный способ поиска. Напомним, что селектор позволяет получить элемент или несколько элементов независимо от глубины вложенности:

Методы querySelector() и querySelectorAll() можно применять как ко всему документу, так и к конкретному элементу. Как обычно, мы будем искать среди всех потомков.

Другие полезные методы

Предикат matches

Предикат el.matches(css) проверяет, удовлетворяет ли el селектору css:

Метод closest

Метод el.closest(css) ищет ближайший элемент выше по иерархии, удовлетворяющий селектору. Сам элемент тоже анализируется. Если такой элемент найден, то возвращается он, иначе возвращается null:

Язык XPath

Это язык запросов, изначально разработанный для навигации по DOM в XML. Он поддерживается браузерами.

XPath-путь /html/body/*/span/@class будет соответствовать в нем двум элементам исходного документа:

  • <span class="text">первый блок в третьем слое</span>
  • <span class="text">второй блок в третьем слое</span>.

В повседневной практике он практически не встречается при работе с DOM — мы рассмотрели его просто для полноты картины. А вот при работе с XML-документами, XPath – основной способ навигации по документу.