Выбор элементов по классу

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

Тренажер JavaScript: Покоряем HTML DOM

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

Список тем

Простое выделение класса

Выберите все элементы с классом "highlight" и измените цвет их текста на красный.

CSS
.highlight {
  padding: 10px;
  border: 1px solid black;
}
HTML
Восстановить HTML
<div class="highlight">Первый элемент</div>
<div class="highlight">Второй элемент</div>
<div>Третий элемент</div>
JavaScript
let elements = document.input__1("highlight");
for (let i = 0; i < elements.length; i++) {
  elements[i].style.color = input__2;
}
Для выбора элементов по классу используйте метод `getElementsByClassName()`. Этот метод возвращает коллекцию элементов. Чтобы изменить стиль каждого элемента в коллекции, вам потребуется перебрать ее.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

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

Выберите все элементы с классом "block" и установите для них фоновый цвет.

CSS
.block {
  padding: 15px;
  border: 2px dashed gray;
  margin-bottom: 5px;
}
HTML
Восстановить HTML
<div class="block">Блок 1</div>
<div class="block">Блок 2</div>
<div class="block">Блок 3</div>
JavaScript
let blocks = document.input__1("block");
for (let i = 0; i < blocks.length; i++) {
  blocks[i].style.backgroundColor = input__2;
}
Аналогично предыдущему заданию, используйте `getElementsByClassName()` для выбора элементов. Затем, в цикле, измените свойство `backgroundColor` для каждого элемента.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Скрытие элементов класса

Скройте все элементы с классом "hidden-item", изменив их свойство `display`.

CSS
.hidden-item {
  padding: 10px;
  border: 1px dotted black;
  margin-bottom: 5px;
}
HTML
Восстановить HTML
<div class="visible-item">Этот элемент виден</div>
<div class="hidden-item">Этот элемент должен быть скрыт</div>
<div class="hidden-item">И этот тоже</div>
JavaScript
let hiddenElements = document.input__1("hidden-item");
for (let i = 0; i < hiddenElements.length; i++) {
  hiddenElements[i].style.display = input__2;
}
Для скрытия элемента используется свойство `display` со значением `"none"`. Выберите элементы с классом и в цикле установите это свойство.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

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

Измените текстовое содержимое всех элементов с классом "text-change" на "Новый текст!".

CSS
.text-change {
  padding: 8px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}
HTML
Восстановить HTML
<div class="text-change">Старый текст 1</div>
<div class="text-change">Старый текст 2</div>
<div>Обычный текст</div>
JavaScript
let textElements = document.input__1("text-change");
let newText = input__2;
for (let i = 0; i < textElements.length; i++) {
  textElements[i].textContent = newText;
}
Для изменения текста элемента используйте свойство `textContent`. Выберите элементы по классу и в цикле присвойте новое значение свойству `textContent`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Добавление класса к элементам

Выберите все элементы с классом "initial" и добавьте им класс "modified".

CSS
.initial {
  padding: 5px;
  border: 1px solid blue;
  margin-bottom: 3px;
}
.modified {
  background-color: lightyellow;
}
HTML
Восстановить HTML
<div class="initial">Элемент 1</div>
<div class="initial">Элемент 2</div>
<div>Обычный элемент</div>
JavaScript
let initialElements = document.input__1("initial");
let newClassName = input__2;
for (let i = 0; i < initialElements.length; i++) {
  initialElements[i].classList.add(newClassName);
}
Для добавления класса элементу используйте свойство `classList.add()`. Выберите элементы с классом "initial" и добавьте им новый класс.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Удаление класса у элементов

Удалите класс "remove-me" у всех элементов, которые его имеют.

CSS
.remove-me {
  font-weight: bold;
  color: green;
}
.after-remove {
  color: black;
  font-weight: normal;
}
HTML
Восстановить HTML
<div class="remove-me">Этот текст должен стать обычным</div>
<div class="remove-me">И этот тоже</div>
<div>Обычный текст</div>
JavaScript
let removeElements = document.input__1("remove-me");
let classNameToRemove = input__2;
for (let i = 0; i < removeElements.length; i++) {
  removeElements[i].classList.remove(classNameToRemove);
}
Для удаления класса используйте `classList.remove()`. Выберите элементы с классом "remove-me" и удалите этот класс.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Переключение класса у элементов

Переключите класс "toggle-class" у всех элементов, которые его имеют. Если класс есть - он удаляется, если нет - добавляется.

CSS
.toggle-class {
  background-color: orange;
  color: white;
  padding: 10px;
}
.default-state {
  background-color: transparent;
  color: black;
}
HTML
Восстановить HTML
<div class="toggle-class">Элемент с классом</div>
<div class="toggle-class">Еще один элемент</div>
<div>Обычный элемент</div>
JavaScript
let toggleElements = document.input__1("toggle-class");
let classToToggle = input__2;
for (let i = 0; i < toggleElements.length; i++) {
  toggleElements[i].classList.toggle(classToToggle);
}
Используйте `classList.toggle()` для переключения класса. Выберите элементы с классом "toggle-class" и примените к ним переключение класса.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Выбор элементов класса внутри контейнера

Выберите элементы с классом "inner" только внутри элемента с ID "container" и измените их текст на "Внутри контейнера".

CSS
#container {
  border: 2px solid purple;
  padding: 20px;
}
.inner {
  background-color: lightgreen;
  padding: 5px;
  margin: 5px 0;
}
HTML
Восстановить HTML
<div id="container">
  <div class="inner">Внутри контейнера (старый текст)</div>
  <div class="inner">Еще один внутри</div>
</div>
<div class="inner">Снаружи контейнера</div>
JavaScript
let container = document.input__1("container");
let innerElements = container.input__2("inner");
let newText = input__3;
for (let i = 0; i < innerElements.length; i++) {
  innerElements[i].textContent = newText;
}
Сначала выберите элемент-контейнер по ID, а затем используйте `getElementsByClassName()` **на этом контейнере**, чтобы найти элементы с классом "inner" только внутри него.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку

Комбинация выбора по ID и классу

Выберите элемент с ID "special" и затем внутри него найдите все элементы с классом "item" и сделайте их текст синим.

CSS
#special {
  border: 3px solid orange;
  padding: 15px;
}
.item {
  margin: 5px;
  padding: 3px;
  border: 1px solid black;
}
HTML
Восстановить HTML
<div id="special">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
</div>
<div class="item">Элемент снаружи</div>
JavaScript
let specialElement = document.input__1("special");
let items = specialElement.input__2("item");
let textColor = input__3;
for (let i = 0; i < items.length; i++) {
  items[i].style.color = textColor;
}
Сначала используйте `getElementById()` для выбора элемента с ID "special". Затем, на этом элементе, используйте `getElementsByClassName()` для выбора элементов с классом "item".
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
НайтиКурс.Ру
Добавить комментарий