Inicio Seleccionar Elementos por el Nombre de Atributo

Seleccionar Elementos por el Nombre de Atributo

Author: admin admin
febrero 3, 2025

Cuando manipulamos formularios en JavaScript, es común que varios elementos compartan un mismo atributo name, especialmente en grupos de botones de opción (radio), casillas de verificación (checkbox) o listas desplegables (select). Para seleccionar estos elementos y manipularlos de manera eficiente, podemos utilizar el método getElementsByName().

Este método permite obtener todos los elementos que tienen el mismo name en el DOM y devuelve una colección de nodos, facilitando su acceso y modificación en conjunto.

¿Qué es y cómo funciona getElementsByName?

El método getElementsByName() selecciona todos los elementos que comparten un mismo valor en su atributo name y devuelve una colección NodeList. A diferencia de getElementById(), que selecciona un único elemento, getElementsByName() puede devolver múltiples elementos si hay varios con el mismo name.

javascript
document.getElementsByName("nombre_del_atributo");
  • nombre_del_atributo: Es el valor del atributo name que se quiere seleccionar.

Este método es ideal para trabajar con formularios, donde varios elementos pueden compartir el mismo name.

Ejemplo Básico: Seleccionar Todos los Botones de Opción (radio)

html
<input type="radio" name="color" value="rojo"> Rojo
<input type="radio" name="color" value="azul"> Azul
<input type="radio" name="color" value="verde"> Verde

<script>
  const opciones = document.getElementsByName("color");
  console.log(opciones); // NodeList(3) [input, input, input]
</script>

En el código anterior el método selecciona todos los <input type="radio"> con name="color", devolviendo una lista de nodos.

¿Cuándo usar getElementsByName?

Este método es útil cuando:

  • Necesitas acceder a múltiples elementos relacionados, como botones de opción (radio) o casillas de verificación (checkbox).
  • Quieres obtener el valor seleccionado de un grupo de inputs en formularios.
  • Trabajas con formularios dinámicos, donde los elementos pueden cambiar y necesitas acceder a ellos sin depender de id.

Ejemplo: Obtener el Valor Seleccionado de un Grupo de radio

html
<input type="radio" name="lenguaje" value="JavaScript"> JavaScript
<input type="radio" name="lenguaje" value="Python"> Python
<input type="radio" name="lenguaje" value="Ruby"> Ruby
<button onclick="mostrarSeleccion()">Ver selección</button>
<p id="resultado"></p>

<script>
  function mostrarSeleccion() {
    const opciones = document.getElementsByName("lenguaje");
    let seleccionado = "";

    for (const opcion of opciones) {
      if (opcion.checked) {
        seleccionado = opcion.value;
        break;
      }
    }

    document.getElementById("resultado").textContent = seleccionado 
      ? `Has seleccionado: ${seleccionado}` 
      : "No has seleccionado ninguna opción.";
  }
</script>

A continuación la explicación de lo que hacemos en el código anterior.

  1. Se seleccionan todos los elementos con name="lenguaje".
  2. Se recorre la lista y se verifica cuál está marcado (checked).
  3. Se muestra el valor seleccionado en el <p id="resultado">.

Limitaciones y Errores Comunes

Aunque getElementsByName es útil, tiene algunas limitaciones que debes conocer.

1. Devuelve una NodeList, No un Array:

El método getElementsByName() devuelve una NodeList, que no es un array verdadero y no permite usar métodos como .map() o .forEach() directamente.

javascript
const elementos = document.getElementsByName("campo");
elementos.map(e => e.value); // ❌ Error: map no está disponible en NodeList

Solución: Convierte la colección en un array antes de manipularla.

javascript
const elementos = Array.from(document.getElementsByName("campo"));
elementos.map(e => e.value); // ✅ Funciona correctamente

2. Si No Hay Coincidencias, Devuelve una Lista Vacía

Si intentas seleccionar elementos con un name que no existe en el documento, getElementsByName() devolverá una colección vacía, en lugar de null. Esto significa que no causará un error, pero tampoco obtendrás ningún elemento.

javascript
const elementos = document.getElementsByName("inexistente");
elementos.length; // 0

Solución: Siempre verifica si la colección tiene elementos antes de manipularlos.

javascript
if (elementos.length > 0) {
  console.log("Hay elementos en la colección.");
} else {
  console.log("No se encontraron elementos con ese name.");
}

Métodos Alternativos a getElementsByName

Si bien el metodo getElementsByName() es útil para formularios, en muchos casos es mejor optar por otros métodos que tienen mas funcionalidades y que a su vez son más modernos:

  • querySelectorAll:
    Si necesitas seleccionar elementos de manera más flexible, puedes usar querySelectorAll() con un selector de atributos. Este método devuelve una NodeList similar a getElementsByName(), pero permite usar selectores CSS.
  • getElementsByClassName:
    Si los elementos tienen una clase específica, puedes seleccionarlos con en este selector de elementos.

Conclusión

El método getElementsByName() es una herramienta útil para seleccionar elementos en el DOM basándose en el atributo establecido como name. Es especialmente útil en formularios cuando necesitas acceder a grupos de opciones, como botones de opción (radio) o casillas de verificación (checkbox).

+1
0
+1
0