Работа с HTML-шаблонами: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

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

Найдите элемент с идентификатором `greeting` и измените его текстовое содержимое на "Привет, JavaScript!".

HTML

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

                      <div id="greeting">Привет, мир!</div>

<div id="greeting">Привет, мир!</div>

JavaScript

document.input__1("greeting").input__2 = "Привет, JavaScript!";

                     document.input__1("greeting").input__2 = "Привет, JavaScript!";

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

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

Результат

Лог

Выполнить

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

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

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

Найдите элемент с классом `highlight` и измените цвет его фона на желтый (`yellow`).

CSS

<style>
  .highlight {
    padding: 10px;
    border: 1px solid black;
  }
</style>

HTML

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

                      <div class="highlight">Этот блок нужно выделить.</div>

<div class="highlight">Этот блок нужно выделить.</div>

JavaScript

document.input__1(".highlight").style.input__2 = "yellow";

                     document.input__1(".highlight").style.input__2 = "yellow";

Используйте `document.querySelector()` или `document.getElementsByClassName()` для выбора элемента. Затем измените свойство `style.backgroundColor` элемента.

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

Результат

Лог

Выполнить

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

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

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

Создайте новый элемент `<p>` с текстом "Это новый абзац" и добавьте его в конец элемента `container`.

CSS

<style>
  #container {
    border: 1px solid gray;
    padding: 10px;
  }
</style>

HTML

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

                      <div id="container"></div>

<div id="container"></div>

JavaScript

const newParagraph = document.input__1("p");
newParagraph.input__2 = "Это новый абзац";
document.input__3("container").input__4(newParagraph);

                     const newParagraph = document.input__1("p");
newParagraph.input__2 = "Это новый абзац";
document.input__3("container").input__4(newParagraph);

Используйте `document.createElement('p')` для создания элемента. Затем установите его `textContent` и используйте `appendChild()` для добавления в `container`.

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

Результат

Лог

Выполнить

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

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

Установка атрибута элемента

Найдите изображение с классом `logo` и установите для него атрибут `src` на URL изображения: "https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png".

CSS

<style>
  .logo {
    width: 100px;
    height: auto;
  }
</style>

HTML

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

                      <img class="logo" alt="Логотип">

<img class="logo" alt="Логотип">

JavaScript

const logoImage = document.input__1(".logo");
logoImage.input__2("src", "https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png");

                     const logoImage = document.input__1(".logo");
logoImage.input__2("src", "https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png");

Используйте `document.querySelector()` для выбора изображения. Затем используйте метод `setAttribute('src', 'URL')` для установки атрибута.

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

Результат

Лог

Выполнить

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

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

Работа с коллекцией элементов

Найдите все элементы списка `<li>` и добавьте к тексту каждого элемента порядковый номер (1, 2, 3 и т.д.).

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 (let i = 0; i < listItems.length; i++) {
  listItems[i].input__2 = (i + 1) + ". " + listItems[i].input__3;
}

                     const listItems = document.input__1('li');
for (let i = 0; i < listItems.length; i++) {
  listItems[i].input__2 = (i + 1) + ". " + listItems[i].input__3;
}

Используйте `document.querySelectorAll('li')` для получения коллекции элементов. Затем переберите коллекцию с помощью цикла `for` или `forEach` и измените `textContent` каждого элемента.

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

Результат

Лог

Выполнить

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

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

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

Найдите кнопку с идентификатором `myButton` и добавьте ей класс `active`. CSS уже содержит стиль для класса `active`, чтобы кнопка выглядела выделенной.

CSS

<style>
  .active {
    background-color: lightblue;
    font-weight: bold;
  }
</style>

HTML

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

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

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

JavaScript

const button = document.input__1("myButton");
button.classList.input__2("active");

                     const button = document.input__1("myButton");
button.classList.input__2("active");

Используйте `document.getElementById()` для нахождения кнопки. Затем используйте свойство `classList.add('active')` для добавления класса.

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

Результат

Лог

Выполнить

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

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

Удаление элемента

Найдите элемент с идентификатором `removeMe` и удалите его из DOM.

HTML

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

                      <div id="container">
  <p id="removeMe">Этот абзац нужно удалить.</p>
</div>

<div id="container">
  <p id="removeMe">Этот абзац нужно удалить.</p>
</div>

JavaScript

const elementToRemove = document.input__1("removeMe");
const parentElement = elementToRemove.input__2;
parentElement.input__3(elementToRemove);

                     const elementToRemove = document.input__1("removeMe");
const parentElement = elementToRemove.input__2;
parentElement.input__3(elementToRemove);

Сначала найдите элемент, который нужно удалить, используя `document.getElementById()`. Затем получите его родительский элемент с помощью свойства `parentNode`. И, наконец, используйте метод `removeChild(element)` на родительском элементе, передав в него элемент для удаления.

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

Результат

Лог

Выполнить

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

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

Изменение HTML содержимого

Найдите элемент с идентификатором `contentBox` и замените его внутреннее HTML содержимое на `<h1>Новый заголовок</h1><p>Новый параграф.</p>`.

CSS

<style>
  #contentBox {
    border: 2px dashed lightgray;
    padding: 15px;
  }
</style>

HTML

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

                      <div id="contentBox">
  <p>Старый контент.</p>
</div>

<div id="contentBox">
  <p>Старый контент.</p>
</div>

JavaScript

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

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

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

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

Результат

Лог

Выполнить

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

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