Как правило, в реальных фронтенд-задачах нужно манипулировать наборами элементов, находящимися где-то глубоко в 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>
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Используйте Хекслет по-максимуму!
- Задавайте вопросы по уроку
- Проверяйте знания в квизах
- Проходите практику прямо в браузере
- Отслеживайте свой прогресс
Зарегистрируйтесь или войдите в свой аккаунт