JavaScript | Как получить детей родителя?

По сути такая формулировка вопроса означает поиск братьев и сестёр этого элемента, о котором идёт речь. Как это сделать? Нужно просто добавить запись к объекту JavaScript, который получен из HTML-элемента:

.parentNode.children

или

.parentElement.children

В стандарте DOM нет такого понятия как «брат» или «сестра», но в нём есть такое понятие как «родственник» (sibling). В любой момент можно получить предыдущего или следующего родственника:

previousSibling
nextSibling

Но чтобы понимать весь набор детей родителя, сначала нужно получить элемент самого родителя. Напомню, что родитель является первым предком.

Предположим у нас есть HTML-разметка документа:

<div class="roditel">
   <p class="r1">Ребёнок № 01</p>
   <p class="r2">Ребёнок № 02</p>
   <p class="r3">Ребёнок № 03</p>
</div>

Интуитивно понятно, что у родителя <div> есть три ребёнка <p>.

Три ребёнка одного родителя - HTML — Три ребёнка одного родителя — HTML

Давайте получим всех детей родителя от элемента второго ребёнка:

document.querySelector(".r2").parentNode.children

Вывод в консоль браузера:

Получили всех детей родителя - JavaScript — Получили всех детей родителя — JavaScript

Видео

Альтернативное решение

Мы можем получить не Узел родителя, а родительский элемент.

document.querySelector(".r2").parentElement.children

Обратились к родительскому Элементу и получили детей - JavaScript — Обратились к родительскому Элементу и получили детей — JavaScript

Информационные ссылки

Интерфейс Node (Узел) — https://efim360.ru/dom/#4-4-Interface-Node

Стандарт DOM — https://dom.spec.whatwg.org

Стандарт DOM — «4.4. Interface Node» — https://dom.spec.whatwg.org/#interface-node