Выбор элемента по ID: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

Выбор элемента по ID и изменение текста

Найдите на странице HTML-элемент <p> с идентификатором "greeting" и измените его текстовое содержимое на "Привет, мир!".

HTML

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

                      <p id="greeting">Здравствуйте!</p>

<p id="greeting">Здравствуйте!</p>

JavaScript

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

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

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

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

Результат

Лог

Выполнить

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

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

Выбор элемента по ID и изменение цвета текста

Найдите заголовок <h1> с идентификатором "main-title" и измените цвет его текста на синий (blue).

HTML

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

                      <h1 id="main-title">Заголовок страницы</h1>

<h1 id="main-title">Заголовок страницы</h1>

JavaScript

const titleElement = document.getElementById(input__1);
titleElement.input__2.input__3 = "blue";

                     const titleElement = document.getElementById(input__1);
titleElement.input__2.input__3 = "blue";

Сначала выберите элемент с помощью `document.getElementById()`. Затем получите доступ к его стилям через свойство `style`. Цвет текста задается свойством `color`.

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

Результат

Лог

Выполнить

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

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

Выбор изображения по ID и смена источника

Найдите изображение <img> с идентификатором "logo-image" и измените его атрибут `src` так, чтобы оно отображало картинку `https://naytikurs.ru/img/2.png`.

CSS

img {
  max-width: 100%;
  height: auto;
  display: block;
}

HTML

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

                      <img id="logo-image" src="https://naytikurs.ru/img/1.png" alt="Логотип">

<img id="logo-image" src="https://naytikurs.ru/img/1.png" alt="Логотип">

JavaScript

const image = input__1(input__2);
image.input__3 = "https://naytikurs.ru/img/2.png";

                     const image = input__1(input__2);
image.input__3 = "https://naytikurs.ru/img/2.png";

Используйте `document.getElementById()` для выбора изображения. Атрибут `src` доступен как свойство выбранного элемента.

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

Результат

Лог

Выполнить

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

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

Выбор элемента по ID и добавление CSS-класса

Найдите элемент <div> с идентификатором "content-box" и добавьте ему CSS-класс "highlight".

CSS

.highlight {
  background-color: yellow;
  border: 1px solid orange;
  padding: 10px;
}

HTML

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

                      <div id="content-box">Какой-то контент внутри блока.</div>

<div id="content-box">Какой-то контент внутри блока.</div>

JavaScript

const box = document.getElementById("content-box");
box.input__1.input__2(input__3);

                     const box = document.getElementById("content-box");
box.input__1.input__2(input__3);

Выберите элемент с помощью `document.getElementById()`. Для работы с классами элемента используйте свойство `classList` и его метод `add('имя_класса')`.

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

Результат

Лог

Выполнить

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

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

Выбор элемента по ID и изменение нескольких стилей

Найдите кнопку <button> с идентификатором "action-button" и измените цвет её фона на зеленый ("green") и цвет текста на белый ("white").

CSS

button {
  padding: 10px 15px;
  cursor: pointer;
}

HTML

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

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

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

JavaScript

const button = document.getElementById("action-button");
button.style.input__1 = "green";
button.input__2.input__3 = "white";

                     const button = document.getElementById("action-button");
button.style.input__1 = "green";
button.input__2.input__3 = "white";

Выберите кнопку через `document.getElementById()`. Доступ к стилям осуществляется через свойство `style`. Для цвета фона используйте `backgroundColor`, для цвета текста - `color`.

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

Результат

Лог

Выполнить

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

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

Выбор ссылки по ID и изменение атрибута href

Найдите ссылку <a> с идентификатором "external-link" и измените её атрибут `href` так, чтобы она вела на "https://example.com". Также измените текст ссылки на "Перейти на Example.com".

HTML

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

                      <a id="external-link" href="#">Старая ссылка</a>

<a id="external-link" href="#">Старая ссылка</a>

JavaScript

const link = document.input__1("external-link");
link.input__2 = "https://example.com";
link.input__3 = "Перейти на Example.com";

                     const link = document.input__1("external-link");
link.input__2 = "https://example.com";
link.input__3 = "Перейти на Example.com";

Выберите ссылку с помощью `document.getElementById()`. Атрибут `href` и текстовое содержимое (`textContent` или `innerText`) доступны как свойства выбранного элемента.

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

Результат

Лог

Выполнить

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

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

Выбор элемента по ID и скрытие его

Найдите элемент <div> с идентификатором "disclaimer" и скройте его со страницы, установив CSS-свойство `display` в значение `none`.

CSS

#disclaimer {
  padding: 5px;
  border: 1px dashed gray;
  margin-top: 15px;
}

HTML

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

                      <div id="disclaimer">Важное уведомление!</div>

<div id="disclaimer">Важное уведомление!</div>

JavaScript

const disclaimerBox = document.getElementById(input__1);
disclaimerBox.input__2.input__3 = input__4;

                     const disclaimerBox = document.getElementById(input__1);
disclaimerBox.input__2.input__3 = input__4;

Используйте `document.getElementById()` для выбора элемента. Доступ к стилям осуществляется через свойство `style`. Чтобы скрыть элемент, установите свойство `display` в значение `'none'`.

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

Результат

Лог

Выполнить

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

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

Выбор поля ввода по ID и его отключение

Найдите поле ввода <input> с идентификатором "user-email" и сделайте его неактивным (отключенным), установив его атрибут `disabled`.

CSS

input[disabled] {
  background-color: #eee;
  cursor: not-allowed;
}

HTML

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

                      <label for="user-email">Email:</label>
<input type="email" id="user-email" placeholder="Введите email">

<label for="user-email">Email:</label>
<input type="email" id="user-email" placeholder="Введите email">

JavaScript

const emailInput = document.input__1("user-email");
emailInput.input__2 = input__3;

                     const emailInput = document.input__1("user-email");
emailInput.input__2 = input__3;

Выберите поле ввода с помощью `document.getElementById()`. Атрибут `disabled` доступен как свойство элемента. Чтобы отключить элемент, присвойте этому свойству значение `true`.

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

Результат

Лог

Выполнить

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

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