Документ: метод getElementsByClassName()

Базовая реализация Широко доступна

Эта функция хорошо реализована и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Метод getElementsByClassName интерфейса Document возвращает массив-подобный объект всех дочерних элементов, у которых есть указанное(ые) имя(на) класса(ов).

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

Предупреждение: Это живой HTMLCollection. Изменения в DOM будут отражаться в массиве по мере их возникновения. Если элемент, выбранный этим массивом, больше не соответствует селектору, он автоматически будет удалён. Учтите это при итерации.

Синтаксис

getElementsByClassName(names)

Параметры

names: Строка, представляющая имя(на) класса(ов) для сопоставления; несколько имён классов разделяются пробелами.

Возвращаемое значение

Живой HTMLCollection найденных элементов.

Примеры

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

document.getElementsByClassName("test");

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

document.getElementsByClassName("red test");

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

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

Получить первый элемент с классом 'test', или undefined если соответствующего элемента нет:

document.getElementsByClassName("test")[0];

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

const testElements = document.getElementsByClassName("test");
const testDivs = Array.prototype.filter.call(
  testElements,
  (testElement) => testElement.nodeName === "DIV",
);

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

Это наиболее часто используемый метод работы.

<html lang="en">
  <body>
    <div id="parent-id">
      <p>hello world 1</p>
      <p class="test">hello world 2</p>
      <p>hello world 3</p>
      <p>hello world 4</p>
    </div>

    <script>
      const parentDOM = document.getElementById("parent-id");

      const test = parentDOM.getElementsByClassName("test"); // a list of matching elements, *not* the element itself
      console.log(test); // HTMLCollection[1]

      const testTarget = parentDOM.getElementsByClassName("test")[0]; // the first element, as we wanted
      console.log(testTarget); // <p class="test">hello world 2</p>
    </script>
  </body>
</html>

Пример с несколькими классами

document.getElementsByClassName работает очень похоже на document.querySelector и document.querySelectorAll. Выбираются только элементы, имеющие ВСЕ указанные classNames.

HTML

<span class="orange fruit">Orange Fruit</span>
<span class="orange juice">Orange Juice</span>
<span class="apple juice">Apple Juice</span>
<span class="foo bar">Something Random</span>
<textarea id="resultArea" style="width:98%;height:7em"></textarea>

JavaScript

// getElementsByClassName only selects elements that have both given classes
const allOrangeJuiceByClass = document.getElementsByClassName("orange juice");
let result = "document.getElementsByClassName('orange juice')";
for (let i = 0; i < allOrangeJuiceByClass.length; i++) {
  result += `\n  ${allOrangeJuiceByClass[i].textContent}`;
}

// querySelector only selects full complete matches
const allOrangeJuiceQuery = document.querySelectorAll(".orange.juice");
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (let i = 0; i < allOrangeJuiceQuery.length; i++) {
  result += `\n  ${allOrangeJuiceQuery[i].textContent}`;
}

document.getElementById("resultArea").value = result;

Результат

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

Спецификация
DOM # ref-for-dom-document-getelementsbyclassname①

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`getElementsByClassName`	1	12	3	9.5	3.1	18	4	10.1	2	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName