feed twitter facebook LinkedIn facebook

JavaScript » getElementsByName

enero 20, 2008 por Víctor Cuervo 6 Comentarios Imprimir Imprimir

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 JavaScript 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>

Visualizar el ejemplo | Descargar el código

tags: , , , ,

Artículos relacionados:

6 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Luis Perez
    agosto 11, 2008 #

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

  2. megabyte
    enero 8, 2009 #

    vaya mierda de codigo

  3. Paulo Arieu
    septiembre 18, 2009 #

    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

  4. SELF
    febrero 18, 2010 #

    habra alguna forma realizar algun buscador de elementos DiV.

    contenido…

    contenido…

    contenido…

    y que mustre varios al mismo tiempo….

    gracias

  5. Moy
    agosto 28, 2012 #

    Sencillo pero practico

  6. Víctor Cuervo
    agosto 29, 2012 #

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

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*