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

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

Умение находить первый и последний дочерние элементы в DOM открывает широкие возможности для манипуляции веб-страницей. Вы сможете динамически изменять контент, стили и структуру элементов, делая ваш сайт интерактивным и удобным для пользователя. В этом уроке вы выполните несколько практических заданий, которые помогут вам закрепить эти навыки. Каждое задание состоит из HTML-разметки и фрагмента JavaScript-кода, в котором вам нужно будет дописать пропущенные части, чтобы решить поставленную задачу. Внимательно читайте описания заданий и используйте подсказки, если возникнут трудности. Успехов!

Список тем

Изменение текста первого элемента списка

Найдите первый элемент списка `ul` и измените его текст на 'Первый элемент изменен!'. Используйте свойства DOM для навигации по дереву элементов.

HTML

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

                      <ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

JavaScript

const list = document.querySelector('ul');
const firstChild = list.input__1;
firstChild.input__2 = 'Первый элемент изменен!';

                     const list = document.querySelector('ul');
const firstChild = list.input__1;
firstChild.input__2 = 'Первый элемент изменен!';

Используйте свойства `firstElementChild` или `firstChild` для доступа к первому дочернему элементу. Затем используйте `textContent` для изменения текста.

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

Результат

Лог

Выполнить

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

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

Изменение стиля последнего элемента списка

Найдите последний элемент списка `ul` и измените цвет его текста на красный. Используйте свойства DOM для навигации и свойство `style` для изменения стиля.

HTML

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

                      <ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

JavaScript

const list = document.querySelector('ul');
const lastChild = list.input__1;
lastChild.style.input__2 = 'red';

                     const list = document.querySelector('ul');
const lastChild = list.input__1;
lastChild.style.input__2 = 'red';

Используйте свойства `lastElementChild` или `lastChild` для доступа к последнему дочернему элементу. Затем используйте свойство `style` для изменения CSS-стилей.

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

Результат

Лог

Выполнить

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

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

Получение идентификатора первого элемента блока

Получите значение атрибута `id` первого дочернего элемента блока `div` с классом 'container'. Используйте методы DOM для навигации и получения атрибутов.

HTML

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

                      <div class="container">
  <p id="firstParagraph">Первый параграф</p>
  <p id="secondParagraph">Второй параграф</p>
</div>

<div class="container">
  <p id="firstParagraph">Первый параграф</p>
  <p id="secondParagraph">Второй параграф</p>
</div>

JavaScript

const container = document.querySelector('.container');
const firstChild = container.input__1;
const firstChildId = firstChild.input__2('id');

                     const container = document.querySelector('.container');
const firstChild = container.input__1;
const firstChildId = firstChild.input__2('id');

Сначала найдите блок `div` с классом 'container' используя `querySelector`. Затем получите его первый дочерний элемент и используйте `getAttribute` для получения значения атрибута `id`.

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

Результат

Лог

Выполнить

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

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

Проверка наличия класса у последнего элемента

Проверьте, содержит ли последний дочерний элемент списка `ul` класс 'last-item'. Если нет, добавьте этот класс. Используйте свойства DOM для навигации и методы для работы с классами.

HTML

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

                      <ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

JavaScript

const list = document.querySelector('ul');
const lastChild = list.input__1;
if (!lastChild.classList.input__2('last-item')) {
  lastChild.classList.input__3('last-item');
}

                     const list = document.querySelector('ul');
const lastChild = list.input__1;
if (!lastChild.classList.input__2('last-item')) {
  lastChild.classList.input__3('last-item');
}

Найдите последний дочерний элемент списка. Используйте `classList.contains()` чтобы проверить наличие класса и `classList.add()` чтобы добавить класс.

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

Результат

Лог

Выполнить

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

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

Удаление первого элемента из списка

Удалите первый дочерний элемент из списка `ol`. Используйте методы DOM для навигации и удаления элементов.

HTML

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

                      <ol>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ol>

<ol>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ol>

JavaScript

const list = document.querySelector('ol');
const firstChild = list.input__1;
list.input__2(firstChild);

                     const list = document.querySelector('ol');
const firstChild = list.input__1;
list.input__2(firstChild);

Найдите список `ol`. Получите его первый дочерний элемент и используйте метод `remove()` или `removeChild()` родительского элемента для удаления.

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

Результат

Лог

Выполнить

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

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

Добавление элемента перед последним элементом списка

Создайте новый элемент списка `li` с текстом 'Новый элемент' и добавьте его в конец списка `ul`, но перед последним существующим элементом. Используйте методы DOM для создания, навигации и вставки элементов.

HTML

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

                      <ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

JavaScript

const list = document.querySelector('ul');
const newLi = document.input__1('li');
newLi.input__2 = 'Новый элемент';
const lastChild = list.input__3;
list.input__4(newLi, lastChild);

                     const list = document.querySelector('ul');
const newLi = document.input__1('li');
newLi.input__2 = 'Новый элемент';
const lastChild = list.input__3;
list.input__4(newLi, lastChild);

Создайте новый элемент `li` с помощью `createElement`. Найдите последний дочерний элемент списка. Используйте `insertBefore()` родительского элемента, чтобы вставить новый элемент перед последним.

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

Результат

Лог

Выполнить

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

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

Замена первого элемента списка изображением

Найдите первый элемент списка `ul` и замените его на изображение `img` с `src` 'https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png'. Используйте методы DOM для создания, навигации и замены элементов.

CSS

img { width: 50px; height: 50px; }

HTML

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

                      <ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

JavaScript

const list = document.querySelector('ul');
const firstChild = list.input__1;
const newImg = document.input__2('img');
newImg.src = 'https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png';
list.input__3(newImg, firstChild);

                     const list = document.querySelector('ul');
const firstChild = list.input__1;
const newImg = document.input__2('img');
newImg.src = 'https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png';
list.input__3(newImg, firstChild);

Создайте новый элемент `img` с помощью `createElement` и установите атрибут `src`. Найдите первый дочерний элемент списка. Используйте `replaceChild()` родительского элемента, чтобы заменить первый элемент изображением.

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

Результат

Лог

Выполнить

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

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

Клонирование и добавление первого элемента в конец списка

Клонируйте первый дочерний элемент списка `ul` и добавьте его в конец этого же списка. Используйте методы DOM для клонирования и добавления элементов.

HTML

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

                      <ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

JavaScript

const list = document.querySelector('ul');
const firstChild = list.input__1;
const clonedChild = firstChild.input__2(true);
list.input__3(clonedChild);

                     const list = document.querySelector('ul');
const firstChild = list.input__1;
const clonedChild = firstChild.input__2(true);
list.input__3(clonedChild);

Найдите первый дочерний элемент списка. Используйте `cloneNode(true)` для создания глубокой копии элемента. Используйте `appendChild()` родительского элемента, чтобы добавить клонированный элемент в конец списка.

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

Результат

Лог

Выполнить

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

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

Перемещение последнего элемента списка в начало

Найдите последний дочерний элемент списка `ol` и переместите его в начало списка, сделав его первым дочерним элементом. Используйте методы DOM для навигации и перемещения элементов.

HTML

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

                      <ol>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ol>

<ol>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ol>

JavaScript

const list = document.querySelector('ol');
const lastChild = list.input__1;
const firstChild = list.input__2;
list.input__3(lastChild, firstChild);

                     const list = document.querySelector('ol');
const lastChild = list.input__1;
const firstChild = list.input__2;
list.input__3(lastChild, firstChild);

Найдите последний дочерний элемент списка. Используйте `insertBefore()` родительского элемента, чтобы вставить последний элемент перед первым дочерним элементом (который можно получить как `firstElementChild` или `firstChild`).

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

Результат

Лог

Выполнить

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

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

Изменение атрибута src у первого изображения в блоке

Найдите первый элемент `img` внутри блока `div` с классом 'image-container' и измените его атрибут `src` на 'https://naytikurs.ru/assets/uploads/2025/03/naskolko-vas-legko-obmanut-v-internete-300x300.png'. Используйте методы DOM для навигации и изменения атрибутов.

HTML

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

                      <div class="image-container">
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 2">
</div>

<div class="image-container">
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image 1">
  <img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 2">
</div>

JavaScript

const container = document.querySelector('.image-container');
const firstImage = container.input__1;
firstImage.input__2('src', 'https://naytikurs.ru/assets/uploads/2025/03/naskolko-vas-legko-obmanut-v-internete-300x300.png');

                     const container = document.querySelector('.image-container');
const firstImage = container.input__1;
firstImage.input__2('src', 'https://naytikurs.ru/assets/uploads/2025/03/naskolko-vas-legko-obmanut-v-internete-300x300.png');

Сначала найдите блок `div` с классом 'image-container'. Затем найдите в нем первый элемент `img`. Используйте `setAttribute()` для изменения атрибута `src`.

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

Результат

Лог

Выполнить

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

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