JavaScript Get Element por nombre - HTML
En varias situaciones, los programadores deben obtener el elemento HTML por el atributo de nombre. Supongamos que el desarrollador quiere acceder a un control de formulario, como un botón de radio o casilla de verificación, para leer o manipular su valor. Más específicamente, el "nombreEl atributo se utiliza para grupos de controles de formulario relacionados y se puede proporcionar el mismo nombre a muchos controles, lo que permite acceder como un solo grupo.
Esta publicación ilustrará los métodos para recuperar un elemento HTML por nombre en JavaScript.
Cómo obtener elementos por nombre en JavaScript?
En JavaScript, puede acceder a un elemento HTML utilizando su atributo de nombre con la ayuda de los siguientes métodos de JavaScript predefinidos:
-
- método getElementsByName ()
- método QuerySelectorAll ()
Método 1: Obtener elemento por nombre utilizando el método "getElementsByName ()"
Para obtener el elemento HTML por su nombre, use el "getElementsByName ()" método. Este método ofrece una colección de elementos que tienen el atributo de nombre especificado.
Sintaxis
La siguiente sintaxis se usa para el método GetElementsByName ():
documento.getElementsByName ("Nombre")
Ejemplo
En primer lugar, cree seis botones. Cinco de ellos tienen un "nombre"Atributo que se usa para obtener el elemento HTML"botón". Adjunte el evento OnClick con el sexto botón que llamará al "AplicarStyle ()"Funciona para diseñar los cinco botones:
Defina una función "AplicarStyle ()"Eso se activará en el botón Haga clic y cambiará el color de fondo de todos los botones. Para hacer esto, primero, obtenga todo el "botón"Elementos como grupo llamando al"getElementsByName ()" método:
function Applystyle ()
const btns = documento.getElementsByName ("BTN");
btns.foreach (btn =>
btn.estilo.fondos = "CadetBlue";
);
Como puede ver en la salida mientras hace clic en el botón, se cambiará el color de fondo de los cinco botones:
Método 2: Obtener elemento por nombre utilizando el método "QuerySelectorAll ()"
También puedes utilizar el "QuerySelectorAll ()"Método para obtener elementos utilizando el"nombre"Atributo en JavaScript. Este método se utiliza para recuperar todos los elementos en un documento que coincida con un selector/atributo especificado, como la clase, ID o nombre CSS.
Sintaxis
La sintaxis dada se utiliza para obtener el elemento por nombre usando el "QuerySelectorAll () " método:
documento.QuerySelectorAll ('[name = "n1"]');
Ejemplo
En el siguiente ejemplo, cambiaremos el color de solo aquellos botones cuyo nombre es "BTN1":
En la función definida, llamaremos a First Access todos los elementos del botón cuyo nombre es "BTN1"Y luego aplique el estilo:
function Applystyle ()
const btns = documento.QuerySelectorAll ('[name = "btn1"]');
btns.foreach (btn =>
btn.estilo.fondos = "CadetBlue";
);
La salida dada significa que solo dos botones han cambiado su color de fondo cuyo nombre es "BTN1":
Nota: Si desea obtener un solo elemento, se recomienda usar el documento.QuerySelector en lugar del documento.queryselectorall.
Conclusión
Para obtener o recuperar un elemento por su nombre, use el "getElementsByName ()" o el "QuerySelectorAll ()" métodos. El método utilizado más común y eficientemente para obtener el elemento por su nombre es el método "getElementsByName ()". Esta publicación ilustra los métodos para recuperar un elemento HTML por nombre en JavaScript.