El método getElementsByName es uno de los más utilizado para manipular un árbol DOM con Javascript y como su nombre lo indica getElementsByName nos permite seleccionar una lista de nodos cuyo elemento es el especificado en el parámetro; cada uno de los nodos se le asigna un índice, de acuerdo con el orden en el que aparecen en el html del documento.
Ejemplo:
document.getElementsByTagName('elemento');
document.getElementsByTagName('elemento')[índice_del_elemento];
Más temas para aprender Javascript:
¿Cuál es la diferencia entre getElementsByName y getElementById en JavaScript?
¿Cómo eliminar etiquetas HTML de una cadena de texto con JavaScript?
¿Cómo calcular la distancia entre dos puntos en Google Maps con JavaScript?
¿Cómo generar y leer archivos .zip con Javascript?
Cómo obtener la latitud y longitud de un pin que se puede arrastrar a través de Google Maps
En la primera línea de código estamos obteniendo todos los elementos llamados ‘elemento’, mientras que con la segunda elegimos uno de ellos en concreto.
Muchos elementos dentro de una página web pueden tener el mismo nombre. Un ejemplo de estos elementos 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.
Por ejemplo:
<form id="miformulario" action="#">
<input type="checkbox" name="opcion1" value="1" id="opcion1">
<input type="checkbox" name="opcion1" value="2" id="opcion2">
<input type="checkbox" name="opcion1" value="3" id="opcion3">
<input type="checkbox" name="opcion1" value="4" id="opcion4">
</form>
Es importante apreciar que el nombre (atributo name) que le hemos puesto a los checkbox es el mismo, 'opcion1'. Por medio de Javascript y el método getElementsByName podemos seleccionar o manipular estos elementos.
<script type="text/javascript">
function contar(){
var elementos = document.getElementsByName("opcion1");
alert("Hay " + elementos.length + " elementos con el nombre 'opción1'");
texto = "";
for (x=0;x<elementos.length;x++)
texto = texto + elementos[x].value + "\n";
alert("Se han encontrado los siguientes valores en elementos 'opcion1'\n" + texto);
}
</script>
Ahora solo nos tendremos que llamar este método, por ejemplo, desde un botón:
<button onClick="contar();"/>Valores de los checkbox</button>
Ejemplo completo:
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
<form id="miformulario" action="#">
<input type="checkbox" name="opcion1" value="1" id="opcion1">Valor 1
<input type="checkbox" name="opcion1" value="2" id="opcion2">Valor 2
<input type="checkbox" name="opcion1" value="3" id="opcion3">Valor 3
<input type="checkbox" name="opcion1" value="4" id="opcion4">Valor 4
<button onClick="contar();"/>Valores de los checkbox</button>
</form>
</body>
<script type="text/javascript">
function contar(){
var elementos = document.getElementsByName("opcion1");
alert("Hay " + elementos.length + " elementos con el nombre 'opción1'");
texto = "";
for (x=0;x<elementos.length;x++)
texto = texto + elementos[x].value + "\n";
alert("Se han encontrado los siguientes valores en elementos 'opcion1'\n" + texto);
}
</script>
</html>
Recuerda compartir el artículo en redes sociales y si tienes comentarios, escríbeme en la parte de abajo.
