Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Декларативный поиск по DOM-дереву JS: DOM API

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

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

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

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

<p id="content">Это параграф</p>
const el = document.getElementById('content');

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

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

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

// Поиск по всему дереву
// Возвращаются все элементы с таким классом, причем они могут быть совершенно разными
const collection = document.getElementsByClassName('row');

// Этот метод позволяет искать не только в целом документе,
// но и среди потомков любого элемента
el.getElementsByClassName('row');

Поиск по тегу

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

document.getElementsByTagName('span');

// Поиск всех элементов
document.getElementsByTagName('*');

// Поиск среди потомков el
el.getElementsByTagName('span');

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

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

<ul id="menu">
  <li class="odd"><span>Первый</span> пункт</li>
  <li>Второй</li>
  <li class="odd"><span>Третий</span> пункт</li>
</ul>
// Этот код возвращает первый найденный элемент по указанному селектору
// Ищем элемент с id=menu
const ul = document.querySelector('#menu');

// Все спаны, вложенные в теги с классом .odd
const spans = ul.querySelectorAll('.odd > span');

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

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

Предикат matches

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

<p class="font-weight">This is Hexlet!</p>
const el = document.querySelector('p');
el.matches('.unknown-class'); // false
el.matches('.font-weight'); // true

Метод closest

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

<div class="row" id="one">
</div>
<div class="row" id="two">
  <div class="row" id="three">
    <span>where is the closest?</span>
  </div>
</div>
const el = document.querySelector('span');
const ancestor = el.closest('.row');
ancestor.id; // 'three'

Язык XPath

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

<html>
 <body>
    <div>Первый слой
      <span>блок текста в первом слое</span>
    </div>
    <div>Второй слой</div>
    <div>Третий слой
      <span class="text">первый блок в третьем слое</span>
      <span class="text">второй блок в третьем слое</span>
      <span>третий блок в третьем слое</span>
    </div>
    <span>четвертый слой</span>
    <img />
 </body>
</html>

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

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

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


Дополнительные материалы

  1. MDSN — документация по селекторам

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 25 000 ₸ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 14 ноября
профессия
от 39 525 ₸ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 14 ноября
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
Старт 14 ноября

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»