Bievenidos sean a este post, hoy veremos una funcion muy particular.
En otros posts hemos visto dos funciones que nos permitian enlazar un elemento del codigo HTML con una variable de Javascript, si lo hacemos por medio del id del elemento utilizabamos a getElementById pero tambien disponemos de getElementsByName donde buscara todos los elementos con el nombre indicado y lo almacenara en un array, la diferencia es justamente eso donde id es unico y name es un array de varios elementos pero tambien disponemos de la funcion que hablaremos aqui donde trabaja como la segunda funcion pero en lugar de usar un nombre utilizara el nombre de los tags que tengamos en la pagina pero tambien acepta otras particularidades, antes de comentarla veamos como es su sintaxis:
document.getElementsByTagName(identificador);Se aplica como los otros y como argumento le pasamos el nombre del tag que enlazaremos, vamos a crear un ejemplo simple para ver como trabaja, para ello crearemos un archivo en nuestra pc con el nombre de tagname.html y le agregaremos el siguiente codigo:
tagname.html
<html>
<head>
<title>getElementsByTagName</title>
</head>
<body>
<div></div><br>
<button>Boton 01</button><br>
<button>Boton 02</button><br>
<button>Boton 03</button><br>
<button>Boton 04</button>
<script language="javascript">
<!--
var botones=document.getElementsByTagName("button");
var d=document.getElementsByTagName("div");
for(i=0; i < botones.length; i++)
{
botones[i].onclick=function(){
d[0].innerHTML="Presionaste " + this.innerHTML;
};
}
//-->
</script>
</body>
</html>Un codigo simple pero muy practico para ello primero nos centraremos en el codigo HTML del body donde tendremos un div que usaremos para mostrar el texto de nuestro codigo, despues tendremos cuatro botones con distintos textos para identificarlos, observen que no tiene mucho mas, con el HTML comentado pasemos a hablar sobre el tag script.
Primero definiremos dos variables la primera estara relacionada a los botones, y observen que usamos la funcion y como identificador a button para que los encuentre y los almacene en esta variable convirtiendola en un array automaticamente, la siguiente variable hace lo mismo pero con el div y a pesar de ser un elemento convertira la variable en otro array, lo siguiente sera un bucle for para que pasemos por todos los botones, y en este caso le agregamos el evento onclick para cuando cada uno es presionado, le asignamos una funcion anonima la cual tomara el div, observen que le tuvimos que pasar la posicion a pesar de ser una sola porque es un array de un solo elemento, en esta usaremos a innerHTML para escribirla y para ello le pasamos un texto seguido del texto de cada boton por medio de innerHTML y this para utilizar el valor del boton presionado, veamos como trabaja mediante el siguiente video
Como vemos en el video, a medida que presionamos los botones nos lo notifica en el div, como pueden ver puede resultar mas practico cuando debemos manejar muchos elementos iguales y no es necesario diferenciarlos por una identificacion, como comente al comienzo esta funcion tambien dispone de otra posibilidad y es implementarlo de la siguiente manera:
document.getElementsByTagName("*");En este caso tomara todos los elementos del documento y los almacenara y despues podremos acceder a ellos mediante el array generado, puede ser muy util o muy impractico dependiendo de nuestras necesidades porque de esta forma si poseemos todos los elementos deberemos agregar una forma de poder filtrar a nuestras necesidades pero lo bueno es que sabemos que estara dentro de este y no necesitaremos mas variables para ello, pero como digo siempre queda a criterio de cada uno y necesidades del momento.
En resumen, hoy hemos visto getElementsByTagName, otra variante mas para asociar elementos HTML a nuestras variables, esto nos permitira implementar codgo Javascript con mucha facilidad, vimos un ejemplo donde capturamos los botones y un div para trabajar sobre ellos, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 