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

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

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

Список тем

Задание 1. Получение значения атрибута 'id'

Извлеките значение атрибута 'id' у элемента <p> и выведите его в консоль.

HTML

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

                      <p id="myParagraph">Это абзац текста.</p>

<p id="myParagraph">Это абзац текста.</p>

JavaScript

let paragraph = document.input__1("myParagraph");
let paragraphId = paragraph.input__2;
console.log(paragraphId);

                     let paragraph = document.input__1("myParagraph");
let paragraphId = paragraph.input__2;
console.log(paragraphId);

Для получения значения атрибута 'id' можно использовать свойство `id` элемента DOM или метод `getAttribute('id')`. В данном задании рекомендуется использовать свойство `id`.

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

Результат

Лог

Выполнить

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

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

Задание 2. Получение значения атрибута 'class'

Найдите элемент <div> с классом 'container' и получите значение его атрибута 'class'. Выведите значение в консоль.

HTML

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

                      <div class="container">Контейнер</div>

<div class="container">Контейнер</div>

JavaScript

let container = document.input__1(".container");
let containerClass = container.input__2;
console.log(containerClass);

                     let container = document.input__1(".container");
let containerClass = container.input__2;
console.log(containerClass);

Для получения значения атрибута 'class' можно использовать свойство `className` элемента DOM или метод `getAttribute('class')`. В данном задании рекомендуется использовать свойство `className`.

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

Результат

Лог

Выполнить

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

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

Задание 3. Получение значения атрибута 'src' у изображения

Получите значение атрибута 'src' у изображения и выведите его в console.log.

HTML

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

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

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

JavaScript

let image = document.input__1("img");
let imageSrc = image.input__2;
console.log(input__3);

                     let image = document.input__1("img");
let imageSrc = image.input__2;
console.log(input__3);

Для получения значения атрибута 'src' у изображения можно использовать свойство `src` элемента `img` или метод `getAttribute('src')`. В данном задании рекомендуется использовать свойство `src`.

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

Результат

Лог

Выполнить

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

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

Задание 4. Получение значения атрибута 'href' у ссылки

Найдите ссылку и получите значение ее атрибута 'href'. Выведите значение в консоль.

HTML

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

                      <a href="https://www.example.com">Ссылка</a>

<a href="https://www.example.com">Ссылка</a>

JavaScript

let link = document.input__1("a");
let linkHref = link.input__2;
console.log(input__3);

                     let link = document.input__1("a");
let linkHref = link.input__2;
console.log(input__3);

Для получения значения атрибута 'href' у ссылки можно использовать свойство `href` элемента `a` или метод `getAttribute('href')`. В данном задании рекомендуется использовать свойство `href`.

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

Результат

Лог

Выполнить

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

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

Задание 5. Получение значения атрибута 'data-id' с помощью getAttribute

Найдите элемент <div data-id="123"> и получите значение атрибута 'data-id' используя метод `getAttribute()`. Выведите значение в консоль.

HTML

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

                      <div data-id="123">Элемент с data-атрибутом</div>

<div data-id="123">Элемент с data-атрибутом</div>

JavaScript

let element = document.input__1("div[data-id]");
let dataId = element.input__2("data-id");
console.log(input__3);

                     let element = document.input__1("div[data-id]");
let dataId = element.input__2("data-id");
console.log(input__3);

Для получения значений data-атрибутов используйте метод `getAttribute()`. В качестве аргумента передайте полное имя data-атрибута, включая префикс 'data-'.

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

Результат

Лог

Выполнить

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

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

Задание 6. Получение значения атрибута 'data-user-name' через dataset

Найдите элемент <div data-user-name="John"> и получите значение атрибута 'data-user-name' используя свойство `dataset`. Выведите значение в console.log.

HTML

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

                      <div data-user-name="John">Информация о пользователе</div>

<div data-user-name="John">Информация о пользователе</div>

JavaScript

let element = document.input__1("div[data-user-name]");
let userName = element.input__2.input__3;
console.log(input__4);

                     let element = document.input__1("div[data-user-name]");
let userName = element.input__2.input__3;
console.log(input__4);

Для доступа к data-атрибутам через свойство `dataset`, используйте имя атрибута без префикса 'data-' и в camelCase нотации, если в имени атрибута есть дефисы.

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

Результат

Лог

Выполнить

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

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

Задание 7. Проверка наличия атрибута 'disabled'

Проверьте, есть ли у кнопки атрибут 'disabled'. Если есть, выведите в консоль 'Кнопка заблокирована', иначе 'Кнопка активна'.

HTML

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

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

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

JavaScript

let button = document.input__1("#myButton");
let isDisabled = button.input__2("disabled");
if (input__3 !== null) {
  console.log("Кнопка заблокирована");
} else {
  console.log("Кнопка активна");
}

                     let button = document.input__1("#myButton");
let isDisabled = button.input__2("disabled");
if (input__3 !== null) {
  console.log("Кнопка заблокирована");
} else {
  console.log("Кнопка активна");
}

Метод `getAttribute()` возвращает значение атрибута или `null`, если атрибут не существует. Используйте это для проверки наличия атрибута.

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

Результат

Лог

Выполнить

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

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

Задание 8. Получение значения атрибута 'alt' у изображения и вывод в элементе

Получите значение атрибута 'alt' у изображения и выведите это значение в текстовый контент элемента <div id="altText">.

HTML

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

                      <img src="https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png" alt="Кибербезопасность">
<div id="altText"></div>

<img src="https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png" alt="Кибербезопасность">
<div id="altText"></div>

JavaScript

let image = document.input__1("img");
let altValue = image.input__2;
let altDiv = document.input__3("altText");
altDiv.input__4 = input__5;

                     let image = document.input__1("img");
let altValue = image.input__2;
let altDiv = document.input__3("altText");
altDiv.input__4 = input__5;

Сначала получите значение атрибута 'alt' у изображения. Затем найдите элемент `div#altText` и установите его свойство `textContent` равным полученному значению атрибута 'alt'.

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

Результат

Лог

Выполнить

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

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