Поиск элементов внутри другого элемента: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом уроке вы изучите различные способы поиска элементов DOM, которые находятся внутри других элементов. Вы начнете с простых методов, таких как поиск по ID и классу внутри body, а затем перейдете к более сложным сценариям, включая поиск внутри вложенных элементов, использование свойств children и parentElement, а также методов closest(), nextElementSibling и querySelectorAll() для фильтрации элементов. Каждое упражнение предназначено для закрепления определенного аспекта поиска элементов и поможет вам стать увереннее в работе с DOM.

Список тем

Поиск элемента по классу внутри div

Найдите первый элемент с классом `highlight` внутри div с идентификатором `content` и добавьте ему стиль, изменяющий цвет фона на желтый.

HTML

Восстановить HTML

                      <div id="content">
  <ul>
    <li class="highlight">Пункт 1</li>
    <li>Пункт 2</li>
  </ul>
</div>

<div id="content">
  <ul>
    <li class="highlight">Пункт 1</li>
    <li>Пункт 2</li>
  </ul>
</div>

JavaScript

const contentDiv = document.input__1('content');
const highlightedItem = contentDiv.input__2('.highlight');
highlightedItem.style.input__3 = 'yellow';

                     const contentDiv = document.input__1('content');
const highlightedItem = contentDiv.input__2('.highlight');
highlightedItem.style.input__3 = 'yellow';

Используйте `document.getElementById()` чтобы получить div, а затем `querySelector()` для поиска элемента внутри этого div по классу. Для изменения стиля используйте свойство `style.backgroundColor`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Поиск всех элементов по тегу внутри контейнера

Найдите все элементы `li` внутри элемента с классом `list-container` и выведите количество найденных элементов в консоль.

HTML

Восстановить HTML

                      <div class="list-container">
  <ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
  </ul>
</div>

<div class="list-container">
  <ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
  </ul>
</div>

JavaScript

const container = document.input__1('.list-container');
const listItems = container.input__2('li');
console.input__3(listItems.length);

                     const container = document.input__1('.list-container');
const listItems = container.input__2('li');
console.input__3(listItems.length);

Используйте `document.querySelector()` для получения контейнера по классу, а затем `querySelectorAll()` для поиска всех элементов `li` внутри него. Свойство `length` массива, возвращенного `querySelectorAll()`, даст количество элементов.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Вложенный поиск: класс внутри класса

Внутри элемента с классом `outer` найдите элемент с классом `inner` и измените его текст на "Найден вложенный элемент!".

HTML

Восстановить HTML

                      <div class="outer">
  <div class="inner">
    <p>Изначальный текст</p>
  </div>
</div>

<div class="outer">
  <div class="inner">
    <p>Изначальный текст</p>
  </div>
</div>

JavaScript

const outerElement = document.input__1('.outer');
const innerElement = outerElement.input__2('.inner');
innerElement.input__3 = 'Найден вложенный элемент!';

                     const outerElement = document.input__1('.outer');
const innerElement = outerElement.input__2('.inner');
innerElement.input__3 = 'Найден вложенный элемент!';

Используйте `document.querySelector()` для поиска элемента `.outer`. Затем, на полученном элементе, снова используйте `querySelector()` для поиска `.inner`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Доступ к дочерним элементам через children

Получите доступ ко второму дочернему элементу `ul` внутри div с ID `parent` и добавьте ему класс `child-element`.

HTML

Восстановить HTML

                      <div id="parent">
  <ul>
    <li>Первый список</li>
  </ul>
  <ul>
    <li>Второй список</li>
  </ul>
</div>

<div id="parent">
  <ul>
    <li>Первый список</li>
  </ul>
  <ul>
    <li>Второй список</li>
  </ul>
</div>

JavaScript

const parentElement = document.input__1('parent');
const secondChild = parentElement.input__2[input__3];
secondChild.classList.input__4('child-element');

                     const parentElement = document.input__1('parent');
const secondChild = parentElement.input__2[input__3];
secondChild.classList.input__4('child-element');

Используйте `document.getElementById()` для получения родительского div. Свойство `children` возвращает коллекцию дочерних элементов. Доступ к элементу коллекции осуществляется по индексу (начинается с 0). `classList.add()` добавляет класс.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Переход к родительскому элементу и поиск внутри него

Начиная с элемента с классом `child`, перейдите к его родительскому элементу и найдите внутри него элемент `span`. Измените текст найденного `span` на "Найден родительский span!".

HTML

Восстановить HTML

                      <div id="grandparent">
  <div id="parent-container">
    <p class="child">Дочерний элемент</p>
    <span>Изначальный текст span</span>
  </div>
</div>

<div id="grandparent">
  <div id="parent-container">
    <p class="child">Дочерний элемент</p>
    <span>Изначальный текст span</span>
  </div>
</div>

JavaScript

const childElement = document.input__1('.child');
const parentElement = childElement.input__2;
const spanElement = parentElement.input__3('span');
spanElement.input__4 = 'Найден родительский span!';

                     const childElement = document.input__1('.child');
const parentElement = childElement.input__2;
const spanElement = parentElement.input__3('span');
spanElement.input__4 = 'Найден родительский span!';

Используйте `document.querySelector()` для получения элемента `.child`. Свойство `parentElement` позволяет перейти к родительскому элементу. Затем используйте `querySelector()` на родительском элементе для поиска `span`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Поиск ближайшего родительского элемента с помощью closest()

Начиная с элемента с классом `target`, найдите его ближайший родительский элемент с классом `container` и добавьте этому родителю класс `found-container`.

HTML

Восстановить HTML

                      <div class="container">
  <section>
    <p class="target">Целевой элемент</p>
  </section>
</div>
<div class="other-container">
  <p class="target">Другой целевой элемент</p>
</div>

<div class="container">
  <section>
    <p class="target">Целевой элемент</p>
  </section>
</div>
<div class="other-container">
  <p class="target">Другой целевой элемент</p>
</div>

JavaScript

const targetElement = document.input__1('.target');
const containerElement = targetElement.input__2('.container');
containerElement.classList.input__3('found-container');

                     const targetElement = document.input__1('.target');
const containerElement = targetElement.input__2('.container');
containerElement.classList.input__3('found-container');

Используйте `document.querySelector()` для получения элемента `.target`. Метод `closest(selector)` ищет ближайший родительский элемент, соответствующий селектору.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Поиск следующего соседнего элемента

Найдите параграф с ID `startParagraph`, затем перейдите к его следующему соседнему элементу и измените его текст на "Это следующий элемент!".

HTML

Восстановить HTML

                      <div id="container">
  <p id="startParagraph">Начальный параграф</p>
  <p>Соседний параграф</p>
</div>

<div id="container">
  <p id="startParagraph">Начальный параграф</p>
  <p>Соседний параграф</p>
</div>

JavaScript

const startElement = document.input__1('startParagraph');
const nextElement = startElement.input__2;
nextElement.input__3 = 'Это следующий элемент!';

                     const startElement = document.input__1('startParagraph');
const nextElement = startElement.input__2;
nextElement.input__3 = 'Это следующий элемент!';

Используйте `document.getElementById()` для получения элемента `#startParagraph`. Свойство `nextElementSibling` возвращает следующий соседний элемент на том же уровне DOM-дерева.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку