Получение родительского 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 с практическими примерами.