
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:
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.
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:
Ahora solo nos quedará lanzar este método en algún sitio. Por ejemplo, en un botón:
Valores de los checkbox
maria
Hola,muy bueno el ejemplo!quisiera preguntarte como tendria que hacer para leer una etiqueta XML pero que tenga cierto valor,ejemplo 12345,quiero leer la etiqueta numero pero solo la que tiene el valor 12345. Gracias!!!
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 :)
ros
muchisimas gracias me fue muy util
Víctor Cuervo
@Moy, eso es lo que buscamos, cosas sencillas que sirvan a la gente. Nos alegra que te haya gustado.
Moy
Sencillo pero practico
SELF
habra alguna forma realizar algun buscador de elementos DiV.
contenido…
contenido…
contenido…
y que mustre varios al mismo tiempo….
gracias
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
megabyte
vaya mierda de codigo
Luis Perez
esta muy practico y sencillo de utilizar… muy buena acotación