Изменение текстового содержимого элемента [Модуль 2: Манипуляция содержимым]: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

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

id: 37003_change-text-1

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

HTML

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

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

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

JavaScript

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

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

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

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

Результат

Лог

Выполнить

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

Задание 2. Изменение текста кнопки

id: 37003_change-text-2

Измените текст кнопки с "Кнопка" на "Нажми меня!". Используйте JavaScript для выбора кнопки и изменения ее отображаемого текста.

HTML

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

                      <button>Кнопка</button>

<button>Кнопка</button>

JavaScript

document.input__1("button").input__2 = "Нажми меня!";

                     document.input__1("button").input__2 = "Нажми меня!";

Для выбора элемента по селектору используйте `document.querySelector("selector")`. Селектором в данном случае может быть тег `button`. Для изменения текста используйте `textContent` или `innerText`.

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

Результат

Лог

Выполнить

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

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

id: 37003_change-text-3

Измените текст всех элементов списка (li) на "Элемент списка". Используйте JavaScript для выбора всех элементов списка и измените их текстовое содержимое.

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

let listItems = document.input__1("li");
listItems.forEach(function(item) {
  item.input__2 = "Элемент списка";
});

                     let listItems = document.input__1("li");
listItems.forEach(function(item) {
  item.input__2 = "Элемент списка";
});

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

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

Результат

Лог

Выполнить

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

Задание 4. Использование textContent и innerText

id: 37003_change-text-4

Измените текст элемента `span` внутри параграфа на "Важный текст" используя свойство `textContent`. Затем попробуйте использовать `innerText` и убедитесь, что результат идентичен. В данном задании важен именно способ изменения текста.

HTML

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

                      <p>Это параграф с <span>текстом</span> внутри.</p>

<p>Это параграф с <span>текстом</span> внутри.</p>

JavaScript

let spanElement = document.input__1("span");
spanElement.input__2 = "Важный текст";

                     let spanElement = document.input__1("span");
spanElement.input__2 = "Важный текст";

Свойства `textContent` и `innerText` используются для получения или изменения текстового содержимого элемента. В большинстве случаев они работают одинаково, но есть различия в обработке пробелов и HTML-тегов. Для данного задания используйте любое из этих свойств.

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

Результат

Лог

Выполнить

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

Задание 5. Добавление текста к существующему

id: 37003_change-text-5

Добавьте к текущему тексту параграфа фразу " и что-то еще". Используйте JavaScript для получения текущего текста и добавления к нему новой фразы.

HTML

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

                      <p id="textToAppend">Начальный текст</p>

<p id="textToAppend">Начальный текст</p>

JavaScript

let paragraph = document.input__1("textToAppend");
let currentText = paragraph.input__2;
paragraph.input__3 = currentText + " и что-то еще";

                     let paragraph = document.input__1("textToAppend");
let currentText = paragraph.input__2;
paragraph.input__3 = currentText + " и что-то еще";

Сначала получите текущий текст элемента с помощью `textContent` или `innerText`. Затем, используя оператор `+` (конкатенация строк), добавьте к полученной строке новую фразу и присвойте результат обратно свойству `textContent` или `innerText` элемента.

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

Результат

Лог

Выполнить

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

Задание 6. Замена части текста

id: 37003_change-text-6

Замените слово "старый" в параграфе на слово "новый". Вам нужно получить текущий текст, заменить часть текста и обновить содержимое параграфа.

HTML

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

                      <p id="textToReplace">Это старый текст.</p>

<p id="textToReplace">Это старый текст.</p>

JavaScript

let paragraph = document.input__1("textToReplace");
let currentText = paragraph.input__2;
let newText = currentText.input__3("старый", "новый");
paragraph.input__4 = newText;

                     let paragraph = document.input__1("textToReplace");
let currentText = paragraph.input__2;
let newText = currentText.input__3("старый", "новый");
paragraph.input__4 = newText;

Вы можете использовать метод `replace()` для строк в JavaScript. Сначала получите текущий текст, затем используйте `replace("что заменить", "на что заменить")` чтобы заменить часть текста, и присвойте результат обратно элементу.

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

Результат

Лог

Выполнить

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

Задание 7. Очистка текстового содержимого

id: 37003_change-text-7

Очистите текстовое содержимое элемента `div` с id "clearMe". Используйте JavaScript, чтобы удалить весь текст внутри этого элемента.

HTML

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

                      <div id="clearMe">Текст, который нужно удалить</div>

<div id="clearMe">Текст, который нужно удалить</div>

JavaScript

let divElement = document.input__1("clearMe");
divElement.input__2 = "";

                     let divElement = document.input__1("clearMe");
divElement.input__2 = "";

Чтобы очистить текстовое содержимое элемента, достаточно присвоить свойству `textContent` или `innerText` пустую строку (`""`).

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

Результат

Лог

Выполнить

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

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

id: 37003_change-text-8

Измените текст всех элементов с классом "text-item" на "Новый элемент". Используйте JavaScript для выбора элементов по классу и изменения их текста.

HTML

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

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

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

JavaScript

let elements = document.input__1(".text-item");
elements.forEach(function(element) {
  element.input__2 = "Новый элемент";
});

                     let elements = document.input__1(".text-item");
elements.forEach(function(element) {
  element.input__2 = "Новый элемент";
});

Для выбора элементов по классу используйте `document.querySelectorAll(".className")`. Не забудьте, что `querySelectorAll` возвращает коллекцию, которую нужно перебрать, чтобы изменить текст каждого элемента.

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

Результат

Лог

Выполнить

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