Поиск родителей

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

Метод parent()

Метод parent() используется для получения непосредственного родителя выбранного элемента. В отличие от стандартного parentNode в JavaScript, parent() возвращает объект Bliss, что позволяет сразу применять к нему методы библиотеки.

Синтаксис:

element.parent(selector)
  • selector — необязательный CSS-селектор, который ограничивает поиск родителя определёнными условиями.

Примеры использования:

var child = Bliss('#item');
var parent = child.parent(); // Получение непосредственного родителя

Если передан селектор:

var parent = child.parent('.container'); 
// Вернёт ближайшего родителя с классом "container"

Особенность метода — поиск только одного ближайшего родителя, удовлетворяющего условию. Если элемент не найден, возвращается null.

Метод parents()

Метод parents() возвращает цепочку всех родителей элемента до корня документа или до родителя, который соответствует переданному селектору. Возвращает массив элементов Bliss.

Синтаксис:

element.parents(selector)
  • selector — необязательный CSS-селектор для фильтрации элементов.

Примеры использования:

var ancestors = Bliss('#item').parents();
// Массив всех родителей до <html>

С фильтром по селектору:

var filtered = Bliss('#item').parents('.container');
// Массив всех родителей с классом "container"

Преимущество parents() заключается в возможности работы с цепочкой родителей без необходимости вручную подниматься по дереву DOM с помощью циклов.

Комбинирование с другими методами Bliss.js

Методы поиска родителей легко комбинируются с другими инструментами библиотеки, например find(), children() и closest(). Это позволяет строить сложные селекции элементов и управлять DOM с высокой выразительностью.

Пример комбинирования:

Bliss('.button')
    .parent('.card')
    .find('.title')
    .addClass('highlight');

В этом примере происходит последовательное:

  1. Получение родителя с классом .card у каждой кнопки .button.
  2. Поиск внутри этого родителя всех элементов .title.
  3. Добавление класса highlight найденным элементам.

Метод closest()

Метод closest() используется для поиска ближайшего родителя, соответствующего селектору, включая сам элемент. Этот метод близок к стандартному Element.closest(), но возвращает объект Bliss для дальнейшей работы с библиотекой.

Синтаксис:

element.closest(selector)

Пример:

Bliss('#item').closest('.container').addClass('active');

Особенность: если текущий элемент сам соответствует селектору, он будет возвращён первым, в отличие от parent(), который всегда ищет строго родителя.

Практические советы

  • Для поиска одного ближайшего родителя без условий достаточно использовать parent().
  • Для получения цепочки родителей лучше применять parents().
  • Для поиска ближайшего элемента, соответствующего селектору, включая текущий, удобно использовать closest().
  • Методы возвращают объекты Bliss, что позволяет сразу применять методы манипуляции DOM, например addClass(), removeClass(), find().

Отличие методов друг от друга

Метод Возвращает Поиск включения текущего элемента Фильтр по селектору
parent() Один родитель Нет Да
parents() Массив родителей Нет Да
closest() Ближайший элемент Да Да

Эта таблица помогает быстро выбрать подходящий метод для конкретной задачи, избегая лишних обходов DOM и улучшая читаемость кода.

Методы поиска родителей в Bliss.js обеспечивают простоту и гибкость работы с DOM, позволяя строить сложные селекции и манипуляции с минимальным количеством кода.

Оглавление