Статья

Foops 19 Июня

📘 Урок 5: Навигация по DOM — родительские, дочерние и соседние элементы в jQuery

Цель: изучить методы jQuery для перемещения по дереву DOM — вверх к родителям, вниз к потомкам и в стороны к соседним элементам. Это важно для работы с вложенными структурами, например, списками, таблицами, блоками с карточками и т. д.

🔹 Что такое DOM?

DOM (Document Object Model) — это иерархическая структура HTML-документа. Каждый HTML-элемент — это узел дерева.

jQuery даёт мощные инструменты для навигации по этому дереву: чтобы найти нужный элемент не напрямую по селектору, а относительно другого — например:

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

🔸 Основные методы навигации

Метод	Чтоделает
`.parent()`	Получить одного родителя
`.parents()`	Получить всех родителей вверх по дереву
`.children()`	Получить всех прямых потомков
`.find()`	Найти всех потомков по селектору
`.siblings()`	Получить всех соседей элемента
`.next()`	Следующий сосед
`.prev()`	Предыдущий сосед
`.closest()`	Найти ближайшего родителя по селектору

🔸 Работа с родителями

`parent()`

Получает одного родителя элемента:

$('#text').parent().css('border', '1px solid red');

📌 Пример:

<div class="box">
  <p id="text">Абзац</p>
</div>

Тогда $('#text').parent() выберет .box.

`parents()`

Возвращает всех родителей до <html>:

$('#text').parents().addClass('ancestor');

Можно ограничить:

$('#text').parents('.container');

`closest()`

Ищет первого родителя, подходящего под селектор:

$('#text').closest('.card').css('background', '#eee');

Полезно для делегирования событий и локального поиска.

🔸 Работа с потомками

`children()`

Находит прямых потомков:

$('.list').children().css('color', 'blue');

Можно указать фильтр:

$('.list').children('li.active');

`find()`

Находит всех потомков по селектору (вложенно):

$('.form').find('input[type="text"]').val('Пример');

📌 Разница:

children() — только 1 уровень вниз.
find() — все уровни вниз.

🔸 Соседние элементы

`siblings()`

Получает всех братьев/сестёр элемента:

$('.selected').siblings().removeClass('highlight');

`next()` и `prev()`

next() — сосед впереди, prev() — сосед позади:

$('#current').next().css('font-weight', 'bold');
$('#current').prev().css('opacity', 0.5);

🔸 Примеры на практике

📦 Пример 1: Подсветка строки таблицы при наведении

<table>
  <tr><td>Первая</td></tr>
  <tr class="target"><td>Вторая</td></tr>
  <tr><td>Третья</td></tr>
</table>

<script>
  $('.target').hover(
    function() {
      $(this).siblings().css('opacity', 0.5);
    },
    function() {
      $(this).siblings().css('opacity', 1);
    }
  );
</script>

📦 Пример 2: Найти родителя по селектору

<div class="card">
  <div class="content">
    <button class="like">Like</button>
  </div>
</div>

<script>
  $('.like').click(function() {
    $(this).closest('.card').toggleClass('liked');
  });
</script>

🔸 Цепочка методов (chaining)

В jQuery можно вызывать методы подряд:

$('#block')
  .parent()
  .css('border', '1px solid blue')
  .children('p')
  .text('Новый текст');

Это удобно, читаемо и экономит строки кода.

🔸 Частые ошибки

❌ Ошибка: использование `children()` вместо `find()`

$('.container').children('.target'); // только прямые дети
$('.container').find('.target'); // любые вложенные

❌ Использование `parents()` без фильтра

Это может вернуть слишком много элементов. Лучше использовать closest() или ограничить:

$(this).parents('.wrapper:first'); // только ближайший

📋 Упражнения

Найди ближайший родитель элемента .delete с классом .item и удали его.
Для всех .card, добавь класс .selected их последнему дочернему элементу.
По нажатию на .next-btn выбери следующий .slide и покажи его.
Отобрази всех родителей элемента #comment в консоли.

📌 Заключение

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

Jquery

+ Читать