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

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

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

Список тем

Проверка класса у параграфа

Необходимо проверить, есть ли у параграфа с id "myParagraph" класс "highlighted". Выведите в консоль `true`, если класс есть, и `false`, если класса нет.

HTML

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

                      <p id="myParagraph" class="text highlighted">Это параграф с классом highlighted.</p>

<p id="myParagraph" class="text highlighted">Это параграф с классом highlighted.</p>

JavaScript

const paragraph = document.input__1("myParagraph");
const hasClass = paragraph.classList.input__2("highlighted");
console.log(hasClass);

                     const paragraph = document.input__1("myParagraph");
const hasClass = paragraph.classList.input__2("highlighted");
console.log(hasClass);

Для проверки наличия класса у элемента можно использовать свойство `classList` и метод `contains()`. Сначала получите доступ к элементу, используя `document.getElementById()`, затем обратитесь к его `classList` и используйте метод `contains()` для проверки наличия класса "highlighted". Результат проверки (true или false) нужно вывести в консоль с помощью `console.log()`.

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

Результат

Лог

Выполнить

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

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

Проверка класса у кнопки

Проверьте, есть ли у кнопки с id "myButton" класс "active". Если класс "active" отсутствует, добавьте его. В консоль выведите текущее значение атрибута class кнопки.

HTML

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

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

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

JavaScript

const button = document.input__1("myButton");
const hasActiveClass = button.classList.input__2("active");

if (!hasActiveClass ) {
  button.classList.input__3("active");
}

console.log(button.className);

                     const button = document.input__1("myButton");
const hasActiveClass = button.classList.input__2("active");

if (!hasActiveClass ) {
  button.classList.input__3("active");
}

console.log(button.className);

Сначала получите доступ к кнопке по id. Затем проверьте наличие класса "active" с помощью `classList.contains()`. Если класс отсутствует, используйте `classList.add()` для добавления класса. В конце выведите в консоль значение `className` кнопки, чтобы увидеть все ее классы.

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

Результат

Лог

Выполнить

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

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

Проверка класса у нескольких элементов

На странице есть несколько элементов с классом "item". Для каждого элемента проверьте, есть ли у него также класс "active". Выведите в консоль для каждого элемента `true`, если есть оба класса, и `false`, если класса "active" нет.

HTML

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

                      <div class="item active">Item 1</div>
<div class="item">Item 2</div>
<div class="item active">Item 3</div>

<div class="item active">Item 1</div>
<div class="item">Item 2</div>
<div class="item active">Item 3</div>

JavaScript

const items = document.input__1(".item");
items.forEach(item => {
  const hasActiveClass = item.classList.input__2("active");
  console.log(hasActiveClass);
});

                     const items = document.input__1(".item");
items.forEach(item => {
  const hasActiveClass = item.classList.input__2("active");
  console.log(hasActiveClass);
});

Используйте `document.querySelectorAll()` для получения коллекции всех элементов с классом "item". Затем переберите полученную коллекцию с помощью цикла `forEach()`. Внутри цикла для каждого элемента проверьте наличие класса "active" с помощью `classList.contains()` и выведите результат в консоль.

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

Результат

Лог

Выполнить

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

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

Изменение текста в зависимости от класса

Проверьте, есть ли у элемента с id "message" класс "error". Если класс "error" есть, измените текст элемента на "Ошибка!". Если класса "error" нет, измените текст на "Успешно!".

HTML

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

                      <div id="message" class="success">Начальный текст</div>

<div id="message" class="success">Начальный текст</div>

JavaScript

const messageElement = document.input__1("message");
const isError = messageElement.classList.input__2("error");

if (isError) {
  messageElement.textContent = "input__3";
} else {
  messageElement.textContent = "input__4";
}

                     const messageElement = document.input__1("message");
const isError = messageElement.classList.input__2("error");

if (isError) {
  messageElement.textContent = "input__3";
} else {
  messageElement.textContent = "input__4";
}

Получите элемент по id "message". Проверьте наличие класса "error" с помощью `classList.contains()`. Используйте условный оператор `if...else` для проверки результата. В зависимости от результата, измените свойство `textContent` элемента на соответствующий текст.

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

Результат

Лог

Выполнить

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

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

Переключение класса при клике

Добавьте обработчик события `click` на кнопку с id "toggleButton". При каждом клике на кнопку, класс "active" должен переключаться (добавляться, если его нет, и удаляться, если он есть).

HTML

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

                      <button id="toggleButton">Переключить класс</button>

<button id="toggleButton">Переключить класс</button>

JavaScript

const toggleButton = document.input__1("toggleButton");

toggleButton.addEventListener('click', () => {
  toggleButton.classList.input__2("active");
});

                     const toggleButton = document.input__1("toggleButton");

toggleButton.addEventListener('click', () => {
  toggleButton.classList.input__2("active");
});

Получите кнопку по id "toggleButton". Добавьте обработчик события `click` с помощью `addEventListener()`. Внутри обработчика используйте метод `classList.toggle()` для переключения класса "active".

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

Результат

Лог

Выполнить

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

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

Проверка наличия нескольких классов

Проверьте, есть ли у элемента с id "multiClassElement" одновременно классы "style1" и "style2". Выведите в консоль `true`, если оба класса присутствуют, и `false`, если хотя бы одного из них нет.

HTML

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

                      <div id="multiClassElement" class="style1">Элемент с классом style1</div>

<div id="multiClassElement" class="style1">Элемент с классом style1</div>

JavaScript

const element = document.input__1("multiClassElement");
const hasStyle1 = element.classList.input__2("style1");
const hasStyle2 = element.classList.input__3("style2");

const hasBothClasses = hasStyle1 input__4 hasStyle2;
console.log(hasBothClasses);

                     const element = document.input__1("multiClassElement");
const hasStyle1 = element.classList.input__2("style1");
const hasStyle2 = element.classList.input__3("style2");

const hasBothClasses = hasStyle1 input__4 hasStyle2;
console.log(hasBothClasses);

Получите элемент по id "multiClassElement". Проверьте наличие класса "style1" и класса "style2" по отдельности с помощью `classList.contains()`. Используйте логический оператор `&&` (И) для проверки, что оба условия истинны. Выведите результат в консоль.

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

Результат

Лог

Выполнить

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

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

Проверка класса родительского элемента

Для кнопки с id "childButton" найдите ее родительский элемент. Проверьте, есть ли у родительского элемента класс "container". Выведите в консоль `true`, если класс есть, и `false`, если класса нет.

HTML

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

                      <div class="container">
  <button id="childButton">Кнопка внутри контейнера</button>
</div>

<div class="container">
  <button id="childButton">Кнопка внутри контейнера</button>
</div>

JavaScript

const childButton = document.input__1("childButton");
const parentElement = childButton.input__2;
const hasContainerClass = parentElement.classList.input__3("container");
console.log(hasContainerClass);

                     const childButton = document.input__1("childButton");
const parentElement = childButton.input__2;
const hasContainerClass = parentElement.classList.input__3("container");
console.log(hasContainerClass);

Получите кнопку по id "childButton". Используйте свойство `parentElement` для доступа к родительскому элементу кнопки. Затем проверьте наличие класса "container" у родительского элемента с помощью `classList.contains()`. Выведите результат в консоль.

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

Результат

Лог

Выполнить

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

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

Проверка класса с использованием className

Проверьте, содержит ли атрибут `class` элемента с id "classStringElement" строку "special". Используйте свойство `className` и метод `includes()`. Выведите в консоль `true`, если строка "special" найдена, и `false`, если нет.

HTML

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

                      <div id="classStringElement" class="default special">Элемент с двумя классами</div>

<div id="classStringElement" class="default special">Элемент с двумя классами</div>

JavaScript

const element = document.input__1("classStringElement");
const classString = element.input__2;
const hasSpecial = classString.input__3("special");
console.log(hasSpecial);

                     const element = document.input__1("classStringElement");
const classString = element.input__2;
const hasSpecial = classString.input__3("special");
console.log(hasSpecial);

Получите элемент по id "classStringElement". Доступ к атрибуту `class` можно получить через свойство `className`. Используйте метод строк `includes()` для проверки, содержит ли строка `className` подстроку "special". Выведите результат в консоль.

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

Результат

Лог

Выполнить

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

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