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.

El método Element.getElementsByClassName() retorna una HTMLCollection "viva" conteniendo todos los elementos hijos que tienen todos los nombres de clase dados. Cuando se llama en el objeto document, se realiza la búsqueda en el documento completo, incluyendo el nodo raíz.

De forma similar, el método Document.getElementsByClassName() actúa en todo el documento; retornará los elementos que sean descendientes del documento raiz especificado que tengan los nombres de clase dados.

Sintaxis

js
var elements = element.getElementsByClassName(names);
  • elements es una HTMLCollection "viva" de los elementos encontrados.
  • names es una cadena representando la lista de nombres de clase que deben concordar; los nombres de clase está separados por espacios en blanco.
  • element es cualquier Element de un documento.

Ejemplo

Obtiene todos los elementos que tienen una clase test:

js
element.getElementsByClassName("test");

Obtiene todos los elementos que tienen tanto la clase red como test:

js
element.getElementsByClassName("red test");

Obtiene todos los elementos que tienen la clase of test, dentro de un elemento que tiene el id main:

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

Podemos también usar métodos de Array.prototype en cualquier HTMLCollection pasando el HTMLCollection como el valor this del método. Aquí encontramos todos los elementos <div> que tienen una clase test:

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

Especificaciones

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

Compatibilidad con navegadores

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.