Obtener elemento por nombre en JavaScript

1. Obtener Elemento por getElementsByName() en JavaScript
2. Obtener Elemento por querySelectorAll() en JavaScript

Hay formas de obtener un elemento como getElementById() y getElementByClass(). Pero, ¿qué sucede si desea seleccionar/editar todos los elementos con un nombre específico?

JavaScript proporciona el método querySelectorAll() o getElementsByName() para realizar esta tarea.

Este artículo presentará cómo obtener elementos por nombre en JavaScript.

Obtener Elemento por getElementsByName() en JavaScript

getElementsByName es un método document integrado que devuelve el elemento Objects/NodeList cuyo atributo name coincide con el nombre especificado. Esta lista de nodos representa un array de nodos a los que se puede acceder mediante un índice, y este índice comienza con 0 como cualquier otra matriz.

Sintaxis

document.getElementsByName(name);

name es un parámetro obligatorio que especifica el name de un atributo HTML que debe coincidir. Devuelve el objeto del elemento DOM correspondiente si se encuentran los elementos; de lo contrario, devuelve null.

La diferencia entre getElementsByName y querySelectorAll es que getElementsByName primero selecciona solo aquellos elementos cuyo atributo de nombre especificado coincide con el nombre dado. Mientras que querySelectorAll puede usar cualquier selector, proporcionando más flexibilidad.

Para obtener información adicional, lea la documentación del método getElementById.

Código de ejemplo:

<div>
  <label>First Name</label>
  <input type="text" id="firstName" name="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" name="lastName" value="Doe">
</div>

const firstName = document.getElementsByName('firstName');
const lastName = document.getElementsByName('lastName');
console.log(firstName[0].value);
console.log(lastName[0].value);

El código anterior definió dos elementos de entrada con firstName y lastName. Cuando accedemos al documento con getElementsByName(), encuentra todos los nodos cuyo atributo de nombre coincida con el nombre y devuelve NodeList. Como se trata de un array, podemos extraer el primer elemento coincidente con [0]. Si se encuentra más de un elemento coincidente, puede iterar e imprimir todos los valores a través del array. La salida se verá así:

Producción :

John
Doe

Obtener Elemento por querySelectorAll() en JavaScript

querySelectorAll() es un método document integrado que devuelve los objetos Element / NodeList cuyos selectores coinciden con los selectores especificados. También se pueden transferir varios selectores.

La diferencia entre querySelectorAll() y querySelector() es que todos los objetos del elemento coincidente se devuelven primero y luego el objeto del único elemento coincidente. Si se pasa un selector no válido, se muestra un SyntaxError.

Sintaxis

document.querySelectorAll(selectors);

selectores es un parámetro obligatorio que especifica el selector de un atributo HTML que debe coincidir. Puede pasar múltiples selectores separando comas. Por ejemplo, document.querySelectorAll('input[name=firstName]') encuentra todos los elementos de entrada cuyo nombre es firstName. Devuelve objetos de elementos DOM coincidentes si se encuentran elementos coincidentes; de lo contrario, devuelve una NodeList vacía.

Para obtener información adicional, lea la documentación del método querySelectorAll.

Código de ejemplo:

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const selectors = document.querySelectorAll('input[name=firstName]');
console.log(selectors.length, selectors[0].value);

El código anterior definió dos elementos de entrada con firstName y lastName. Cuando accedemos al documento con querySelectorAll(), encuentra todos los nodos cuyo atributo de nombre coincida con el nombre dado y devuelve NodeList. Como se trata de un array, podemos extraer el primer elemento coincidente con [0]. Si se encuentra más de un elemento aleatorio, puede iterar en la matriz e imprimir todos los valores. La salida se verá así:

Producción :

1
John