JavaScript метод document.getElementsByClassName()

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

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

Метод 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 синтаксис:

// поиск элементов с определенным классом
document.getElementsByClassName( name )

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

name (-s) - String

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

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

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

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

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

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

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

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

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