Декларативный поиск по 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');

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

Наиболее универсальным способом поиска является поиск по селектору. Напомню, что селектор — это правило, позволяющее описать набор элементов в DOM-дереве.

<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 – основной способ навигации по документу.

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

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

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

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

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

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

Об обучении на Хекслете

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Урок «Как эффективно учиться на Хекслете»
Вебинар «Как самостоятельно учиться»

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

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

Получить доступ

130

курсов

900

упражнений

2000+

часов теории

3200

тестов