getElementsByName

20/ene/2008 JavaScript , 8 Comentarios
javascript

Junto con getElementById, posiblemente getElementsByName sea uno de los métodos más utilizados para manipular un árbol DOM dentro de JavaScript. El método getElementsByName nos permite el acceder una lista de elementos, los cuales tengan el nombre pasado por parámetro.

Aquí nos preguntaremos acerca de que elementos dentro de una página web pueden tener el mismo nombre. Ya que hay que recordar que los ID son únicos y por lo tanto hacen referencia a un único elemento. La verdad es que, por poder, podemos tener los elementos que queramos: capas, botones, formularios,... Si bien, un ejemplo de uso podría ser una lista de checkbox. Podemos tener un conjunto de elementos seleccionables, con diferente ID, pero con el mismo nombre. Esto nos permitirá acceder a dicha lista.

Es por ello que lo primero que vamos a hacer es crear la lista de checkbox:

  1. <form id="miformulario" action="#">
  2. <input type="checkbox" name="opcion1" value="1" id="opcion1">
  3. <input type="checkbox" name="opcion1" value="2" id="opcion2">
  4. <input type="checkbox" name="opcion1" value="3" id="opcion3">
  5. <input type="checkbox" name="opcion1" value="4" id="opcion4">
  6. </form>

Es importante apreciar que el nombre (atributo name) que le hemos puesto a los checkbox es el mismo, 'opcion1'.

Lo siguiente que vamos a hacer es crear un método getElementById que acceda a los elementos 'opcion1' mediante el método .getElemementsByName. Este método necesitará que le pasemos como parámetro el valor que hayamos dado al atributo name.

  1. var elementos = document.getElementsByName("opcion1");

El método getElementsByName devuelve un array de NodeList con los elementos que cumplen la condición. Es por ello que deberemos de recorrer el array para acceder a los elementos y su valor. Todo el código de nuestro método quedará de la siguiente forma:

  1. <script type="text/javascript">
  2. function contar(){
  3. var elementos = document.getElementsByName("opcion1");
  4. alert("Hay " + elementos.length + " elementos con el nombre 'opción1'");
  5.  
  6. texto = "";
  7.  
  8. for (x=0;x<elementos.length;x++)
  9. texto = texto + elementos[x].value + "\n";
  10.  
  11. alert("Se han encontrado los siguientes valores en elementos 'opcion1'\n" + texto);
  12.  
  13. }
  14. </script>

Ahora solo nos quedará lanzar este método en algún sitio. Por ejemplo, en un botón:

  1. <button onClick="contar();"/>Valores de los checkbox</button>

Vídeos sobre Javascript

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

8 comentarios en “getElementsByName”

Víctor Cuervo

Cyrille

Estoy empezando a hacer mis pinitos intentado recoger los datos de un formulario en javascript para crear un objeto, tal que así:

var data = {
nombre: document.getElementById(‘nombre’).value,
email: document.getElementById(’email’).value,
etc: document.getElementById(‘etc’).value,
estudios: document.getElementsByName(“estudios”).value
}

Pero imagino que hago algo mal, porque no consigo recoger los datos del radio button (en el ejemplo, “estudios”). Supongo que el error está en lo que imagino que se llama “array” de los valores del campo radio. ¿Será eso?

Si alguien se le ocurre qué estoy haciendo mal, se lo agradecería :)

Víctor Cuervo

ros

muchisimas gracias me fue muy util

Víctor Cuervo

Víctor Cuervo

@Moy, eso es lo que buscamos, cosas sencillas que sirvan a la gente. Nos alegra que te haya gustado.

Víctor Cuervo

Moy

Sencillo pero practico

Víctor Cuervo

SELF

habra alguna forma realizar algun buscador de elementos DiV.

contenido…

contenido…

contenido…

y que mustre varios al mismo tiempo….

gracias

Víctor Cuervo

Paulo Arieu

Hola,yo deseo asignar un valor checked=true a un objeto radio,pero lo marca y me lo desmarca. Podria asesorarme.
saludos

function formu(xformulario){
elementos = document.getElementsByName(“Sexo”)[0];
elementos.checked=true;
elementos.focus;
}

 

Masc

Fem

Víctor Cuervo

megabyte

vaya mierda de codigo

Víctor Cuervo

Luis Perez

esta muy practico y sencillo de utilizar… muy buena acotación

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*