Работа с `data-*` атрибутами: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

Получение значения `data-атрибута`

Выведите в консоль значение `data-product-id` атрибута элемента с id "product".

HTML

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

                      <div id="product" data-product-id="12345" data-product-name="Телефон">Товар</div>

<div id="product" data-product-id="12345" data-product-name="Телефон">Товар</div>

JavaScript

const productElement = document.input__1("product");
const productId = productElement.dataset.input__2;
console.log(productId);

                     const productElement = document.input__1("product");
const productId = productElement.dataset.input__2;
console.log(productId);

Используйте `document.getElementById()` для доступа к элементу и свойство `dataset` для получения доступа к `data-атрибутам`. Затем используйте имя атрибута (без `data-`) для доступа к его значению.

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

Результат

Лог

Выполнить

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

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

Отображение `data-атрибута` на странице

Отобразите значение `data-username` атрибута элемента с id "user-info" в параграфе с id "username-output".

HTML

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

                      <div id="user-info" data-username="JohnDoe">Информация о пользователе</div>
<p id="username-output"></p>

<div id="user-info" data-username="JohnDoe">Информация о пользователе</div>
<p id="username-output"></p>

JavaScript

const userInfoElement = document.input__1("user-info");
const usernameOutput = document.input__2("username-output");
const username = userInfoElement.dataset.input__3;
usernameOutput.textContent = username;

                     const userInfoElement = document.input__1("user-info");
const usernameOutput = document.input__2("username-output");
const username = userInfoElement.dataset.input__3;
usernameOutput.textContent = username;

Сначала получите доступ к элементу с `data-username` атрибутом и к параграфу для вывода. Затем получите значение `data-username` и установите его как текст содержимого параграфа.

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

Результат

Лог

Выполнить

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

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

Изменение текста кнопки на основе `data-атрибута`

Измените текст кнопки с id "action-button" на значение `data-button-text` атрибута этой же кнопки.

HTML

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

                      <button id="action-button" data-button-text="Нажми меня">Исходный текст</button>

<button id="action-button" data-button-text="Нажми меня">Исходный текст</button>

JavaScript

const button = document.input__1("action-button");
const buttonText = button.dataset.input__2;
button.textContent = input__3;

                     const button = document.input__1("action-button");
const buttonText = button.dataset.input__2;
button.textContent = input__3;

Получите доступ к кнопке по id. Затем получите значение `data-button-text` атрибута и установите его как `textContent` кнопки.

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

Результат

Лог

Выполнить

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

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

Изменение стиля элемента на основе `data-атрибута`

Измените цвет фона элемента с id "styled-div" на цвет, указанный в `data-background-color` атрибуте.

HTML

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

                      <div id="styled-div" data-background-color="lightblue" style="padding: 20px; border: 1px solid gray;">Элемент для стилизации</div>

<div id="styled-div" data-background-color="lightblue" style="padding: 20px; border: 1px solid gray;">Элемент для стилизации</div>

JavaScript

const styledDiv = document.input__1("styled-div");
const backgroundColor = styledDiv.dataset.input__2;
styledDiv.style.input__3 = backgroundColor;

                     const styledDiv = document.input__1("styled-div");
const backgroundColor = styledDiv.dataset.input__2;
styledDiv.style.input__3 = backgroundColor;

Получите доступ к элементу с id "styled-div". Получите значение `data-background-color` атрибута. Используйте свойство `style.backgroundColor` для изменения цвета фона элемента.

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

Результат

Лог

Выполнить

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

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

Обновление `data-атрибута` при клике

При клике на кнопку с id "counter-button" увеличьте значение `data-counter` атрибута на 1 и обновите текст кнопки, отображая новое значение счетчика.

HTML

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

                      <button id="counter-button" data-counter="0">Счетчик: 0</button>

<button id="counter-button" data-counter="0">Счетчик: 0</button>

JavaScript

const counterButton = document.input__1("counter-button");
counterButton.addEventListener('click', function() {
  let counter = parseInt(counterButton.dataset.input__2) ;
  counterinput__3;
  counterButton.dataset.input__4 = counter;
  counterButton.textContent = `Счетчик: ${input__5}`;
});

                     const counterButton = document.input__1("counter-button");
counterButton.addEventListener('click', function() {
  let counter = parseInt(counterButton.dataset.input__2) ;
  counterinput__3;
  counterButton.dataset.input__4 = counter;
  counterButton.textContent = `Счетчик: ${input__5}`;
});

Получите доступ к кнопке. Добавьте обработчик события 'click' на кнопку. Внутри обработчика получите текущее значение `data-counter`, увеличьте его на 1, обновите `data-counter` атрибут и `textContent` кнопки.

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

Результат

Лог

Выполнить

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

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

Фильтрация элементов по `data-атрибуту`

Скрыть все элементы списка `li` с классом "item", у которых `data-status` атрибут равен "hidden".

HTML

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

                      <ul id="item-list">
  <li class="item" data-status="visible">Пункт 1</li>
  <li class="item" data-status="hidden">Пункт 2</li>
  <li class="item" data-status="visible">Пункт 3</li>
  <li class="item" data-status="hidden">Пункт 4</li>
</ul>

<ul id="item-list">
  <li class="item" data-status="visible">Пункт 1</li>
  <li class="item" data-status="hidden">Пункт 2</li>
  <li class="item" data-status="visible">Пункт 3</li>
  <li class="item" data-status="hidden">Пункт 4</li>
</ul>

JavaScript

const items = document.input__1('.item');
items.forEach(item => {
  if (item.dataset.input__2 === input__3) {
    item.style.display = input__4;
  }
});

                     const items = document.input__1('.item');
items.forEach(item => {
  if (item.dataset.input__2 === input__3) {
    item.style.display = input__4;
  }
});

Используйте `querySelectorAll()` для получения всех элементов списка с классом "item". Переберите полученную коллекцию элементов. Для каждого элемента проверьте значение `data-status` атрибута. Если значение равно "hidden", установите свойство `style.display` в "none".

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

Результат

Лог

Выполнить

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

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

Использование нескольких `data-атрибутов` для создания карточки товара

Заполните карточку товара (элемент с id "product-card") данными из `data-product-name`, `data-product-price` и `data-product-description` атрибутов этого же элемента. Отобразите название в элементе с классом "product-name", цену в элементе с классом "product-price", и описание в элементе с классом "product-description".

CSS

.product-card {
  border: 1px solid #ccc;
  padding: 10px;
  width: 300px;
}
.product-name {
  font-size: 1.2em;
  font-weight: bold;
}
.product-price {
  color: green;
}

HTML

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

                      <div id="product-card" class="product-card" data-product-name="Наушники" data-product-price="1500" data-product-description="Беспроводные наушники с шумоподавлением">
  <div class="product-name"></div>
  <div class="product-price"></div>
  <div class="product-description"></div>
</div>

<div id="product-card" class="product-card" data-product-name="Наушники" data-product-price="1500" data-product-description="Беспроводные наушники с шумоподавлением">
  <div class="product-name"></div>
  <div class="product-price"></div>
  <div class="product-description"></div>
</div>

JavaScript

const productCard = document.input__1("product-card");
const productName = productCard.dataset.input__2;
const productPrice = productCard.dataset.input__3;
const productDescription = productCard.dataset.input__4;

const nameElement = productCard.querySelector('.product-name');
const priceElement = productCard.querySelector('.product-price');
const descriptionElement = productCard.querySelector('.product-description');

nameElement.textContent = input__5;
priceElement.textContent = `${input__6} ₽`;
descriptionElement.textContent = input__7;

                     const productCard = document.input__1("product-card");
const productName = productCard.dataset.input__2;
const productPrice = productCard.dataset.input__3;
const productDescription = productCard.dataset.input__4;

const nameElement = productCard.querySelector('.product-name');
const priceElement = productCard.querySelector('.product-price');
const descriptionElement = productCard.querySelector('.product-description');

nameElement.textContent = input__5;
priceElement.textContent = `${input__6} ₽`;
descriptionElement.textContent = input__7;

Получите доступ к карточке товара. Получите значения `data-product-name`, `data-product-price` и `data-product-description` атрибутов. Найдите элементы внутри карточки с классами "product-name", "product-price", "product-description" и установите соответствующие значения в их `textContent`.

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

Результат

Лог

Выполнить

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

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