JavaScript getElementsByClassName (Español)

Resumen: en este tutorial, aprenderá a usar el método getElementsByClassName() para seleccionar elementos por nombre de clase.

Introducción al método getElementsByClassName ()

Cada elemento HTML tiene un atributo de clase opcional como este:

Code language: HTML, XML (xml)

El valor del atributo de clase es una lista separada por espacios de las clases del elemento. Las clases distinguen entre mayúsculas y minúsculas.

Las clases le permiten utilizar CSS para hacer coincidir elementos. Por ejemplo:

Code language: CSS (css)

En JavaScript, usa el método getElementsByClassName() para seleccionar elementos basados en sus clases.

El método getElementsByClassName() está disponible en el objeto document y en cualquier elemento HTML.

El El método getElementsByClassName() acepta un solo argumento que es una cadena que contiene uno o más nombres de clase:

Code language: JavaScript (javascript)

En este sintaxis, el parámetro classNames es una cadena que representa un nombre de clase para que coincida. Por ejemplo:

Code language: JavaScript (javascript)

Si hace coincidir elementos por varias clases, debe usar espacios en blanco para separarlos de esta manera:

Code language: JavaScript (javascript)

Tenga en cuenta que no puede utilizar selectores de clases, por ejemplo, .btn o .btn-primary para getElementsByClassName() método.

El método getElementsByClassName() devuelve un HTMLCollection en vivo, que es un objeto similar a una matriz.

Si llama al método getElementsByClassName() en el objeto document, el método busca para elementos con los nombres de clase especificados en todo el documento.

Sin embargo, cuando llamas al método getElementsByClassName() en un elemento específico, solo devuelve elementos coincidentes en el subárbol de ese elemento.

Ejemplos de JavaScript getElementsByClassName ()

Tomemos algunos ejemplos del uso del método getElementsByClassName().

Suponga que tiene el siguiente HTML:

1) Llamar a JavaScript getElementsByClassName () en un ejemplo de elemento

El siguiente ejemplo ilustra cómo usar el método getElementsByClassName() para seleccionar el <li> elementos que son descendientes del elemento <ul>:

Salida:

Code language: JavaScript (javascript)

Cómo funciona:

• Primero, seleccione el elemento <ul> con el nombre de clase menu usando el método getElementById().
• Luego, seleccione los elementos <li>, que son los descendientes de <ul> elemento, usando el método getElementsByClassName().
• Finalmente, cree una matriz del contenido de texto de <li> elementos tomando prestado el método map() del objeto Array.

2) Llamar a JavaScript getElementsByClassName () en el ejemplo de documento

Para buscar el elemento con el class heading-secondary, usa el siguiente código:

Salida:

Code language: JavaScript (javascript)

Este ejemplo invoca el método getElementsByClassName() en el objeto document, por lo tanto, busca los elementos con la clase heading-secondary en todo el documento.

En este tutorial, aprendió a usar el método getElementsByClassName() para seleccionar elementos por uno o más nombres de clase.