
Выбор элементов по классу - это мощный инструмент JavaScript для взаимодействия с HTML-структурой. Классы позволяют группировать элементы и применять к ним стили или JavaScript-функциональность. В этом уроке вы выполните ряд практических заданий, чтобы закрепить навыки выбора элементов по классу и изменения их свойств.
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Простое выделение класса
Выберите все элементы с классом "highlight" и измените цвет их текста на красный.
.highlight {
padding: 10px;
border: 1px solid black;
}
<div class="highlight">Первый элемент</div>
<div class="highlight">Второй элемент</div>
<div>Третий элемент</div>
let elements = document.input__1("highlight");
for (let i = 0; i < elements.length; i++) {
elements[i].style.color = input__2;
}
Изменение фона элементов класса
Выберите все элементы с классом "block" и установите для них фоновый цвет.
.block {
padding: 15px;
border: 2px dashed gray;
margin-bottom: 5px;
}
<div class="block">Блок 1</div>
<div class="block">Блок 2</div>
<div class="block">Блок 3</div>
let blocks = document.input__1("block");
for (let i = 0; i < blocks.length; i++) {
blocks[i].style.backgroundColor = input__2;
}
Скрытие элементов класса
Скройте все элементы с классом "hidden-item", изменив их свойство `display`.
.hidden-item {
padding: 10px;
border: 1px dotted black;
margin-bottom: 5px;
}
<div class="visible-item">Этот элемент виден</div>
<div class="hidden-item">Этот элемент должен быть скрыт</div>
<div class="hidden-item">И этот тоже</div>
let hiddenElements = document.input__1("hidden-item");
for (let i = 0; i < hiddenElements.length; i++) {
hiddenElements[i].style.display = input__2;
}
Изменение текста в элементах класса
Измените текстовое содержимое всех элементов с классом "text-change" на "Новый текст!".
.text-change {
padding: 8px;
border: 1px solid #ccc;
margin-bottom: 5px;
}
<div class="text-change">Старый текст 1</div>
<div class="text-change">Старый текст 2</div>
<div>Обычный текст</div>
let textElements = document.input__1("text-change");
let newText = input__2;
for (let i = 0; i < textElements.length; i++) {
textElements[i].textContent = newText;
}
Добавление класса к элементам
Выберите все элементы с классом "initial" и добавьте им класс "modified".
.initial {
padding: 5px;
border: 1px solid blue;
margin-bottom: 3px;
}
.modified {
background-color: lightyellow;
}
<div class="initial">Элемент 1</div>
<div class="initial">Элемент 2</div>
<div>Обычный элемент</div>
let initialElements = document.input__1("initial");
let newClassName = input__2;
for (let i = 0; i < initialElements.length; i++) {
initialElements[i].classList.add(newClassName);
}
Удаление класса у элементов
Удалите класс "remove-me" у всех элементов, которые его имеют.
.remove-me {
font-weight: bold;
color: green;
}
.after-remove {
color: black;
font-weight: normal;
}
<div class="remove-me">Этот текст должен стать обычным</div>
<div class="remove-me">И этот тоже</div>
<div>Обычный текст</div>
let removeElements = document.input__1("remove-me");
let classNameToRemove = input__2;
for (let i = 0; i < removeElements.length; i++) {
removeElements[i].classList.remove(classNameToRemove);
}
Переключение класса у элементов
Переключите класс "toggle-class" у всех элементов, которые его имеют. Если класс есть - он удаляется, если нет - добавляется.
.toggle-class {
background-color: orange;
color: white;
padding: 10px;
}
.default-state {
background-color: transparent;
color: black;
}
<div class="toggle-class">Элемент с классом</div>
<div class="toggle-class">Еще один элемент</div>
<div>Обычный элемент</div>
let toggleElements = document.input__1("toggle-class");
let classToToggle = input__2;
for (let i = 0; i < toggleElements.length; i++) {
toggleElements[i].classList.toggle(classToToggle);
}
Выбор элементов класса внутри контейнера
Выберите элементы с классом "inner" только внутри элемента с ID "container" и измените их текст на "Внутри контейнера".
#container {
border: 2px solid purple;
padding: 20px;
}
.inner {
background-color: lightgreen;
padding: 5px;
margin: 5px 0;
}
<div id="container">
<div class="inner">Внутри контейнера (старый текст)</div>
<div class="inner">Еще один внутри</div>
</div>
<div class="inner">Снаружи контейнера</div>
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 и классу
Выберите элемент с ID "special" и затем внутри него найдите все элементы с классом "item" и сделайте их текст синим.
#special {
border: 3px solid orange;
padding: 15px;
}
.item {
margin: 5px;
padding: 3px;
border: 1px solid black;
}
<div id="special">
<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
</div>
<div class="item">Элемент снаружи</div>
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;
}