Как узнать родителя элемента js

Как получить элемент-родитель?

от document.getElementById(‘elem’) надо получить тот <section> .

p.s. document.getElementById(‘elem’).parrentNode не работает (возвращает undefined )

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript dom или задайте свой вопрос.

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

DOM, часть 1 из 3. Навигация по элементам

В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.

Все операции с DOM начинаются с объекта document , это главная «точка входа» в DOM. Из него можно получить доступ к любому узлу документа.

Сверху: documentElement и body

Самый верхний узел документа — document.documentElement , в DOM он соответствует тегу <html> :

Другой часто используемый DOM-узел — document.body , в DOM он соответствует тегу <body> :

Дети: childNodes, firstChild, lastChild

Надо понимать разницу между понятиями «дети» и «потомки». Дети (дочерние узлы) — элементы, которые являются непосредственными детьми узла. Потомки — все элементы, которые лежат внутри данного, включая детей, их детей и т.д.

Коллекция childNodes содержит список всех детей, включая текстовые узлы.
Свойства firstChild и lastChild обеспечивают доступ к первому и последнему дочернему узлу.

Коллекция childNodes

Хотя childNodes имеет свойство length — это не массив, а особый перебираемый объект NodeList .

Методы массивов не будут работать, потому что коллекция — это не массив. Если нужно использовать именно методы массива, то можно создать настоящий массив из коллекции.

Методы NodeList

NodeList.item(index) . Возвращает элемент из списка по его индексу или null , если индекс выходит за границы допустимого диапазона. Может быть использован как альтернатива nodeList[index] , возвращающему undefined при недопустимом index .

NodeList.entries() . Возвращает iterator , позволяя перебрать все пары ключ/значение, содержащиеся в NodeList .

NodeList.forEach() . Выполняет указанную функцию один раз для каждого элемента NodeList .

NodeList.keys() . Возвращает iterator , позволяя перебрать все ключи каждой пары ключ/значение, содержащейся в NodeList .

NodeList.values() . Возвращает iterator , позволяя перебрать все значения каждой пары ключ/значение, содержащейся в NodeList .

Соседи и родитель

Соседи — это узлы, у которых один и тот же родитель. Свойства nextSibling и previousSibling обеспечивают доступ к следующему и предыдущему узлу. Родитель доступен через свойство parentNode .

Навигация только по элементам

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

Эти свойства похожи на те, что раньше, только в ряде мест стоит слово Element :

children — коллекция детей, которые являются элементами
firstElementChild , lastElementChild — первый и последний дочерний элемент
previousElementSibling , nextElementSibling — предыдущий и следующий элементы
parentElement — родитель-элемент

Зачем нужен parentElement ? Разве может родитель быть не элементом?

Свойство parentElement возвращает родитель-элемент, а parentNode возвращает «любого родителя». Обычно эти свойства одинаковы: они оба получают родителя. За исключением document.documentElement .

Причина в том, что родителем корневого узла document.documentElement ( <html> ) является document . Но document — это не узел-элемент, так что parentNode вернёт его, а parentElement — нет.

Эта деталь может быть полезна, если нужно пройти вверх по цепочке родителей от произвольного элемента element к <html> , но не до document .

Коллекция children

Навигация по DOM элементам

Обход DOM или, проще говоря, навигация по DOM элементам — это работа со свойствами родительских, дочерних и соседних DOM элементов с помощью JavaScript.

В качестве примера мы будем использовать следующий код:

В браузере файл будет выглядеть следующим образом:

Корневые узлы

Объект document — это корень каждого узла в DOM. Следующий уровень — это объект window , который включает в себя закладки браузера, тулбары, функции promt и alert. Мы будем работать с DOM и, таким образом, с объектом document , который включает в себя все, что находится внутри window .

По умолчанию каждый документ содержит html , head , и body .

Проверить содержимое каждого элемента можно, набрав в консоли:

Родительские узлы

Как упоминалось ранее, узлы в DOM делятся на родительские, дочерние и соседние в зависимости от их связи с другими узлами. Родитель конкретного узла — это узел, который находится на уровень выше в иерархии DOM.

В нашем примере:

html является родителем head , body , и script
body является родителем h1 , h2 , p и ul , но не li , так как li на два уровня ниже body

Мы можем проверить родителя p элемента с помощью parentNode свойства. Так как мы присвоили p переменной, необходимо просто ввести:

Можно даже подняться на два уровня выше:

Дочерние узлы

Дочерние элементы узла — это узлы, которые находятся на уровень ниже. Если узлы находятся ниже еще на один уровень вложенности, они называются предками.

В данной статье мы будем работать со следующими свойствами: childNodes , firstChild , lastChild , children , firstElementChild и lastElementChild .

Начнем со свойства childNodes , которое вернет список каждого дочернего элемента данного узла:

Возможно, вы ожидали, что вернется только три элемента li ? Текстовые узлы на самом деле пробелы, вызванные отступами между элементами, которые DOM воспринимает как узлы. Их не будет видно во вкладке Elements, так как консоль разработчика удаляет эти узлы автоматически.

По этой причине, если мы попытаемся изменить цвет фона первого дочернего узла, возникнет ошибка, так как первый дочерний элемент — это текст.

Когда нам необходимо работать только с узлами элементов, можно использовать children , firstElement и lastElementChild .

ul.children вернет только три li элемента.

Для того, чтобы изменить только первый элемент li , используйте:

Так выглядит обновленная страница:

Если необходимо изменить все четыре дочерних элемента, вы можете использовать for .. of цикл следующим образом:

Теперь все дочерние элементы изменили цвет фона:

Если посмотреть на элемент p , мы увидим, что он содержит как текст, так и другой элемент (тег strong ).

Свойство childNodes полезно, когда необходимо получить доступ к информации.

Как childNodes , так и children возвращают не стандартный JavaScript массив (со всеми методами и свойствами), а объект, подобный массиву. Однако, как и с массивом, доступ к узлам можно получить через номер индекса или даже найти свойство length .

В этом коде мы получаем доступ к последнему дочернему элементу li из четырех элементов ul в body и применяем стили.

Используя свойства дочерних и родительских элементов, можно вернуть любой узел из DOM!

Соседние элементы

Подробнее рассмотрим соседние элементы. Соседние элементы узла — это узлы, находящиеся на одном и том же уровне в DOM. Это не обязательно узлы одного типа — текстовые узлы, узлы элементов или комментариев. Свойства, с которыми часто работают в такой ситуации — это nextSibling , previousSibling , nextElementSibling и previousElementSibling .

Свойства соседних элементов работают таким же образом, как и дочерних: previousSibling и nextSibling вернет следующий узел, который сразу же предшествует или следует за определенным узлом; и previousElementSibling , и nextElementSibling получат только узлы элемента.

Получим средний элемент списка ul :

Также воспользуемся свойствами соседнего элемента для получения доступа к следующему и предыдущему элементам (избегая текстовых пробелов).

Изменения будут выглядеть следующим образом:

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