Обход дерева DOM

jQuery предоставляет удобный и лаконичный способ взаимодействия с деревом DOM. Основная идея библиотеки заключается в упрощении поиска элементов, их обхода, манипуляции и управления событиями.

Выбор элементов

В jQuery выбор элементов осуществляется через функцию $(selector). Селекторы поддерживают все возможности CSS:

// Выбор по тегу
$('div');

// Выбор по классу
$('.active');

// Выбор по идентификатору
$('#header');

// Сочетания селекторов
$('ul li.active');

Результатом является объект jQuery, который может содержать один или несколько элементов. Методы обхода и манипуляции применяются ко всем найденным элементам одновременно.

Обход родителей, потомков и соседей

jQuery обеспечивает удобные методы для навигации по дереву DOM.

Родители и предки

  • .parent() — возвращает непосредственного родителя элемента.
  • .parents() — возвращает всех предков элемента до корня документа.
  • .closest(selector) — ищет ближайшего предка, соответствующего селектору.
$('#item').parent();       // ближайший родитель
$('#item').parents('div'); // все родительские div
$('#item').closest('.container'); // ближайший предок с классом container

Потомки и элементы внутри

  • .children() — возвращает непосредственных детей элемента.
  • .find(selector) — ищет все вложенные элементы, соответствующие селектору.
$('#menu').children();       // прямые дочерние элементы
$('#menu').find('li.active'); // все li с классом active внутри #menu

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

  • .siblings() — возвращает все элементы на том же уровне, кроме самого элемента.
  • .next() — следующий соседний элемент.
  • .prev() — предыдущий соседний элемент.
  • .nextAll() и .prevAll() — все следующие или предыдущие соседи.
$('#current').siblings();   // все элементы на том же уровне
$('#current').next();       // следующий элемент
$('#current').prev();       // предыдущий элемент

Фильтрация и поиск элементов

jQuery позволяет фильтровать набор элементов после выбора:

  • .filter(selector) — оставляет только элементы, соответствующие селектору.
  • .not(selector) — исключает элементы, соответствующие селектору.
  • .eq(index) — выбирает элемент по индексу.
  • .first() и .last() — первый или последний элемент в наборе.
$('li').filter('.active');  // только активные li
$('li').not('.active');     // все кроме активных
$('li').eq(2);              // третий элемент (индексация с нуля)
$('li').first();            // первый элемент
$('li').last();             // последний элемент

Манипуляция с элементами при обходе

Методы обхода часто сочетаются с манипуляцией:

  • .addClass('name') / .removeClass('name') — управление классами.
  • .attr('attribute', 'value') / .removeAttr('attribute') — управление атрибутами.
  • .css('property', 'value') — изменение стилей.
  • .text() / .html() — изменение текста или HTML содержимого.
$('#list').children().addClass('highlight');
$('#list').find('li:first').css('color', 'red');
$('#list').find('li').attr('data-index', 1);

Итерация по элементам

Метод .each() позволяет выполнять действия для каждого элемента набора:

$('li').each(function(index, element) {
    $(element).text('Элемент ' + index);
});

Параметры: index — номер элемента в наборе, element — DOM-элемент. Внутри функции this также ссылается на текущий DOM-элемент.

Практические примеры обхода

Все активные элементы меню:

$('#menu').find('li.active').each(function() {
    $(this).css('font-weight', 'bold');
});

Изменение стиля ближайшего родителя:

$('.item').closest('.container').css('background-color', '#f0f0f0');

Добавление атрибута всем соседям:

$('#current').siblings().attr('data-neighbor', 'true');

Важные особенности

  1. Ленивый поиск: jQuery выполняет поиск элементов в момент вызова методов, что позволяет динамически работать с DOM.
  2. Цепочка методов: методы возвращают объект jQuery, что позволяет строить цепочки:
$('#list').children('li').first().addClass('active').css('color', 'blue');
  1. Единообразие работы с элементами: независимо от количества найденных элементов, методы применяются ко всем одновременно, что сокращает код.

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

Оглавление