Element.getElementsByClassName()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Так же, как метод Document.getElementsByClassName() действует на весь документ; это вернёт элементы, которые являются потомками корневого элемента, содержащие в себе указанные классы.

Syntax

var elements = element.getElementsByClassName(names);
  • elementsHTMLCollection содержащий найденные элементы
  • names — строка, содержащая в себе имена классов; имена разделяются пробелами
  • element — любой Element в документе (в котором осуществляется выборка)

Examples

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

js
element.getElementsByClassName("test");

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

js
element.getElementsByClassName("red test");

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

js
document.getElementById("main").getElementsByClassName("test");

Мы так же можем использовать все методы из Array.prototype на любом HTMLCollection путём передачи HTMLCollection в метод как значение this. Так мы найдём все <div> элементы, которые имеют класс test:

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

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

Specification
DOM
# ref-for-dom-element-getelementsbyclassname

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getElementsByClassName

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Has more compatibility info.