Что такое родитель

Question

Что такое родитель

Тип вопроса: HTML Вероятность: 10% Категория: Frontend Разработчик

Ответ

Родитель (parent) в контексте DOM — это элемент, который содержит другой элемент (дочерний). В JavaScript можно получить родителя через свойство parentNode или parentElement.

const child = document.querySelector('.child');
const parent = child.parentNode; // или child.parentElement

Разница между parentNode и parentElement:

parentNode вернёт любой узел (например, текстовый или document)
parentElement вернёт только элемент (null, если родитель не элемент)

Пример:

<div class="parent">
  <p class="child">Text</p>
</div>

Ответ 18+ 🔞

А, ну это же про то, как в этом вашем DOM-дереве один элемент другого держит за шкирку, как папаша-алкаш непутёвого отпрыска! Родитель, блядь, называется.

Смотри, есть у тебя какая-нибудь хуйня, <div class="parent">, а внутри неё болтается <p class="child">. Ну и как ты думаешь, кто для этого параграфа папа? Правильно, этот самый див! И чтобы до него добраться, у чайлда есть два классических способа, как у любого уважающего себя отпрыска: позвать папу по-нормальному или по-официальному.

Вот смотри на этот код, он не трогаемый, как и договаривались:

const child = document.querySelector('.child');
const parent = child.parentNode; // или child.parentElement

Вот ты нашёл этого child, этого пиздёныша. И теперь говоришь ему: «Ну-ка, папаню своего позови!». И он тебе может притащить его двумя путями: parentNode или parentElement.

А в чём, спрашивается, разница, ёпта? А разница, как между «папа» и «гражданин отец».

parentNode — это просто «папа». Он вернёт кого угодно, кто сверху: будь то нормальный элемент (<div>), или какой-нибудь ебучий текстовый узел, или даже сам document. Всё, что угодно, что в иерархии узлов считается родителем.
parentElement — это уже «гражданин отец, предъявите удостоверение личности». Этот вернёт только если папа — элемент (тот самый тег, <div>, <section>). Если же родитель — не элемент (ну, там, тот самый document или что-то странное), то он вежливо так скажет: «Извините, но элемента нет, вот вам null». Чистая бюрократия, блядь!

Ну и чтобы ты окончательно не обосрался с примером, вот тебе разметка, на которую можно пальцем тыкать:

<div class="parent">
  <p class="child">Text</p>
</div>

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