Cómo obtener elemento escribiendo JavaScript

Hay varias formas de obtener o buscar un elemento en JavaScript, incluidos GetElementByID () y GetElementByClass (). Sin embargo, ¿alguna vez has pensado en obtener el tipo de elemento?? Si es así, luego le digamos que JavaScript ofrece los métodos QuerySelectorAll () o getElementsByTagName () que se pueden utilizar para el propósito especificado.

Este artículo explicará los métodos para obtener elementos de tipo en JavaScript.

Cómo obtener elemento escribiendo JavaScript?

Para obtener elementos por tipo, use los siguientes métodos:

• método QuerySelectorAll ()
• método getElementsByTagName ()

Veamos cada uno de los métodos mencionados uno por uno!

Método 1: Obtener elemento mediante el tipo de uso de QuerySelectorAll ()

"QuerySelectorAll ()"Es un método de documento predefinido de JavaScript que devuelve los objetos de elemento que coinciden con los selectores especificados. Los métodos QuerySelectorAll () y QuerySelector () funcionan lo mismo, pero la principal diferencia es que QuerySelectorAll () obtiene todos los elementos coincidentes con el selector, mientras que el método QuerySelector () solo devuelve el objeto de elemento coincidente.

Sintaxis
Siga la sintaxis dada para el elemento Getting mediante el tipo utilizando el método QuerySelectorAll ():

documento.QuerySelectorAll (selectores);

Aquí el "selector"Es el tipo cuyos elementos desea obtener, por ejemplo"aporte" o "entrada [type = text]". Descubrirá todos los elementos coincidentes con el selector especificado y regresará al DOM. Puede pasar múltiples selectores separados por comas.

Ejemplo 1: Obtenga un elemento por tipo
En el siguiente ejemplo, crearemos un campo de entrada "texto"Con ID"Nombre"Y valor"John"Y un encabezado:

Get Element por type = input [type = text]

Además, cree tres tipo de entrada "radio"Asignando ID y valores:

Html

CSS

Javascript

Luego, cree un botón adjuntando "al hacer clic"Evento que activará el método definido por el usuario llamado"elementgetByType ()":

Hacer clic

En un archivo JavaScript, primero, llame al "QuerySelectorAll ()"Método al pasar un selector"entrada [type = text]"Eso devolverá todos los elementos de este tipo. Entonces, defina un "elementgetByType ()Método "donde un método alert () imprime el mensaje con el valor del selector especificado:

var ElementTyPeSelector = documento.QuerySelectorAll ('input [type = text]');
función elementgetByType ()
alerta ("El texto de entrada de entrada del elemento HTML contiene" + ElementTypeSelector [0].valor);

La salida muestra "John"En el mensaje de alerta, que es el valor del campo de texto tipo de entrada:

Ejemplo 2: Obtenga todos los elementos por tipo
Ahora, obtenga todos los elementos del tipo de entrada pasando "aporte"Como argumento en el"QuerySelectorAll ()" método:

var ElementTyPeSelector = documento.QuerySelectorAll ('entrada');

Imprima los valores del "aporte"Selector incluye"texto" y "radio"En la consola:

consola.log (ElementTypeSelector [0].Valor, ElementTypeSelector [1].valor, elementtypeSelector [2].valor, elementtypeSelector [3].valor);

Producción

Método 2: Obtener elemento mediante el tipo usando getElementsByTagName () Método

Hay otro método predefinido de JavaScript llamado "getElementsBytagName ()"Que devuelve los objetos de elemento cuyo nombre de etiqueta coincide con el nombre especificado.

Sintaxis
Use la siguiente sintaxis para usar el método GetElementBytagName ():

documento.getElementsBytagName (nombre);

Aquí, "nombre"Es el nombre de etiqueta de un atributo HTML.

Ejemplo
En este ejemplo, obtendremos el valor del elemento mediante el tipo usando el "getElementsBytagName ()"Método, donde pasaremos el nombre de la etiqueta"aporte"Para que los valores del elemento coincidan con el nombre de la etiqueta especificado y lo almacene en una variable"elementtypeSelector". Entonces, defina un "elementgetByType ()Función ", en la que el bucle for iterará hasta la longitud del selector y verifique el tipo de selector; Si es igual a "radio", llame al método alert () para imprimir los valores del elemento de radio:

var ElementTyPeSelector = documento.getElementsByTagName ('Input');
función elementgetByType ()
para (deja i = 0; yo < elementTypeSelector.length; i++)
if (ElementTyPeSelector [i].type == 'Radio')
alerta ("La radio de entrada del elemento HTML contiene" + ElementTypeSelector [i].valor);

La salida muestra todos los valores de la radio de tipo de entrada:

Hemos proporcionado todas las soluciones para obtener elementos al tipo de JavaScript.

Conclusión

Para obtener los elementos por tipo, use los métodos predefinidos de JavaScript que incluyen el método QuerySelectorAll () o el método GetElementSByTagName (). La única diferencia entre ambos es que el getElementsBytagName () solo obtuvo elementos cuyo nombre de etiqueta definido coincide con la etiqueta proporcionada mientras QuerySelectorAll, que selecciona todos los elementos. En este artículo, hemos explicado los diferentes enfoques para obtener elementos al escribir JavaScript.