JavaScript метод document.getElementsByClassName()

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

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

Метод getElementsByClassName() также определен в объекте Element, по этой причине он может быть вызван на любом элементе, не только на объекте document. Элемент, на котором он вызывается будет использован в качестве корневого элемента для поиска.

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

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

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

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

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

Совместимостьapi.Document.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	✓12	✓3	✓9.5	✓3.1	✓18	✓4	✓10.1	✓2	✓1.0	✓4.4	✓2

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

JavaScript синтаксис

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

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

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

DOM Standard.

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

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

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

function myFunc() {
    let blocks = document.getElementsByClassName('block')

    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()
})

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

В следующем примере мы рассмотрим как найти элемент с конкретным классом, с конкретными классами, элемент с конкретным классом, осуществляя при этом поиск внутри другого элемента, а не всего документа:

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

function myFunc() {
    let first = document.getElementsByClassName('first'),
        second = document.getElementsByClassName('second'),
        third = document.getElementsByClassName('third')

    let extra = document.getElementsByClassName('second block')

    first[0].style.color = 'red'
    second[0].style.color = 'green'
    third[0].style.color = 'blue'
    extra[0].style.border = '1px solid green'

    first[0].getElementsByClassName('test')[0].innerHTML = ' !!!'
}

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

В этом примере мы с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая:

• С использованием JavaScript метода document.getElementsByClassName() выбирает все элементы с определенным глобальным атрибутом class и инициализирует три переменные этими значениями (массивоподобные объекты).
• С использованием JavaScript метода document.getElementsByClassName() выбирает все элементы, которые имеют два класса ("second" и "block") и инициализирует переменную этим значением. Обратите внимание, что элемент должен иметь оба класса, а не один из искомых.
• После этого в зависимости от переменной устанавливаем первому элементу коллекции свой цвет текста, первому элементу в переменной extra устанавливаем сплошную границу зеленого цвета.
• И в заключении мы вызываем метод .getElementsByClassName() на первом элементе коллекции, содержащейся в переменной first и находим элемент с классом test внутри этого элемента, которому с помощью свойства innerHTML устанавливаем новое текстовое содержимое.