1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Как правило, в реальных фронтенд-задачах нужно манипулировать наборами элементов, находящимися где-то глубоко в DOM-дереве. Причем зачастую эти элементы разбросаны по его разным частям. Например, мы можем отметить список файлов на удаление и выполнить это действие. С точки зрения изменения DOM-дерева эта задача сводится к выборке всех элементов, которые представляют файлы с точки зрения визуализации, а также к их последующему удалению.</p>
1
<p>Как правило, в реальных фронтенд-задачах нужно манипулировать наборами элементов, находящимися где-то глубоко в DOM-дереве. Причем зачастую эти элементы разбросаны по его разным частям. Например, мы можем отметить список файлов на удаление и выполнить это действие. С точки зрения изменения DOM-дерева эта задача сводится к выборке всех элементов, которые представляют файлы с точки зрения визуализации, а также к их последующему удалению.</p>
2
<p>В такой ситуации ручной проход по дереву окажется крайне утомительным занятием. DOM предлагает сразу несколько способов решения этой задачи, которые мы изучим в этом уроке.</p>
2
<p>В такой ситуации ручной проход по дереву окажется крайне утомительным занятием. DOM предлагает сразу несколько способов решения этой задачи, которые мы изучим в этом уроке.</p>
3
<h2>Поиск по идентификатору</h2>
3
<h2>Поиск по идентификатору</h2>
4
<p>Это самый простой вариант поиска:</p>
4
<p>Это самый простой вариант поиска:</p>
5
<p>В соответствии со спецификацией, id обязан быть уникальным на странице, поэтому и метод getElementById() всегда возвращает один элемент. С другой стороны, по случайности в HTML может оказаться несколько тегов с одним id. В такой ситуации браузер вернет первый встреченный элемент.</p>
5
<p>В соответствии со спецификацией, id обязан быть уникальным на странице, поэтому и метод getElementById() всегда возвращает один элемент. С другой стороны, по случайности в HTML может оказаться несколько тегов с одним id. В такой ситуации браузер вернет первый встреченный элемент.</p>
6
<h2>Поиск по классу</h2>
6
<h2>Поиск по классу</h2>
7
<p>Если нужна обработка сразу нескольких элементов, то больше подойдет поиск по классу:</p>
7
<p>Если нужна обработка сразу нескольких элементов, то больше подойдет поиск по классу:</p>
8
<h2>Поиск по тегу</h2>
8
<h2>Поиск по тегу</h2>
9
-
<p>При необходимости можно искать по тегу. На ��рактике такое встречается нечасто, но знать про этот метод полезно:</p>
9
+
<p>При необходимости можно искать по тегу. На практике такое встречается нечасто, но знать про этот метод полезно:</p>
10
<h2>Поиск по селектору</h2>
10
<h2>Поиск по селектору</h2>
11
<p>Это самый универсальный способ поиска. Напомним, что селектор позволяет получить элемент или несколько элементов независимо от глубины вложенности:</p>
11
<p>Это самый универсальный способ поиска. Напомним, что селектор позволяет получить элемент или несколько элементов независимо от глубины вложенности:</p>
12
<p>Методы querySelector() и querySelectorAll() можно применять как ко всему документу, так и к конкретному элементу. Как обычно, мы будем искать среди всех потомков.</p>
12
<p>Методы querySelector() и querySelectorAll() можно применять как ко всему документу, так и к конкретному элементу. Как обычно, мы будем искать среди всех потомков.</p>
13
<h2>Другие полезные методы</h2>
13
<h2>Другие полезные методы</h2>
14
<h3>Предикат matches</h3>
14
<h3>Предикат matches</h3>
15
<p>Предикат el.matches(css) проверяет, удовлетворяет ли el селектору css:</p>
15
<p>Предикат el.matches(css) проверяет, удовлетворяет ли el селектору css:</p>
16
<h3>Метод closest</h3>
16
<h3>Метод closest</h3>
17
<p>Метод el.closest(css) ищет ближайший элемент выше по иерархии, удовлетворяющий селектору. Сам элемент тоже анализируется. Если такой элемент найден, то возвращается он, иначе возвращается null:</p>
17
<p>Метод el.closest(css) ищет ближайший элемент выше по иерархии, удовлетворяющий селектору. Сам элемент тоже анализируется. Если такой элемент найден, то возвращается он, иначе возвращается null:</p>
18
<h2>Язык XPath</h2>
18
<h2>Язык XPath</h2>
19
<p>Это язык запросов, изначально разработанный для навигации по DOM в XML. Он поддерживается браузерами.</p>
19
<p>Это язык запросов, изначально разработанный для навигации по DOM в XML. Он поддерживается браузерами.</p>
20
<p>XPath-путь /html/body/*/span/@class будет соответствовать в нем двум элементам исходного документа:</p>
20
<p>XPath-путь /html/body/*/span/@class будет соответствовать в нем двум элементам исходного документа:</p>
21
<ul><li><span class="text">первый блок в третьем слое</span></li>
21
<ul><li><span class="text">первый блок в третьем слое</span></li>
22
<li><span class="text">второй блок в третьем слое</span>.</li>
22
<li><span class="text">второй блок в третьем слое</span>.</li>
23
</ul><p>В повседневной практике он практически не встречается при работе с DOM - мы рассмотрели его просто для полноты картины. А вот при работе с XML-документами, XPath - основной способ навигации по документу.</p>
23
</ul><p>В повседневной практике он практически не встречается при работе с DOM - мы рассмотрели его просто для полноты картины. А вот при работе с XML-документами, XPath - основной способ навигации по документу.</p>