Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствуюих всем из указанных имен классов. В случае вызова по отношению к объекту '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>

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

Уровень 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,