JavaScript | Как получить всех детей?

Объектная модель документа преобразовывает все HTML-элементы в объекты JavaScript. У элементов на странице есть своя структура вложенности одного в другого. Из этого можно сделать вывод, что каждый элемент «родственно» может быть связан с другим. Какой-то элемент может быть родителем, а какой-то его ребёнком.

Как получить всех детей элемента на странице?

Для примера возьмём разметку:

<div class="odin">
   <p>телефон</p>
   <p>телевизор</p>
   <p>телескоп</p>
</div>
<div class="dva">
   <p>Иван</p>
   <p>Николай</p>
   <p>Максим</p>
</div>
<div class="tri">
   <p>купить</p>
   <p>продать</p>
   <p>обменять</p>
</div>

Видео инструкция

В этом видео приводится пример получения детей элемента при помощи JavaScript. Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.

Для начала поучим все элементы <div>:

document.getElementsByTagName("div")

Получили все div на странице - JavaScript — Получили все div на странице — JavaScript

Обратите внимание как мы это сделали. Мы обратились ко всему документу и из него вытащили все элементы div. При таком способе мы не можем сказать, что все элементы данной HTML-коллекции являются детьми объекта document. Чьими же детьми они являются? Как всё-таки получить именно детей?

Для решения задачи мы будем получать значение атрибута «children«, который будем вызывать на элементе/узле. Вся разметка у нас лежит внутри элемента body, поэтому мы будем получать его детей.

document.body.children

Дети элемента body - JavaScript — Дети элемента body — JavaScript

Визуально коллекция не поменялась, но концептуально мы получили детей элемента, которые лежат на одном уровне вложенности. Это снова три элемента div со своими структурами, но в другом отношении. Теперь с уверенностью можно сказать, что это дети одного родителя.

А теперь давайте подумаем как мы можем обратиться к параграфам с мужскими именами? Если мы соберём все параграфы при помощи document.getElementsByTagName(«p»), то это будет просто бессвязный набор:

document.getElementsByTagName("p")

Получили все p на странице - JavaScript — Получили все p на странице — JavaScript

Но если мы получим всех детей второго div, то это будет то что надо:

document.body.children[1].children

Три мужских имени - JavaScript — Три мужских имени — JavaScript

В этом примере мы получили детей из детей.

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

DOM | Миксин ParentNode

DOM

Официальная страница стандарта DOM — https://dom.spec.whatwg.org/