Js родительский элемент: Node.parentElement — Интерфейсы веб API

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

Node.parentElement

Свойство Node.parentElement только для чтения, возвращает родителя узла DOM Element , или null если узел не имеет родителя, или его родитель не DOM Element .

Синтаксис

parentElement это родительский элемент текущего узла. Это всегда объект DOM Element , или null .

Пример

Совместимость с браузерами

BCD tables only load in the browser

В некоторых браузерах, свойство parentElement определено только для узлов, которые сами Element . В частности, не определено для текстовых узлов.

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

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

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

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

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

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

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

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

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

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

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

• html является родителем head , body , и script
• body является родителем h2 , h3 , 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. Также мы подробнее коснемся изменения классов, атрибутов и стилей.

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

Простая разметка — два div два p — HTML

Мы хотим получить родителя для элемента < p >AAAA</ p >. Как его узнать?

Для начала получим сам элемент <p>AAAA</p>

Получили второй элемент p — JavaScript

Теперь ищем родителя. В этом нам поможет «Объектная модель документа» (DOM). В стандарте DOM есть «Интерфейс Node». В этом интерфейсе есть атрибут, который называется «parentNode» — он возвращает узел родителя. Воспользуемся им:

Применение атрибута parentNode — JavaScript

Мы получили родителя

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

В «Интерфейсе Node» есть атрибут, который называется «parentElement» — он возвращает элемент родителя. Воспользуемся им:

Применение атрибута parentElement — JavaScript

Element — JavaScript — Дока

1. Кратко
2. Как пишется
3. Как это понять
   1. 💡 Свойства, связанные с HTML-атрибутами
   2. 💡 Свойства и методы, связанные с DOM
   3. 💡 Свойства с информацией о содержимом
4. На практике
   1. Николай Лопин советует

Кратко

Секция статьи «Кратко»

Элемент — это кусочек HTML в DOM-дереве. Браузер создаёт DOM для взаимодействия между JavaScript и HTML. Каждый HTML-тег при этом превращается в элемент DOM. Ещё такие элементы называют узлами.

Из DOM можно получить элемент и изменить его. Браузер заметит изменения и отобразит их на странице.

Как пишется

Секция статьи «Как пишется»

Например, можно поменять выравнивание у элемента h2:

// получаем элемент из DOMconst element = document.getElementsByTagName('h2')// после выполнения этого кода h2 будет выравнивать текст по центруelement.align = 'center'// меняем цвет шрифта на красныйelement.style.color = 'red'
          // получаем элемент из DOM
const element = document.getElementsByTagName('h2')
// после выполнения этого кода h2 будет выравнивать текст по центру
element.align = 'center'
// меняем цвет шрифта на красный
element.style.color = 'red'

Как это понять

Секция статьи «Как это понять»

HTML-элементы содержат свойства, которые можно разделить на группы:

• свойства, связанные с HTML-атрибутами: id, классы, стили и так далее;
• свойства и методы связанные с обходом DOM: получение дочерних элементов, родителя, соседей;
• информация о содержимом;
• специфические свойства элемента.

Первые три группы свойств есть у всех элементов. Специфические свойства отличаются в зависимости от типа элемента. Например, у полей ввода есть свойства, которых нет у параграфов и блоков: value, type и другие.

💡 Свойства, связанные с HTML-атрибутами

Секция статьи «💡 Свойства, связанные с HTML-атрибутами»

Читать и записывать значения HTML-атрибутов можно при помощи свойств элемента. Название обычно совпадает с названием атрибута:

• id — получить идентификатор элемента.
• className — список классов в HTML-атрибуте class.

const element = document.getElementsByTagName('div')[0]// напечатать список классов в консольconsole.log(element.className)// установить свой классelement.className = 'hacked'
           const element = document.getElementsByTagName('div')[0]
// напечатать список классов в консоль
console.log(element.className)
// установить свой класс
element. className = 'hacked'

• style — добавить стили. Стили добавляются так же с помощью свойств. Свойства именуются по аналогии с CSS-свойствами:

const element = document.getElementsByTagName('div')[0]// CSS-свойство background-colorelement.style.backgroundColor = 'beige'// CSS-свойство colorelement.style.color = 'gray'// CSS-свойство margin-topelement.style.marginTop = '20px'
          const element = document.getElementsByTagName('div')[0]
// CSS-свойство background-color
element.style.backgroundColor = 'beige'
// CSS-свойство color
element.style.color = 'gray'
// CSS-свойство margin-top
element.style.marginTop = '20px'
 

💡 Свойства и методы, связанные с DOM

Секция статьи «💡 Свойства и методы, связанные с DOM»

• children — список дочерних элементов;
• parentElement — получить родительский элемент;
• nextElementSibling и previousElementSibling — получить следующий/предыдущий узел-сосед:

Открыть демо в новой вкладке

• getElementsByClassName() — поиск среди дочерних элементов по названию класса;
• getElementsByTagName() — поиск среди дочерних элементов по названию тега;
• querySelector() — поиск первого дочернего элемента, подходящего под CSS-селектор;
• querySelectorAll() — поиск всех дочерних элементов подходящих под CSS-селектор;

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

💡 Свойства с информацией о содержимом

Секция статьи «💡 Свойства с информацией о содержимом»

• innerHTML — это свойство возвращает HTML-код всего, что вложено в текущий элемент. При записи в это свойство, предыдущее содержимое будет затёрто. Страница отобразит новое содержимое:

const divElement = document.getElementsByTagName('div')[0]divElement.innerHTML = '<p>Добавлен из кода</p>'// после выполнения этого кода, на странице отобразится параграф с указанным текстом
          const divElement = document.getElementsByTagName('div')[0]
divElement.innerHTML = '<p>Добавлен из кода</p>'
// после выполнения этого кода, на странице отобразится параграф с указанным текстом

• outerHTML — это свойство возвращает HTML-код текущего элемента и всего, что в него вложено. При записи в это свойство, предыдущее содержимое будет затёрто.
• textContent — свойство, возвращает текст всех вложенных узлов без HTML-тегов.

Почувствуй разницу на демо:

Открыть демо в новой вкладке

На практике

Секция статьи «На практике»

Николай Лопин советует

Секция статьи «Николай Лопин советует»

🛠 Если нужно добавить текст в элемент, то всегда используйте свойство textContent. Другие свойства обрабатывают HTML, это может привести к дырам в безопасности.

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

• добавить класс — метод add().
• удалить класс — метод remove().

const element = document.getElementsByTagName('div')[0]element.classList.add('hello')element.classList.remove('bye')
          
 const element = document.getElementsByTagName('div')[0]
element. classList.add('hello')
element.classList.remove('bye')

🛠 В HTML часто используют data-атрибуты. Они используются, когда нужно передать данные через HTML. Например, когда сервер собирает стартовый HTML, он может поместить значения в data-атрибуты. Фронтендер затем может использовать их, вместо того, чтобы отправлять запрос на сервер. Название таких атрибутов начинаются с префикса data-. Для доступа к ним из JavaScript используется свойство dataset:

const element = document.getElementsByTagName('div')[0]// получить значение атрибута data-columns тега divconsole.log(element.dataset.columns)// изменить значениеelement.dataset.columns = 99
           const element = document.getElementsByTagName('div')[0]
// получить значение атрибута data-columns тега div
console.log(element.dataset.columns)
// изменить значение
element.dataset.columns = 99

🛠 У элементов очень много свойств. Если нужно что-то получить из элемента, то скорее всего уже есть свойство, которое хранит эти данные.

🛠 Если нужно удалить элемент и все вложенные в него, воспользуйтесь методом remove():

const element = document.querySelector('#some-element')element.remove()
          const element = document.querySelector('#some-element')
element.remove()

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

.cookie

alt + ←

→

.addEventListener()

alt + →

Дочерние селекторы | htmlbook.ru

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код (пример 12. 1).

Пример 12.1. Вложенность элементов в документе

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Lorem ipsum</title>
 </head>
 <body>
  <div>
   <p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing 
   elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam 
   erat volutpat.</p>
   <p><strong><em>Ut wisis enim ad minim veniam</em></strong>, 
   quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
   ea commodo consequat.</p>
  </div>
 </body>
</html>

В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом. Нагляднее это видно на дереве элементов, так называется структура отношений тегов документа между собой (рис. 12.1).

Рис. 12.1. Дерево элементов для примера

На рис. 12.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <div> выступает тег <p>. Вместе с тем тег <strong> не является дочерним для тега <div>, поскольку он расположен в контейнере <p>.

Вернёмся теперь к селекторам. Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. Синтаксис применения таких селекторов следующий.

Селектор 1 > Селектор 2 { Описание правил стиля }

Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

Если снова обратиться к примеру 12.1, то стиль вида P > EM { color: red } будет установлен для первого абзаца документа, поскольку тег <em> находится внутри контейнера <p>, и не даст никакого результата для второго абзаца. А все из-за того, что тег <em> во втором абзаце расположен в контейнере <strong>, поэтому нарушается условие вложенности.

По своей логике дочерние селекторы похожи на селекторы контекстные. Разница между ними следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора же допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберём следующий код (пример 12.2).

Пример 12.2. Контекстные и дочерние селекторы

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Дочерние селекторы</title>
  <style>
   DIV I { /* Контекстный селектор */
    color: green; /* Зеленый цвет текста */
   }
   P > I { /* Дочерний селектор */
    color: red; /* Красный цвет текста */
   }
  </style>
 </head>
 <body>
  <div>
   <p><i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing 
   elit, sed diem nonummy nibh euismod tincidunt ut lacreet <i>dolore magna</i> 
   aliguam erat volutpat.
  </p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 12.2.

Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора

На тег <i> в примере действуют одновременно два правила: контекстный селектор (тег <i> расположен внутри <div>) и дочерний селектор (тег <i> является дочерним по отношению к <p>). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I ниже, как цвет текста изменится с красного на зеленый.

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

Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой — сюда относятся, например, таблицы и разные списки. В примере 12.3 показано изменение вида списка с помощью стилей. За счёт вложения одного списка в другой получаем разновидность меню. Заголовки при этом располагаются горизонтально, а набор ссылок — вертикально под заголовками (рис. 12.3).

Рис. 12.3. Список в виде меню

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

Пример 12.3. Использование дочерних селекторов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Дочерние селекторы</title>
  <style>
   UL#menu {
    margin: 0; padding: 0; /* Убираем отступы */
   }
   UL#menu > LI {
    list-style: none; /* Убираем маркеры списка */
    width: 100px; /* Ширина элемента в пикселах */
    background: #b3d9d2; /* Цвет фона */
    color: #333; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт */
    font-size: 90%; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
    float: left; /* Располагаем элементы по горизонтали */
   }
   LI > UL {
    list-style: none; /* Убираем маркеры списка */
    margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */
    border-bottom: 1px solid #666; /* Граница внизу */
    padding-top: 5px; /* Добавляем отступ сверху */
   }
   LI > A {
    display: block; /* Ссылки отображаются в виде блока */
    font-weight: normal; /* Нормальное начертание текста */
    font-size: 90%; /* Размер шрифта */
    background: #fff; /* Цвет фона */
    border: 1px solid #666; /* Параметры рамки */
    border-bottom: none; /* Убираем границу снизу */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <ul> 
   <li>Правка 
    <ul> 
      <li><a href="#">Отменить</a></li> 
      <li><a href="#">Вырезать</a></li> 
      <li><a href="#">Копировать</a></li> 
      <li><a href="#">Вставить</a></li> 
    </ul> 
   </li> 
   <li>Начертание
    <ul> 
      <li><a href="#">Жирное</a></li> 
      <li><a href="#">Курсивное</a></li> 
      <li><a href="#">Подчеркнутое</a></li> 
    </ul> 
   </li>
   <li>Размер
    <ul> 
      <li><a href="#">Маленький</a></li> 
      <li><a href="#">Нормальный</a></li> 
      <li><a href="#">Средний</a></li> 
      <li><a href="#">Большой</a></li> 
    </ul> 
   </li> 
  </ul>
 </body>
</html>

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

Вопросы для проверки

1. Какой цвет будет у жирного курсивного текста в коде

<p>Нормы освещённости построены на <b><i>основе классификации зрительных работ</i></b> по определенным количественным признакам.</p>

При использовании следующего стиля?

P { color: green; }
B {color: blue; }
I {color: orange; }
B > I { color: olive; }
P > I { color: yellow; }

1. Зелёный.
2. Синий.
3. Оранжевый.
4. Оливковый.
5. Жёлтый.

2. Какой элемент является родительским для тега <TITLE>?

1. <HEAD>
2. <BODY>
3. <HTML>
4. <META>
5. <!DOCTYPE>

3. Для какого тега элемент <!DOCTYPE> выступает родителем?

1. <HTML>
2. <TITLE>
3. <BODY>
4. <HEAD>
5. Ни для одного тега.

Ответы

1. Оливковый.

2. <HEAD>

3. Ни для одного тега.

селекторы

Что такое родительский элемент в javascript?

Вопрос задан: Армани Джейкобс

Оценка: 4,8/5 (17 голосов)

родительский элемент. parentElement — это родительский элемент текущего узла . Это всегда объект DOM Element или null .

В чем разница между parentNode и parentElement?

Единственная разница возникает, когда parentNode узла не является элементом. Если это так, parentElement равен null . Поскольку элемент (document.documentElement) не имеет родителя, который является элементом, parentElement имеет значение null.

Что такое родитель в HTML?

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

 константный компонент = document.querySelector('.component')
const title = component.querySelector('.component__title')
console.log(название) //  
 ... 
 
 

детей

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

 <ул>
  
Ссылка 1
  
Ссылка 2
  
Ссылка 3
  
Ссылка 4
  
Ссылка 5

 

 константный список = document.querySelector('. list')
const listItems = список.дети
console.log(элементы списка)
 

Выбор всех элементов списка с помощью дочернего свойства

Коллекция HTML аналогична NodeList (который возвращает querySelectorAll ). Есть тонкие различия, которые на самом деле не имеют значения для контекста этой статьи.

Важно то, что HTML-коллекция представляет собой массивоподобный объект. Если вы хотите перебрать его с помощью Array.prototype.forEach , вам нужно преобразовать его в массив с Массив. от первый.

 константный массив = Array.from(HTMLCollection)
array.forEach(el => { /* делайте что хотите */})
 

Выбор конкретного потомка

Вы можете выбрать n-й элемент в списке как из NodeLists (результат querySelectorAll ), так и из коллекций HTML (результат дочерних элементов ). Для этого вы используете индекс элемента, точно так же, как вы выбираете определенный элемент из массива.

 <ул>
  
Ссылка 1
  
Ссылка 2
  
Ссылка 3
  
Ссылка 4
  
Ссылка 5

 

 const listItems = document. querySelectorAll('li')
константа firstItem = listItems[0]
const secondItem = listItems[1]
const третийItem = listItems[2]
константа fourItem = listItems[3]
constпятыйItem = listItems[4]
console.log(первыйэлемент)
console.log(второй элемент)
console.log(третий элемент)
console.log(четвертый элемент)
console.log(пятый элемент)
 

Выберите конкретный дочерний элемент с помощью [index]

Попробуйте приведенный выше код с коллекцией HTML. Вы получите тот же результат.

Движение вверх

Есть два способа перемещения вверх:

1. родительский элемент
2. ближайший

родительский элемент

parentELement — это свойство, позволяющее выбрать родительский элемент. Родительский элемент — это элемент, который заключает в себе текущий элемент.

В следующем HTML-коде .list является родительским элементом для всех

. Каждый

является родительским элементом соответствующих <а> .

 <ул>
  
Ссылка 1
  
Ссылка 2
  
Ссылка 3
  
Ссылка 4
  
Ссылка 5

 

 const firstListItem = document.querySelector('li')
константный список = firstListItem.parentElement
console.log(список)
// <ул>...
 

ближайший

parentElement отлично подходит для выбора на один уровень выше. Чтобы найти элемент, который может быть на несколько уровней выше текущего элемента, вы используете метод ближайших .

ближайший позволяет выбрать ближайший элемент-предок, соответствующий селектору. Вот синтаксис:

 const NearestAncestor = Element.closest(селектор)
 

Как вы можете подозревать, селектор — это тот же селектор , который вы передаете querySelector и querySelectorAll .

В следующем HTML вы можете легко выбрать . list из с помощью Element.closest :

 <ул>
  
Ссылка 1
  
Ссылка 2
  
Ссылка 3
  
Ссылка 4
  
Ссылка 5

 

 const firstLink = document.querySelector('a')
список const = firstLink.closest('.list')
console.log(список)
// 
 ... 
 

Примечание: ближайший начинает поиск с текущего элемента , затем продвигается вверх, пока не достигнет документа . Он останавливается, возвращает первый найденный элемент.

 const firstLink = document.querySelector('a')
const firstLinkThroughClosest = firstLink.closest('a')
console.log(firstLinkThroughClosest)
// Ссылка 1
 

ближайший довольно новый. Он не работает в IE Edge 14 и ниже. В Опере мини тоже не работает. Если вам нужна поддержка старых браузеров, вы можете использовать полифилл.

Боковой ход

Существует три способа перемещения вбок:

1. следующий элементSibling
2. предыдущийЭлементСиблинг
3. Объединение parentElement , дочерних элементов и index .

следующий элементSibling

Вы можете выбрать следующий элемент с помощью nextElementSibling .

 const nextElem = Node.nextElementSibling
 

 <ул>
  
Ссылка 1
  
Ссылка 2
  
Ссылка 3
  
Ссылка 4
  
Ссылка 5

 

 const firstListItem = document.querySelector('li')
const secondListItem = firstListItem.nextElementSibling
console.log (второй элемент списка)
// 
Ссылка 2
 

предыдущийElementSibling

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

 <ул>
  
Ссылка 1
  
Ссылка 2
  
Ссылка 3
  
Ссылка 4
  
Ссылка 5

 

 const secondListItem = document.querySelectorAll('li')[1]
const firstListItem = secondListItem.previousElementSibling
console.log(первыйListItem)
// 
Ссылка 1
 

Объединение parentElement, дочерних элементов и индекса

Этот метод позволяет выбрать определенного родственного элемента. Легче объяснить, как это работает, на примере, так что давайте сделаем это. Допустим, вы хотите выбрать четвертый элемент из первого элемента в этом HTML.

 <ул>
  
Ссылка 1
  
Ссылка 2
  
Ссылка 3
  
Ссылка 4
  
Ссылка 5

 

Допустим, у вас уже есть первый предмет:

 const firstItem = document.querySelector('li')
 

Чтобы выбрать четвертый элемент, вы можете использовать firstItem. parentElement для получения списка, затем list.children для получения коллекции HTML. Получив коллекцию HTML, вы можете найти четвертый элемент, используя индекс 3. (Помните, индекс начинается с нуля!).

 const firstItem = document.querySelector('li')
список констант = firstItem.parentElement
const allItems = список.дети
константа fourItem = allItems[3]
console.log(четвертый элемент)
// 
Ссылка 4
 

Собираем все вместе за один шаг:

 const firstItem = document.querySelector('li')
константа fourItem = firstITem.parentElement.children[3]
console.log(четвертый элемент)
// 
Ссылка 4
 

Упражнение

Попрактикуйтесь в обходе DOM с помощью методов, описанных в этом уроке. С приведенным ниже HTML выполните следующие задачи:

1. Выберите .characters с document.querySelector
2. Выберите .humans из .characters
3. Выбрать всех людей с помощью querySelectorAll , начиная с . humans
4. Выбрать всех хоббитов с детьми
5. Выберите Веселого (хоббита)
6. Выберите .врагов из Саурона
7. Выберите .characters div из Nazgûl
8. Выберите Элронда из Глорфинделя
9. Выберите Леголаса из Глорфинделя
10. Выберите Арвен из Глорфинделя

 <дел>
  <ул>
    
Фродо Бэггинс
    
Сэмуайз "Сэм" Гэмджи
    
Мериадок "Веселый" Брендибак
    
Перегрин "Пиппин" Тук
    
Бильбо Бэггинс
  
  <ул>
    
Гэндальф
    
Саруман
    
Арагорн
    
Боромир
    
Фарамир
  
  <ул>
    
Леголас
    
Глорфиндель
    
Элронд
    
Арвен Эвенстар
  
  <ул>
    
Саурон
    
Назгул