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

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

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

Список тем

Проверка наличия атрибута 'id'

Необходимо проверить, есть ли у параграфа с классом 'text-block' атрибут 'id'. Выведите в консоль 'Атрибут id присутствует', если атрибут есть, и 'Атрибут id отсутствует', если атрибута нет.

HTML

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

                      <div class="container">
  <p class="text-block">Это параграф текста.</p>
</div>

<div class="container">
  <p class="text-block">Это параграф текста.</p>
</div>

JavaScript

const paragraph = document.input__1(".text-block");
if (paragraph.input__2("id")) {
  console.log("Атрибут id присутствует");
} else {
  console.log("Атрибут id отсутствует");
}

                     const paragraph = document.input__1(".text-block");
if (paragraph.input__2("id")) {
  console.log("Атрибут id присутствует");
} else {
  console.log("Атрибут id отсутствует");
}

Для проверки наличия атрибута у элемента DOM используйте метод `hasAttribute()`. Сначала получите доступ к элементу, а затем примените к нему этот метод, передав в качестве аргумента имя атрибута, который нужно проверить. Условная конструкция `if...else` поможет вам вывести нужное сообщение в зависимости от результата проверки.

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

Результат

Лог

Выполнить

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

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

Проверка наличия атрибута 'disabled' у кнопки

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

HTML

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

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

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

JavaScript

const button = document.input__1("myButton");
if (button.input__2("disabled")) {
  button.input__3("disabled");
}

                     const button = document.input__1("myButton");
if (button.input__2("disabled")) {
  button.input__3("disabled");
}

Используйте метод `hasAttribute()` для проверки наличия атрибута 'disabled'. Если атрибут есть, используйте метод `removeAttribute()` для его удаления. Сначала получите доступ к кнопке по ее id.

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

Результат

Лог

Выполнить

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

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

Проверка наличия атрибута 'src' у изображения

Проверьте, есть ли у изображения с id 'logo' атрибут 'src'. Если атрибут 'src' отсутствует, установите его значение на одну из предложенных картинок.

HTML

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

                      <img id="logo">

<img id="logo">

JavaScript

const image = document.input__1("logo");
if (!image.input__2("src")) {
  image.input__3("src", "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png");
}

                     const image = document.input__1("logo");
if (!image.input__2("src")) {
  image.input__3("src", "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png");
}

Сначала получите доступ к изображению по id. Используйте `hasAttribute()` для проверки наличия атрибута 'src'. Если атрибута нет, используйте `setAttribute()` для его установки. Выберите любую из предложенных ссылок на изображения.

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

Результат

Лог

Выполнить

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

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

Условное добавление класса при наличии атрибута

Проверьте, есть ли у элемента с классом 'card' атрибут 'data-active'. Если атрибут присутствует, добавьте элементу класс 'active-card'.

CSS

.active-card {
  border: 2px solid blue;
}

HTML

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

                      <div class="card" data-active="true">
  <p>Карточка</p>
</div>

<div class="card" data-active="true">
  <p>Карточка</p>
</div>

JavaScript

const card = document.input__1(".card");
if (card.input__2("data-active")) {
  card.classList.input__3("active-card");
}

                     const card = document.input__1(".card");
if (card.input__2("data-active")) {
  card.classList.input__3("active-card");
}

Получите элемент с классом 'card'. Проверьте наличие атрибута 'data-active' с помощью `hasAttribute()`. Если атрибут есть, используйте свойство `classList` и метод `add()` для добавления класса 'active-card'.

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

Результат

Лог

Выполнить

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

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

Проверка и получение значения атрибута

Проверьте, есть ли у элемента с id 'link' атрибут 'href'. Если атрибут есть, выведите его значение в консоль.

HTML

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

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

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

JavaScript

const link = document.input__1("link");
if (link.input__2("href")) {
  const hrefValue = link.input__3("href");
  console.log(hrefValue);
}

                     const link = document.input__1("link");
if (link.input__2("href")) {
  const hrefValue = link.input__3("href");
  console.log(hrefValue);
}

Получите элемент по id 'link'. Проверьте наличие атрибута 'href' с помощью `hasAttribute()`. Если атрибут есть, получите его значение с помощью `getAttribute()` и выведите в консоль.

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

Результат

Лог

Выполнить

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

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

Изменение текста в зависимости от наличия атрибута

Проверьте, есть ли у кнопки с id 'statusButton' атрибут 'data-active'. Если атрибут есть, измените текст кнопки на 'Активно', иначе на 'Неактивно'.

HTML

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

                      <button id="statusButton" data-active="true">Статус</button>

<button id="statusButton" data-active="true">Статус</button>

JavaScript

const button = document.input__1("statusButton");
if (button.input__2("data-active")) {
  button.input__3 = "Активно";
} else {
  button.input__3 = "Неактивно";
}

                     const button = document.input__1("statusButton");
if (button.input__2("data-active")) {
  button.input__3 = "Активно";
} else {
  button.input__3 = "Неактивно";
}

Получите кнопку по id 'statusButton'. Проверьте наличие атрибута 'data-active' с помощью `hasAttribute()`. В зависимости от результата, измените текст кнопки, используя свойство `textContent`.

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

Результат

Лог

Выполнить

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

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

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

Проверьте, есть ли у div элемента с классом 'removable-block' атрибут 'data-visible'. Если атрибут отсутствует, удалите этот div элемент из DOM.

HTML

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

                      <div class="removable-block">
  <p>Этот блок может быть удален.</p>
</div>

<div class="removable-block">
  <p>Этот блок может быть удален.</p>
</div>

JavaScript

const block = document.input__1(".removable-block");
if (!block.input__2("data-visible")) {
  block.parentNode.input__3(block);
}

                     const block = document.input__1(".removable-block");
if (!block.input__2("data-visible")) {
  block.parentNode.input__3(block);
}

Получите элемент с классом 'removable-block'. Проверьте отсутствие атрибута 'data-visible' с помощью `!hasAttribute()`. Если атрибута нет, используйте свойство `parentNode` и метод `removeChild()` для удаления элемента.

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

Результат

Лог

Выполнить

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

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

Переключение класса при клике и проверке атрибута

При клике на кнопку с id 'toggleClassButton' проверьте, есть ли у элемента с классом 'target-element' атрибут 'data-highlighted'. Если атрибут есть, удалите класс 'highlight', если нет - добавьте класс 'highlight'.

CSS

.highlight {
  background-color: yellow;
}

HTML

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

                      <button id="toggleClassButton">Переключить класс</button>
<div class="target-element">Элемент для выделения</div>

<button id="toggleClassButton">Переключить класс</button>
<div class="target-element">Элемент для выделения</div>

JavaScript

const button = document.input__1("toggleClassButton");
const targetElement = document.input__2(".target-element");

button.addEventListener("click", () => {
  if (targetElement.input__3("data-highlighted")) {
    targetElement.classList.input__4("highlight");
  } else {
    targetElement.classList.input__4("highlight");
  }
});

                     const button = document.input__1("toggleClassButton");
const targetElement = document.input__2(".target-element");

button.addEventListener("click", () => {
  if (targetElement.input__3("data-highlighted")) {
    targetElement.classList.input__4("highlight");
  } else {
    targetElement.classList.input__4("highlight");
  }
});

Получите кнопку и целевой элемент. Добавьте обработчик события 'click' на кнопку. Внутри обработчика проверьте наличие атрибута 'data-highlighted' у целевого элемента. В зависимости от результата, используйте `classList.toggle('highlight')` для переключения класса.

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

Результат

Лог

Выполнить

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

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