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

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

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

Список тем

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

Найдите заголовок `<h1>` на странице и измените его текст на 'Новый заголовок страницы'.

HTML

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

                      <h1>Старый заголовок</h1>

<h1>Старый заголовок</h1>

JavaScript

document.input__1('h1').input__2 = 'Новый заголовок страницы';

                     document.input__1('h1').input__2 = 'Новый заголовок страницы';

Используйте метод `document.querySelector()` для поиска первого элемента `<h1>` и свойство `textContent` для изменения его текста.

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

Результат

Лог

Выполнить

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

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

Изменение текста абзаца по ID

Найдите абзац с идентификатором 'description' и замените его текст на 'Это новый текст для абзаца с ID description.'.

HTML

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

                      <p id="description">Старый текст абзаца.</p>

<p id="description">Старый текст абзаца.</p>

JavaScript

document.input__1('input__2').input__3 = 'Это новый текст для абзаца с ID description.';

                     document.input__1('input__2').input__3 = 'Это новый текст для абзаца с ID description.';

Используйте метод `document.getElementById()` для поиска элемента по ID и свойство `textContent` для изменения текста.

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

Результат

Лог

Выполнить

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

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

Изменение HTML содержимого элемента

Найдите элемент с классом 'message' и замените его содержимое на '<b>Важное сообщение!</b>'. Используйте для этого HTML разметку.

HTML

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

                      <div class="message">Простое сообщение</div>

<div class="message">Простое сообщение</div>

JavaScript

document.input__1('.message').input__2 = '<b>Важное сообщение!</b>';

                     document.input__1('.message').input__2 = '<b>Важное сообщение!</b>';

Используйте метод `document.querySelector()` для поиска элемента по классу и свойство `innerHTML` для изменения HTML содержимого.

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

Результат

Лог

Выполнить

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

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

Изменение стиля элемента

Найдите элемент с ID 'styledText' и измените цвет его текста на красный.

HTML

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

                      <p id="styledText" style="color: black;">Текст черного цвета</p>

<p id="styledText" style="color: black;">Текст черного цвета</p>

JavaScript

document.input__1('input__2').input__3.input__4 = 'red';

                     document.input__1('input__2').input__3.input__4 = 'red';

Используйте метод `document.getElementById()` для поиска элемента по ID и свойство `style.color` для изменения цвета текста.

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

Результат

Лог

Выполнить

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

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

Изменение атрибута изображения

Найдите изображение с ID 'logo' и измените его атрибут `src` на 'https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png'.

HTML

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

                      <img id="logo" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Логотип">

<img id="logo" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Логотип">

JavaScript

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

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

Используйте метод `document.getElementById()` для поиска элемента по ID и метод `setAttribute()` для изменения атрибута.

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

Результат

Лог

Выполнить

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

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

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

Найдите все элементы с классом 'item' и измените их текст на 'Новый пункт'.

HTML

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

                      <ul>
  <li class="item">Пункт 1</li>
  <li class="item">Пункт 2</li>
  <li class="item">Пункт 3</li>
</ul>

<ul>
  <li class="item">Пункт 1</li>
  <li class="item">Пункт 2</li>
  <li class="item">Пункт 3</li>
</ul>

JavaScript

let elements = document.input__1('item');
for (let i = 0; i < elements.length; i++) {
  elements[input__2].input__3 = 'Новый пункт';
}

                     let elements = document.input__1('item');
for (let i = 0; i < elements.length; i++) {
  elements[input__2].input__3 = 'Новый пункт';
}

Используйте метод `document.getElementsByClassName()` для поиска элементов по классу и цикл для перебора и изменения текста каждого элемента. Используйте свойство `textContent` для изменения текста.

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

Результат

Лог

Выполнить

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

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

Изменение стиля нескольких элементов

Найдите все абзацы на странице и измените цвет их текста на синий.

HTML

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

                      <p>Первый абзац.</p>
<p>Второй абзац.</p>
<p>Третий абзац.</p>

<p>Первый абзац.</p>
<p>Второй абзац.</p>
<p>Третий абзац.</p>

JavaScript

let paragraphs = document.input__1('p');
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[input__2].input__3.input__4 = 'blue';
}

                     let paragraphs = document.input__1('p');
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[input__2].input__3.input__4 = 'blue';
}

Используйте метод `document.querySelectorAll()` для поиска всех элементов `<p>` и цикл для перебора и изменения стиля каждого элемента. Используйте свойство `style.color`.

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

Результат

Лог

Выполнить

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

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

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

Добавьте новый пункт списка в конец неупорядоченного списка (ul) с ID 'list'. Текст нового пункта должен быть 'Новый пункт списка'.

HTML

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

                      <ul id="list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

<ul id="list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>

JavaScript

let list = document.input__1('input__2');
let newItem = document.input__3('li');
newItem.input__4 = 'Новый пункт списка';
list.input__5(newItem);

                     let list = document.input__1('input__2');
let newItem = document.input__3('li');
newItem.input__4 = 'Новый пункт списка';
list.input__5(newItem);

Используйте `document.getElementById()` для поиска списка, `document.createElement()` для создания нового элемента `<li>`, `textContent` для установки текста и `appendChild()` для добавления элемента в список.

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

Результат

Лог

Выполнить

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

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

Удаление элемента списка

Удалите последний пункт из неупорядоченного списка (ul) с ID 'list'.

HTML

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

                      <ul id="list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

<ul id="list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

JavaScript

let list = document.input__1('input__2');
let lastItem = list.input__3;
list.input__4(lastItem);

                     let list = document.input__1('input__2');
let lastItem = list.input__3;
list.input__4(lastItem);

Используйте `document.getElementById()` для поиска списка, свойство `lastElementChild` для получения последнего элемента и метод `removeChild()` для удаления.

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

Результат

Лог

Выполнить

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

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

Изменение текста по клику на кнопку

При клике на кнопку с ID 'myButton' измените текст абзаца с ID 'textTarget' на 'Текст изменен по клику!'.

HTML

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

                      <button id="myButton">Нажми меня</button>
<p id="textTarget">Исходный текст</p>

<button id="myButton">Нажми меня</button>
<p id="textTarget">Исходный текст</p>

JavaScript

let button = document.input__1('input__2');
let paragraph = document.input__3('input__4');
button.input__5('click', function() {
  paragraph.input__6 = 'Текст изменен по клику!';
});

                     let button = document.input__1('input__2');
let paragraph = document.input__3('input__4');
button.input__5('click', function() {
  paragraph.input__6 = 'Текст изменен по клику!';
});

Используйте `document.getElementById()` для поиска кнопки и абзаца, и `addEventListener()` для добавления обработчика события 'click' на кнопку. Внутри обработчика измените `textContent` абзаца.

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

Результат

Лог

Выполнить

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

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