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

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

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

Список тем

Задание 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. Изменение текста кнопки

Измените текст кнопки с "Кнопка" на "Нажми меня!". Используйте 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. Изменение текста нескольких элементов

Измените текст всех элементов списка (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

Измените текст элемента `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. Добавление текста к существующему

Добавьте к текущему тексту параграфа фразу " и что-то еще". Используйте 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. Замена части текста

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

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. Очистка текстового содержимого

Очистите текстовое содержимое элемента `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. Изменение текста элемента с классом

Измените текст всех элементов с классом "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` возвращает коллекцию, которую нужно перебрать, чтобы изменить текст каждого элемента.

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

Результат

Лог

Выполнить

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

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