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

Синтаксис

var elements = document.getElementsByClassName(names); // или:
var elements = rootElement.getElementsByClassName(names);
  • В "elements" будет текущая  HTMLCollection найденных елементов.
  • "names" - строка, состоящая из списка имен искомых классов; имена классов разделяют пробелами.
  • getElementsByClassName может быть вызвана по отношению к любому элементу, не только для документа целиком. ("document"). Элемент, по отношению к которому осуществляется вызов, используется для целей поиска в качестве корневого элемента.

Примеры

Получить все элементы класса 'test':

document.getElementsByClassName('test');

Получить все элементы, для которых заданы класс 'red' и класс 'test':

document.getElementsByClassName('red test');

Получить все элементы класса 'test', являющиеся дочерними для элемента с ID 'main':

document.getElementById('main').getElementsByClassName('test');

Мы также можем использовать методы из Array.prototype по отношению к любой HTMLCollection, передавая коллекцию в качестве значения this метода. Код в примере найдет все элементы 'div' с классом 'test':

var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === 'DIV';
});

Получение элементов класса 'test'

Ниже приведен пример наиболее употребительного способа использования данного метода.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="parent-id">
        <p>hello word1</p>
        <p class="test">hello word2</p>
        <p >hello word3</p>
        <p>hello word4</p>
    </div>
    <script>
        var parentDOM = document.getElementById("parent-id");
        
        var test=parentDOM.getElementsByClassName("test");//test is not target element
        console.log(test);//HTMLCollection[1]

        var testTarget=parentDOM.getElementsByClassName("test")[0];//hear , this element is target
        console.log(testTarget);//<p class="test">hello word2</p>
    </script>
</body>
</html>

Совместимость браузеров

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Уровень Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (Да) 3.0 9.0 (Да) (Да)
Уровень Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ? ? ? ? ?

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

Метки документа и участники

Внесли вклад в эту страницу: shaman771, m.onyshchuk, goodwin64, loki2d, lazyexpert
Обновлялась последний раз: shaman771,