Document.getElementsByClassName()

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

Синтаксис

var elements = document.getElementsByClassName(names); // или:
var elements = rootElement.getElementsByClassName(names);

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

Примеры

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

document.getElementsByClassName('test');

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

document.getElementsByClassName('red test');

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

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

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

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

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

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

• W3C: getElementsByClassName