Установка значения атрибута: Тренажер JavaScript: Покоряем HTML DOM

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

В этом разделе вы попрактикуетесь в изменении атрибутов HTML-элементов, используя JavaScript. Каждое задание предоставит вам готовый HTML-код и фрагмент JavaScript, в котором вам нужно будет заполнить пропуски, чтобы добиться желаемого результата. Задания расположены от простого к сложному, начиная с изменения простых атрибутов, таких как `src` и `id`, и заканчивая более сложными, такими как `data-*` и условное изменение атрибутов. Вы сможете увидеть результат своих действий визуально, что поможет вам лучше понять, как JavaScript взаимодействует с DOM.

Список тем

Задание 1. Изменение атрибута src

Измените изображение, заменив значение атрибута `src` на другой URL.

HTML

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

                      <img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Изображение">

<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Изображение">

JavaScript

const image = document.input__1("myImage");
image.input__2 = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png";

                     const image = document.input__1("myImage");
image.input__2 = "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png";

Используйте метод `document.querySelector()` или `document.getElementById()` для выбора элемента `img`. Затем, используя свойство `src`, установите новое значение URL.

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

Результат

Лог

Выполнить

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

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

Задание 2. Добавление класса

Добавьте класс `highlight` к параграфу, чтобы изменить его стиль.

CSS

.highlight {
  color: red;
  font-weight: bold;
}

HTML

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

                      <p id="myParagraph">Этот параграф нужно выделить.</p>

<p id="myParagraph">Этот параграф нужно выделить.</p>

JavaScript

const paragraph = document.input__1("myParagraph");
paragraph.classList.input__2("highlight");

                     const paragraph = document.input__1("myParagraph");
paragraph.classList.input__2("highlight");

Найдите параграф по его `id` и используйте свойство `classList` и метод `add()` для добавления класса.

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

Результат

Лог

Выполнить

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

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

Задание 3. Изменение идентификатора

Измените `id` кнопки с `oldButton` на `newButton`.

HTML

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

                      <button id="oldButton">Кнопка</button>

<button id="oldButton">Кнопка</button>

JavaScript

const button = document.input__1("oldButton");
button.input__2 = "newButton";

                     const button = document.input__1("oldButton");
button.input__2 = "newButton";

Выберите кнопку по ее текущему `id` и измените свойство `id` на новое значение.

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

Результат

Лог

Выполнить

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

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

Задание 4. Установка стиля через атрибут

Измените цвет текста заголовка, установив атрибут `style`.

HTML

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

                      <h1 id="myTitle">Заголовок</h1>

<h1 id="myTitle">Заголовок</h1>

JavaScript

const title = document.input__1("myTitle");
title.input__2 = "color: blue;";

                     const title = document.input__1("myTitle");
title.input__2 = "color: blue;";

Найдите заголовок `h1` и установите значение атрибута `style` для изменения цвета текста.

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

Результат

Лог

Выполнить

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

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

Задание 5. Установка произвольного атрибута

Добавьте произвольный атрибут `data-custom` со значением `example` к кнопке.

HTML

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

                      <button id="myButton">Кнопка</button>

<button id="myButton">Кнопка</button>

JavaScript

const button = document.input__1("myButton");
button.input__2("data-custom", input__3);

                     const button = document.input__1("myButton");
button.input__2("data-custom", input__3);

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

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

Результат

Лог

Выполнить

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

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

Задание 6. Удаление атрибута

Удалите атрибут `alt` у изображения.

HTML

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

                      <img id="myImage" src="image.png" alt="Описание изображения">

<img id="myImage" src="image.png" alt="Описание изображения">

JavaScript

const image = document.input__1("myImage");
image.input__2("alt");

                     const image = document.input__1("myImage");
image.input__2("alt");

Найдите изображение и используйте метод `removeAttribute()` для удаления атрибута.

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

Результат

Лог

Выполнить

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

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

Задание 7. Установка атрибута для нескольких элементов

Установите атрибут `disabled` для всех кнопок на странице.

HTML

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

                      <button class="btn">Кнопка 1</button>
<button class="btn">Кнопка 2</button>
<button class="btn">Кнопка 3</button>

<button class="btn">Кнопка 1</button>
<button class="btn">Кнопка 2</button>
<button class="btn">Кнопка 3</button>

JavaScript

const buttons = document.input__1("button");
for (let i = 0; i < buttons.length; i++) {
  buttons[i].input__2 = true;
}

                     const buttons = document.input__1("button");
for (let i = 0; i < buttons.length; i++) {
  buttons[i].input__2 = true;
}

Используйте `document.querySelectorAll()` для выбора всех кнопок и в цикле установите атрибут `disabled`.

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

Результат

Лог

Выполнить

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

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

Задание 8. Условное изменение атрибута

Если параграф содержит текст 'важно', добавьте ему класс `important`, иначе добавьте класс `normal`.

CSS

.important {
  color: orange;
  font-size: 18px;
}
.normal {
  color: green;
}

HTML

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

                      <p id="checkParagraph">Этот параграф содержит текст важно.</p>

<p id="checkParagraph">Этот параграф содержит текст важно.</p>

JavaScript

const paragraph = document.input__1("checkParagraph");
if (paragraph.input__2.includes("важно")) {
  paragraph.classList.input__3("important");
} else {
  paragraph.classList.input__4("normal");
}

                     const paragraph = document.input__1("checkParagraph");
if (paragraph.input__2.includes("важно")) {
  paragraph.classList.input__3("important");
} else {
  paragraph.classList.input__4("normal");
}

Выберите параграф, проверьте его текстовое содержимое с помощью `textContent` и условно добавьте класс через `classList.add()`.

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

Результат

Лог

Выполнить

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

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