JavaScript метод Element.getElementsByClassName()

Определение и применение

JavaScript метод getElementsByClassName() объекта Element возвращает живую коллекцию HTMLCollection, которая содержит каждый элемент, который имеет указанное имя, или имена класса, поиск элементов при этом ведется внутри указанного элемента.

Объект HTMLCollection представляет коллекцию узлов, которые могут быть доступны по индексным номерам (индекс начинается с 0). Вы можете использовать свойство length объекта HTMLCollection для определения количества элементов с указанным именем класса. Если искомые элементы отсутствуют, то значение length будет соответствовать значению 0.

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2017 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Element.getElementsByClassName

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
getElementsByClassName	✓1	✓16…	✓3…	✓9.5	✓3.1	✓18	✓4	✓10.1	✓2	✓1.0	✓4.4	✓2

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

// поиск элементов с определенным классом
const elements = element.getElementsByClassName(names);

// поиск элементов с определенными классами
const matchingAll = element.getElementsByClassName("name1 name2 nameX");

Спецификация

DOM Standard.

Значения параметров

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

Поиск элементов с двумя классами внутри секции

Нажмите ▶, затем кнопку в результате: зелёным станут только блоки, у которых есть оба класса block и active. Третий блок с одним классом block не изменится.

index.html

HTML

<button data-migration-click-0="">Нажми меня</button>
<section class="mySection">
  <div class="block active first">Первый блок</div>
  <div class="block active">Второй блок</div>
  <div class="block">Третий блок</div>
</section>

main.js

JavaScript

function myFunc() {
    const section = document.body.getElementsByClassName('mySection')[0]
    let blocks = section.getElementsByClassName('block active')

    for (let i = 0; i < blocks.length; i++) {
        blocks[i].style.color = 'green'
    }
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода .getElementsByClassName() выбирает все элементы с определенным значением, которое содержится в глобальном атрибуте class и инициализируем переменную этим значением (массивоподобный объект). Обратите внимание, что мы сразу указали индекс 0, который ссылается на наш элемент <section>.

Кроме того, с использованием метода .getElementsByClassName() мы выбираем элементы, которые содержат в значении глобального атрибута class значения block и active, и инициализируем переменную этими элементами. Обратите внимание, что поиск мы ведем непосредственно внутри элемента <section>. После этого мы проходим циклом по всем элементам этого массивоподобного объекта (объект HTMLCollection) и устанавливаем зеленый цвет текста каждому элементу.