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

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

В этом блоке заданий вы научитесь изменять текст внутри HTML элементов. Начнем с простого изменения текста в параграфе, затем перейдем к изменению текста в списках, заголовках и элементах с определенными классами. Вы узнаете, как использовать `getElementById`, `querySelector`, `querySelectorAll` и другие методы для выбора элементов, а также свойства `textContent` и `innerHTML` для изменения их содержимого. Каждое задание предоставит вам готовый HTML и часть JavaScript кода, которую вам нужно будет дополнить.

Список тем

Задание 1. Простое изменение текста

Замените текст параграфа с идентификатором `myParagraph` на 'Новый текст'. Используйте JavaScript для доступа к элементу и изменения его текстового содержимого.

HTML

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

                      <p id="myParagraph">Старый текст</p>

<p id="myParagraph">Старый текст</p>

JavaScript

document.input__1("myParagraph").input__2 = "Новый текст";

                     document.input__1("myParagraph").input__2 = "Новый текст";

Для доступа к элементу по его идентификатору используйте метод `document.getElementById()`. Чтобы изменить текст внутри элемента, используйте свойство `textContent`.

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

Результат

Лог

Выполнить

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

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

Задание 2. Изменение текста заголовка

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

HTML

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

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

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

JavaScript

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

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

Метод `document.querySelector()` позволяет выбрать первый элемент, соответствующий CSS-селектору. Для выбора `h1` элемента используйте селектор `'h1'`. Свойство для изменения текста остается `textContent`.

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

Результат

Лог

Выполнить

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

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

Задание 3. Изменение текста элемента по классу

Замените текст элемента с классом `text-block` на 'Текст изменен через класс'. Используйте `querySelector` для выбора элемента по классу.

HTML

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

                      <div class="text-block">Исходный текст</div>

<div class="text-block">Исходный текст</div>

JavaScript

document.input__1(".text-block").input__2 = "Текст изменен через класс";

                     document.input__1(".text-block").input__2 = "Текст изменен через класс";

Для выбора элемента по классу в `querySelector` используйте CSS-селектор класса, например, `'.имяКласса'`. Не забудьте про точку перед именем класса.

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

Результат

Лог

Выполнить

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

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

Задание 4. Изменение текста нескольких элементов

Замените текст всех элементов `li` на 'Новый пункт списка'. Используйте `querySelectorAll` для выбора всех элементов списка и цикл для их перебора.

HTML

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

                      <ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

JavaScript

const listItems = document.input__1("li");
for (const item of listItems) {
  item.input__2 = "Новый пункт списка";
}

                     const listItems = document.input__1("li");
for (const item of listItems) {
  item.input__2 = "Новый пункт списка";
}

Метод `document.querySelectorAll()` возвращает коллекцию всех элементов, соответствующих селектору. Для перебора коллекции используйте цикл `for...of` или метод `forEach`. Внутри цикла изменяйте `textContent` каждого элемента.

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

Результат

Лог

Выполнить

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

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

Задание 5. Изменение текста внутри span элемента

Замените текст внутри элемента `span` на 'Измененный текст span'. Выберите `span` внутри параграфа с id `paragraphWithSpan`.

HTML

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

                      <p id="paragraphWithSpan">Текст с <span class="inner-text">внутренним span</span> элементом.</p>

<p id="paragraphWithSpan">Текст с <span class="inner-text">внутренним span</span> элементом.</p>

JavaScript

const spanElement = document.input__1("#paragraphWithSpan input__2");
spanElement.input__3 = "Измененный текст span";

                     const spanElement = document.input__1("#paragraphWithSpan input__2");
spanElement.input__3 = "Измененный текст span";

Используйте `querySelector` для выбора `span` элемента. Можно использовать составной селектор, например, `'#paragraphWithSpan span'` для выбора `span` внутри элемента с id `paragraphWithSpan`.

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

Результат

Лог

Выполнить

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

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

Задание 6. Изменение текста с условием

Проверьте, если текст параграфа с id `conditionalParagraph` равен 'Исходный текст', то замените его на 'Текст изменен по условию'.

HTML

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

                      <p id="conditionalParagraph">Исходный текст</p>

<p id="conditionalParagraph">Исходный текст</p>

JavaScript

const paragraph = document.input__1("conditionalParagraph");
if (paragraph.input__2 === "Исходный текст") {
  paragraph.input__3 = "Текст изменен по условию";
}

                     const paragraph = document.input__1("conditionalParagraph");
if (paragraph.input__2 === "Исходный текст") {
  paragraph.input__3 = "Текст изменен по условию";
}

Сначала получите элемент параграфа. Затем используйте условный оператор `if` для проверки `textContent` элемента. Если условие выполняется, измените `textContent` на новое значение.

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

Результат

Лог

Выполнить

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

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

Задание 7. Изменение текста используя innerHTML

Замените содержимое div с id `htmlContainer` на '<h2>Новый заголовок</h2><p>Новый параграф</p>'. Используйте свойство `innerHTML`.

HTML

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

                      <div id="htmlContainer">Старое содержимое</div>

<div id="htmlContainer">Старое содержимое</div>

JavaScript

const container = document.input__1("htmlContainer");
container.input__2 = "<h2>Новый заголовок</h2><p>Новый параграф</p>";

                     const container = document.input__1("htmlContainer");
container.input__2 = "<h2>Новый заголовок</h2><p>Новый параграф</p>";

Свойство `innerHTML` позволяет устанавливать HTML-содержимое элемента. Используйте `getElementById` или `querySelector` для выбора элемента, а затем присвойте свойству `innerHTML` новую HTML строку.

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

Результат

Лог

Выполнить

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

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

Задание 8. Получение и изменение текста кнопки

Получите текст кнопки с id `myButton`, выведите его в консоль, а затем измените текст кнопки на 'Нажата!'.

HTML

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

                      <button id="myButton">Нажми меня</button>

<button id="myButton">Нажми меня</button>

JavaScript

const button = document.input__1("myButton");
console.log(button.input__2);
button.input__3 = "Нажата!";

                     const button = document.input__1("myButton");
console.log(button.input__2);
button.input__3 = "Нажата!";

Сначала получите элемент кнопки по id. Используйте `textContent` для получения и изменения текста. Для вывода в консоль используйте `console.log()`.

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

Результат

Лог

Выполнить

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

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

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

Замените текст только первого элемента с классом `item` на 'Первый элемент изменен'. Даже если элементов с классом `item` несколько, изменить нужно только первый.

HTML

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

                      <div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="item">Элемент 3</div>

<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
<div class="item">Элемент 3</div>

JavaScript

const firstItem = document.input__1(".item");
firstItem.input__2 = "Первый элемент изменен";

                     const firstItem = document.input__1(".item");
firstItem.input__2 = "Первый элемент изменен";

Используйте `querySelector` для выбора первого элемента с классом `item`. `querySelector` вернет только первый найденный элемент.

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

Результат

Лог

Выполнить

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

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

Задание 10. Изменение текста элемента по data-атрибуту

Замените текст элемента с `data-element-type="description"` на 'Текст изменен по data-атрибуту'. Используйте `querySelector` и селектор атрибута.

HTML

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

                      <div data-element-type="description">Описание элемента</div>

<div data-element-type="description">Описание элемента</div>

JavaScript

const dataElement = document.input__1("[data-element-type='description']");
dataElement.input__2 = "Текст изменен по data-атрибуту";

                     const dataElement = document.input__1("[data-element-type='description']");
dataElement.input__2 = "Текст изменен по data-атрибуту";

Для выбора элемента по data-атрибуту в `querySelector` используйте селектор атрибута, например, `'[data-имя-атрибута="значение"]'`.

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

Результат

Лог

Выполнить

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

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