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 October 2017.

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

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

Syntax

var elements = element.getElementsByClassName(names);
  • elements — HTMLCollection содержащий найденные элементы
  • 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

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