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

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

В этом разделе представлены упражнения, которые помогут вам отработать навыки поиска родительских элементов в Document Object Model (DOM). Каждое задание начинается с готовой HTML-структуры, которую вам нужно будет модифицировать с помощью JavaScript. Ваша задача - дополнить предложенный JavaScript-код, вписывая пропущенные фрагменты в специальные поля. После внесения изменений вы сможете выполнить код и увидеть результат прямо на странице. Упражнения постепенно усложняются, начиная с простых задач на использование `parentNode` и заканчивая более сложными сценариями с применением `parentElement` и `closest`.

Список тем

Задание 1. Родитель первого уровня

Найдите родительский элемент для параграфа с id "child" и измените цвет текста родителя на синий.

HTML

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

                      <div id="parent">
  <p id="child">Это дочерний элемент.</p>
</div>

<div id="parent">
  <p id="child">Это дочерний элемент.</p>
</div>

JavaScript

const childElement = document.input__1("child");
const parentElement = childElement.input__2;
if (parentElement) {
  parentElement.style.input__3 = "blue";
}

                     const childElement = document.input__1("child");
const parentElement = childElement.input__2;
if (parentElement) {
  parentElement.style.input__3 = "blue";
}

Для поиска родительского элемента первого уровня можно использовать свойство `parentNode`. Сначала получите доступ к дочернему элементу по его id, а затем используйте `parentNode` чтобы получить родителя. После этого измените стиль родительского элемента, например, цвет текста (`style.color`).

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

Результат

Лог

Выполнить

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

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

Задание 2. Родительский элемент контейнера

Найдите родительский элемент для списка ul и добавьте ему границу (border) толщиной 2px, сплошную и черного цвета.

HTML

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

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

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

JavaScript

const listElement = document.input__1("ul");
const containerElement = listElement.input__2;
if (containerElement) {
  containerElement.style.input__3 = "2px solid black";
}

                     const listElement = document.input__1("ul");
const containerElement = listElement.input__2;
if (containerElement) {
  containerElement.style.input__3 = "2px solid black";
}

Аналогично предыдущему заданию, используйте `parentNode` для доступа к родителю списка `ul`. После получения родительского элемента, измените его стили, используя свойство `style.border`. Формат значения для `border`: "толщина тип цвет".

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

Результат

Лог

Выполнить

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

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

Задание 3. Родитель элемента изображения

Найдите родительский элемент для изображения и измените его отступ (padding) на 20px.

HTML

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

                      <div id="imageContainer">
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Картинка">
</div>

<div id="imageContainer">
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Картинка">
</div>

JavaScript

const imageElement = document.input__1("img");
const imageParent = imageElement.input__2;
if (imageParent) {
  imageParent.style.input__3 = "20px";
}

                     const imageElement = document.input__1("img");
const imageParent = imageElement.input__2;
if (imageParent) {
  imageParent.style.input__3 = "20px";
}

Используйте `getElementById` или `querySelector` для получения элемента `img`. Затем, примените `parentNode` для доступа к родительскому элементу. После этого измените свойство `style.padding` родителя.

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

Результат

Лог

Выполнить

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

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

Задание 4. Изменение текста родительского элемента span

Найдите родителя элемента span с id "targetSpan" и измените текст этого родителя на "Новый текст родителя".

HTML

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

                      <div>
  <p>Текст абзаца, внутри <span id="targetSpan">span элемент</span>.</p>
</div>

<div>
  <p>Текст абзаца, внутри <span id="targetSpan">span элемент</span>.</p>
</div>

JavaScript

const spanElement = document.input__1("targetSpan");
const parentOfSpan = spanElement.input__2;
if (parentOfSpan) {
  parentOfSpan.input__3 = "Новый текст родителя";
}

                     const spanElement = document.input__1("targetSpan");
const parentOfSpan = spanElement.input__2;
if (parentOfSpan) {
  parentOfSpan.input__3 = "Новый текст родителя";
}

Сначала получите доступ к элементу `span` по его id. Затем, используя `parentNode`, найдите его родительский элемент. После этого измените свойство `textContent` родительского элемента на необходимый текст.

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

Результат

Лог

Выполнить

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

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

Задание 5. Родительский элемент и добавление класса

Найдите родительский элемент для кнопки и добавьте ему класс "highlight".

CSS

.highlight {
  background-color: lightyellow;
}

HTML

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

                      <div id="buttonContainer">
  <button>Кнопка</button>
</div>

<div id="buttonContainer">
  <button>Кнопка</button>
</div>

JavaScript

const buttonElement = document.input__1("button");
const parentButton = buttonElement.input__2;
if (parentButton) {
  parentButton.classList.input__3("highlight");
}

                     const buttonElement = document.input__1("button");
const parentButton = buttonElement.input__2;
if (parentButton) {
  parentButton.classList.input__3("highlight");
}

Получите доступ к кнопке, используя, например, `querySelector`. Затем найдите ее родительский элемент через `parentNode`. Для добавления класса используйте свойство `classList.add()` родительского элемента.

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

Результат

Лог

Выполнить

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

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

Задание 6. Поиск родителя списка li

Найдите родительский элемент для элемента списка `li` и измените стиль списка на `list-style-type: square;`.

HTML

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

                      <ul>
  <li>Элемент списка 1</li>
  <li id="listItem">Элемент списка 2</li>
</ul>

<ul>
  <li>Элемент списка 1</li>
  <li id="listItem">Элемент списка 2</li>
</ul>

JavaScript

const listItem = document.input__1("listItem");
const listParent = listItem.input__2;
if (listParent) {
  listParent.style.input__3 = "square";
}

                     const listItem = document.input__1("listItem");
const listParent = listItem.input__2;
if (listParent) {
  listParent.style.input__3 = "square";
}

Сначала получите доступ к элементу `li`. Затем найдите его родительский элемент, который должен быть `ul` или `ol`. После этого, измените стиль `list-style-type` родителя.

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

Результат

Лог

Выполнить

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

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

Задание 7. Родительский элемент и изменение фона

Найдите родительский элемент для ссылки `<a>` и установите цвет фона (background-color) родителя на светло-зеленый.

HTML

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

                      <nav>
  <a href="#">Ссылка</a>
</nav>

<nav>
  <a href="#">Ссылка</a>
</nav>

JavaScript

const linkElement = document.input__1("a");
const navElement = linkElement.input__2;
if (navElement) {
  navElement.style.input__3 = "lightgreen";
}

                     const linkElement = document.input__1("a");
const navElement = linkElement.input__2;
if (navElement) {
  navElement.style.input__3 = "lightgreen";
}

Получите доступ к ссылке `a`. Найдите ее родителя с помощью `parentNode`. Измените стиль фона родителя, используя `style.backgroundColor`.

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

Результат

Лог

Выполнить

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

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

Задание 8. Поиск родителя по классу (parentElement)

Найдите родительский элемент для элемента с id "inner" используя `parentElement` и измените текст элемента с классом "outer" на "Родитель найден!".

HTML

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

                      <div class="outer">
  <div id="inner">Внутренний элемент</div>
</div>
<div class="outer">Этот текст должен измениться</div>

<div class="outer">
  <div id="inner">Внутренний элемент</div>
</div>
<div class="outer">Этот текст должен измениться</div>

JavaScript

const innerElement = document.input__1("inner");
const outerElement = innerElement.input__2;
if (outerElement) {
  const targetOuter = document.input__3(".outer");
  if (targetOuter) {
    targetOuter.input__4 = "Родитель найден!";
  }
}

                     const innerElement = document.input__1("inner");
const outerElement = innerElement.input__2;
if (outerElement) {
  const targetOuter = document.input__3(".outer");
  if (targetOuter) {
    targetOuter.input__4 = "Родитель найден!";
  }
}

Получите доступ к элементу с id "inner". Используйте `parentElement` чтобы найти его родителя. Заметьте, html структура предполагает, что родитель элемента "inner" имеет класс "outer". Найдите элемент с классом "outer" и измените его `textContent`.

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

Результат

Лог

Выполнить

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

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