JavaScript getElementsByClassName

En JavaScript, el método GetElementsByClassName () es muy útil para acceder a los elementos que coinciden con todos los nombres de clase aprobados como argumentos. Además, devuelve una htmlcollection que contiene cada elemento descendiente. Además, este método también ayuda a obtener los elementos HTML requeridos, almacenarlos en variables y realizar la funcionalidad requerida utilizando JavaScript.

Este artículo guiará sobre la implementación del "getElementsByClassName ()"Método en JavaScript.

¿Qué es el método JavaScript getElementsByClassName ()??

El "getElementsByClassName ()El método "devuelve los elementos que tienen el nombre de clase especificado, que se pasa como argumento. Devuelve un objeto que se asemeja a una matriz de todos los elementos secundarios con los nombres de clase especificados. Además, incluye la colección HTML de todos los elementos infantiles.

Cómo usar el método JavaScript GetElementsByClassName ()?

Con el propósito de usar el método JavaScript GetElementsByClassName () en JavaScript, siga la sintaxis dada:

elemento.GetElementsByClassName (ClassName)

En la sintaxis dada, "nombre de la clase"¿Es el argumento obligatorio que se va a aprobar. Es el valor de la cadena que se refiere a nombres de clases individuales o múltiples.

Ejemplo 1: Obtener un solo elemento usando el método getElementByClassName ()
En el siguiente ejemplo, en primer lugar, crearemos un DIV, le asignaremos una "clase" y agregaremos algún texto:

Implementación de la clase

Ahora, aplique el "getElementsByClassName ()Método para acceder a DIV creado al pasar el nombre de clase como argumento:

var x = documento.getElementsByClassName ('class');

Por último, muestre el valor resultante en el DOM utilizando el "documento.escribir()" método. Esto devolverá un objeto similar a una matriz:

documento.escribir (x);

La salida correspondiente será:

En la salida anterior, el [objeto htmlCollection] se refiere al objeto similar a la matriz.

Ejemplo 2: Obtener múltiples elementos utilizando el método GetElementsByClassName ()
En el siguiente ejemplo, en primer lugar, agregaremos tres casillas de verificación usando la etiqueta, asignarles la misma clase que "lang"Y agregue el texto requerido como se muestra a continuación:

Pitón

Javascript

Html

Ahora, incluya una casilla de verificación adicional con el valor "Seleccionar todo"Y adjuntar un"al hacer clic()"Evento para que cuando se seleccione la casilla de verificación, el" "controlar()"La función se llama con el argumento"este"Como sigue:

Seleccionar todo

A continuación, en el archivo JavaScript, defina una función llamada "controlar()"Con una variable llamada"caja"Como argumento que se refiere"este"Especificado antes. Ahora, acceda a la casilla de verificación con el documento.método getElementsByClassName () y coloque el valor del atributo de clase "lang"Como su argumento. Finalmente, usa un "paraBucle para iterar cada valor en una casilla de verificación y use el atributo "verificado" para marcar cada valor como se verifica:

comprobación de funciones (casilla de verificación)
Get = documento.getElementsByClassName ('lang');
para (var i = 0; iConsigo].Checked = casilla de verificación.comprobado;

Producción

Hemos compilado el uso del método getElementsByClassName () utilizando varios ejemplos.

Conclusión

El "getElementsByClassName ()El método "devuelve los elementos que tienen el nombre de clase especificado, que se pasa como argumento. Devuelve un objeto que se asemeja a una matriz de todos los elementos secundarios con los nombres de clase especificados. Puede utilizar este método para seleccionar elementos HTML simples o múltiples que tengan el mismo nombre de clase. Este artículo explicó el uso del método getElementsByClassName () utilizando varios ejemplos.