.getElementsByClassName() в JavaScript

JavaScript предоставляет нам множество методов для поиска и манипуляции с элементами на веб-странице. Один из таких методов - .getElementsByClassName(), который позволяет получить список элементов, у которых задан указанный класс. В этой статье мы подробно рассмотрим, как использовать .getElementsByClassName() и какие возможности он предоставляет.

Введение в .getElementsByClassName()

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

Синтаксис .getElementsByClassName() выглядит следующим образом:

document.getElementsByClassName(className);

Где:

• className
  • это строка, представляющая название класса, по которому нужно выполнить поиск элементов.

Примеры использования .getElementsByClassName()

Давайте рассмотрим несколько примеров использования метода .getElementsByClassName() для поиска элементов с определенным классом на странице.

1. Получение списка элементов с определенным классом

<div class="box">Первый блок</div>
<div class="box">Второй блок</div>
<div class="box">Третий блок</div>

// Получаем все элементы с классом "box"
const boxes = document.getElementsByClassName('box');

// Выводим количество найденных элементов
console.log('Количество блоков:', boxes.length);

// Перебираем найденные элементы и выводим их содержимое
for (let i = 0; i < boxes.length; i++) {
  console.log('Содержимое блока', i + 1, ':', boxes[i].textContent);
}

В этом примере мы получаем все элементы на странице с классом "box" и выводим их количество и содержимое.

2. Изменение стилей элементов с заданным классом

<div class="highlight">Этот текст будет выделен</div>
<div>Этот текст не будет выделен</div>
<div class="highlight">Этот текст также будет выделен</div>

// Получаем все элементы с классом "highlight"
const highlightedElements = document.getElementsByClassName('highlight');

// Применяем стили к найденным элементам
for (let i = 0; i < highlightedElements.length; i++) {
  highlightedElements[i].style.backgroundColor = 'yellow';
}

В этом примере мы получаем все элементы на странице с классом "highlight" и изменяем их фоновый цвет на желтый.

Заключение

Метод .getElementsByClassName() - это удобный способ получить доступ к группе элементов на веб-странице по их классу. Он помогает нам легко находить и манипулировать с несколькими элементами, которые имеют общие стили или функциональность. Мы рассмотрели его базовый синтаксис и примеры использования для получения и взаимодействия с элементами с определенным классом на странице. Надеюсь, эта статья помогла вам лучше понять, как использовать .getElementsByClassName() в ваших проектах JavaScript.