Una página web se compone de un árbol de elementos, llamado DOM. La representación visual de estos elementos, ya sean solos o combinados, forma la página web que vemos en nuestro navegador.
El lenguaje JavaScript combinado con el modelo de elementos, DOM, nos permite acceder a las propiedades de cada uno de los elementos que forman nuestra página HTML, leer sus valores, modificarlos,…
Esta codificación se puede hacer directamente indicando el ID del elemento en cuestión. Si bien, también existe la posibilidad de manipular un elemento que haya seleccionado el usuario con el ratón.
Para ello vamos a ver como podemos conocer que elemento, de los que forma nuestra página HTML, ha sido seleccionado por el usuario.
Lo primero que tenemos que controlar es que el usuario pinche con el ratón en algún lado de la página. Esto lo haremos mediante el evento onmousedown, el cual aplicaremos al elemento BODY de la página. Este evento lanzará una función, la cual reciba como parámetro el objeto event. Dicho objeto es el que guarda toda la información sobre el evento que se ha producido. La función solo tendrá que destripar la información de dicho objeto para ver que elemento fue pulsado.
La línea de código para capturar el evento del ratón es la siguiente:
Vemos que la función que se lanza es «elemento». Con respecto a la propiedad que contiene la información del elemento pulsado, tenemos discrepancias entre los navegadores (no nos extraña a estas alturas). Algunos utilizan la propiedad scrElement y otros la propiedad target. Es por ello que tendremos que hacer una bifurcación en nuestro código.
Lo que si es igual para todos los navegadores, es la propiedad, incluida sobre la anterior, que contiene el nombre de la etiqueta. Esta propiedad es tagName.
Nuestro código quedará de la siguiente forma:
function elemento(e){
if (e.srcElement)
tag = e.srcElement.tagName;
else if (e.target)
tag = e.target.tagName;
alert("El elemento selecionado ha sido " + tag);
}
