Получение родительского div элемента в JavaScript без jQuery

Быстрый ответ

Доступ к родительскому div через JavaScript возможен с помощью свойства element.parentElement. Приведем пример:

var child = document.getElementById('child'); // Вот наш дочерний элемент
var parentDiv = child.parentElement.tagName === 'DIV' ? child.parentElement : null; 
// Получим родительский div или null, если родитель не является div-ом.

Такой код позволит вам получить непосредственного родителя элемента, если он является div, либо null в противном случае.

Раскрываем тайны DOM: parentNode против parentElement

При взаимодействии с DOM важно разбираться в различиях между parentNode и parentElement. Оба эти свойства относятся к интерфейсу Node и поддерживаются современными браузерами в соответствии со спецификациями DOM.

Свойство parentNode отсылает к любым типам узлов, включая Element, Document и DocumentFragment.

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

Способы выбора родительского узла

Поиск ближайшего предка

Метод Element.closest() позволяет найти ближайшего родительского div:

var child = document.getElementById('child'); // Это наш дочерний элемент
var closestDiv = child.closest('div'); // Ищем ближайший div

Метод closest() вернёт null, если подходящего элемента не существует.

Подробнее об этом расскажет наш спикер на видео

Создание пользовательского метода поиска

Вы можете реализовать функцию upTo(), которая осуществляет поиск родительского элемента с указанным тегом:

function upTo(el, tagName) {
  tagName = tagName.toUpperCase();
  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName === tagName) {
      return el;
    }
  }
  return null;
}

var parentDiv = upTo(document.getElementById('child'), 'div'); // Ищем родительский div

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

Преодоление предков

Если непосредственный родитель вашего элемента не является div, используйте цикл для его поиска:

var child = document.getElementById('child');
var parentDiv;

while ((child = child.parentElement) && child.tagName !== 'DIV');
parentDiv = child;

Оптимизация и производительность кода

Нативные JavaScript-методы работы с DOM обеспечивают высокую производительность по сравнению с jQuery. Они адаптированы под современные браузеры и помогают уменьшить время загрузки страницы.

В случае, когда .parentElement не возвращает ожидаемый результат (например, когда родитель является документом или фрагментом), рекомендуется включить в свой код проверку на различные случаи.

Визуализация

Вот так может выглядеть родительское "дерево" в HTML:

        [👵 Бабушка DIV]
             /         \
      [👨 Папа DIV]  [👩 Мама DIV]
          /       \
 [🧒️ Ребёнок DIV]   [👦 Брат DIV]

Когда Ребёнок DIV обращается к своему родителю, он находит Папа DIV:

🧒 Ребёнок DIV --- ищет родителя ---> 👨 Папа DIV

Именно так в HTML реализуется структура вложенности, где каждый элемент ориентируется на родительские селекторы для определения своих родительских связей.

Когда parentElement не выходит

Детальный поиск

Иногда, особенно при работе с фреймворками, такими как Vue и React, требуется более тонкий подход к поиску родительских элементов.

Обработка значений null или undefined

Если родительский элемент не был найден, добавьте проверку:

if (!parentDiv) {
  // Обрабатываем ситуацию, когда родительский div не найден
}

Решение проблем совместимости браузеров

Учитывайте совместимость методов браузеров, и при необходимости, используйте полифиллы для поддержания старых версий браузеров.

Полезные материалы

1. Element: closest() method – Web APIs | MDN — Подробное руководство по методу .closest() на MDN.
2. .parent() | jQuery API Documentation — Метод jQuery для определения родительского элемента.
3. javascript – Difference between DOM parentNode and parentElement – Stack Overflow — Обсуждение разницы между parentNode и parentElement на Stack Overflow.
4. Searching: getElement, querySelector — Обзор методов поиска в DOM.
5. Tutorial | DigitalOcean — Подробное руководство по обходу DOM с практическими примерами.