Utilizamos la función getElement() de Mootools para seleccionar un elemento de la página web, que luego podremos alterar para cambiar sus propiedades con otros métodos de Element.
Seguimos con el Manual de Mootools de DesarrolloWeb.com.
En artículos precedentes estuvimos brindando las nociones más básicas del módulo Element y vamos a continuar con ello.
Debe haber quedado claro hasta el momento el uso de las funciones dólar $() y doble dólar $$(), porque las vamos a utilizar constantemente en este manual. Si no es así, conviene repasar el uso de esas funciones en los artículos Método $() y Método $$().
Vimos que con esas funciones se podía acceder rápidamente a elementos de la página a través de sus identificadores (atributo id del elemento HTML). Ahora vamos a ver cómo acceder a elementos de la página que están dentro de otros. Los elementos que vamos a acceder ahora no necesitan tener identificadores para poder ser accedidos y procesados por medio de Mootools. Para ello utilizaremos el método getElement(), de cualquier objeto de la clase Element.
El método getElement() pertenece a la clase Element, así pues, tenemos que invocarlo sobre una instancia de la clase Element, es decir, un elemento de la página. Los elementos podemos conseguirlos a través del método $().
$("id_de_un_elemento_cualquiera").getElement("div");
getElement() recibe como parámetro el nombre de una etiqueta HTML y devuelve el primer espécimen de esa etiqueta que haya dentro del elemento donde fue invocado getElement(). Esta explicación puede parecer un poco retorcida, pero se entenderá así: en la sentencia anterior, getElement() devolverá la primera etiqueta DIV que haya dentro del elemento con id="id_de_un_elemento_cualquiera". De todos modos, como solemos hacer en desarrolloweb .com, vamos a ver algunos ejemplos de uso de getElement() que terminarán de aclarar este asunto.
Imaginemos que tenemos un código HTML como el que sigue:
<body>
<ul>
<li>Elemento en una lista fuera del div</li>
<li>Otro elemento fuera del div</li>
<li>Elemento <a href="#">con enlace!</a></li>
</ul>
<div id="capadiv">
<ul>
<li>Lista, elemento 1 <a href="#">enlace dentro de elemento</a></li>
<li>Lista, elemento 2</li>
<li>Otro elemento</li>
</ul>
<p>
Esto es un párrafo. Pongo un <a href="#">enlace dentro del párrafo</a>
</p>
</div>
<p>Pongo otro párrafo fuera del div</p>
</body>
Como vemos tenemos un cuerpo de la página, englobado en la etiqueta BODY y dentro del mismo varios elementos o etiquetas HTML. Vamos ahora a trabajar con esta página, simplemente seleccionando algunos de estos elementos y alterando sus propiedades, para cambiarlos un poco y así ver que los hemos seleccionado correctamente.
Para ello veamos esta primera función:
function seleccionarParrafoEnDiv(){
miParrafo = $("capadiv").getElement("p");
miParrafo.set("html", "Meto otro texto en el párrafo");
}
Esto lo que hace es seleccionar el primer párrafo (etiqueta P) que hay dentro del elemento con id="capadiv". Podemos ver en el código HTML anterior que había una capa DIV con ese identificador:
<div id="capadiv>
Dentro contiene varias otras etiquetas, entre ellas un párrafo Así pues, seleccionamos ese primer párrafo con la sentencia:
miParrafo = $("capadiv").getElement("p");
Luego, con la siguiente línea alteramos alguna de las propiedades de ese párrafo. Vemos que para alterarlo utilizamos el método set() de Element, que recibe dos parámetros. El primero es lo que queremos alterar y el segundo es el nuevo contenido.
miParrafo.set("html", "Meto otro texto en el párrafo");
La ejecución de la línea anterior forzará a que el contenido del párrafo sea "Meto otro texto en el párrafo".
Ahora veamos una segunda función que también hace uso de getElement() para seleccionar otro elemento.
function seleccionarPrimeraLista(){
miLista = $(document.body).getElement("ul");
miLista.set ("style", "font-size: 150%; color: red");
}
Con este nuevo ejemplo estamos seleccionando el primer elemento UL que hay en el BODY del documento HTML. Esto nos seleccionará la primera lista UL que haya en el cuerpo de la página. Luego con la siguiente línea cambiamos ese elemento UL para asignarle nuevos estilos CSS. El método set() de la clase Element, como hemos podido comprobar y tal como habíamos visto en distintos ejemplos de este manual de desarrollo web .com, es muy polivalente, permitiendo alterar cualquier estilo o atributo de una etiqueta HTML.
Para finalizar este ejercicio podemos ver el ejemplo en marcha en una página aparte.
En artículos precedentes estuvimos brindando las nociones más básicas del módulo Element y vamos a continuar con ello.
Debe haber quedado claro hasta el momento el uso de las funciones dólar $() y doble dólar $$(), porque las vamos a utilizar constantemente en este manual. Si no es así, conviene repasar el uso de esas funciones en los artículos Método $() y Método $$().
Vimos que con esas funciones se podía acceder rápidamente a elementos de la página a través de sus identificadores (atributo id del elemento HTML). Ahora vamos a ver cómo acceder a elementos de la página que están dentro de otros. Los elementos que vamos a acceder ahora no necesitan tener identificadores para poder ser accedidos y procesados por medio de Mootools. Para ello utilizaremos el método getElement(), de cualquier objeto de la clase Element.
El método getElement() pertenece a la clase Element, así pues, tenemos que invocarlo sobre una instancia de la clase Element, es decir, un elemento de la página. Los elementos podemos conseguirlos a través del método $().
$("id_de_un_elemento_cualquiera").getElement("div");
getElement() recibe como parámetro el nombre de una etiqueta HTML y devuelve el primer espécimen de esa etiqueta que haya dentro del elemento donde fue invocado getElement(). Esta explicación puede parecer un poco retorcida, pero se entenderá así: en la sentencia anterior, getElement() devolverá la primera etiqueta DIV que haya dentro del elemento con id="id_de_un_elemento_cualquiera". De todos modos, como solemos hacer en desarrolloweb .com, vamos a ver algunos ejemplos de uso de getElement() que terminarán de aclarar este asunto.
Imaginemos que tenemos un código HTML como el que sigue:
<body>
<ul>
<li>Elemento en una lista fuera del div</li>
<li>Otro elemento fuera del div</li>
<li>Elemento <a href="#">con enlace!</a></li>
</ul>
<div id="capadiv">
<ul>
<li>Lista, elemento 1 <a href="#">enlace dentro de elemento</a></li>
<li>Lista, elemento 2</li>
<li>Otro elemento</li>
</ul>
<p>
Esto es un párrafo. Pongo un <a href="#">enlace dentro del párrafo</a>
</p>
</div>
<p>Pongo otro párrafo fuera del div</p>
</body>
Como vemos tenemos un cuerpo de la página, englobado en la etiqueta BODY y dentro del mismo varios elementos o etiquetas HTML. Vamos ahora a trabajar con esta página, simplemente seleccionando algunos de estos elementos y alterando sus propiedades, para cambiarlos un poco y así ver que los hemos seleccionado correctamente.
Para ello veamos esta primera función:
function seleccionarParrafoEnDiv(){
miParrafo = $("capadiv").getElement("p");
miParrafo.set("html", "Meto otro texto en el párrafo");
}
Esto lo que hace es seleccionar el primer párrafo (etiqueta P) que hay dentro del elemento con id="capadiv". Podemos ver en el código HTML anterior que había una capa DIV con ese identificador:
<div id="capadiv>
Dentro contiene varias otras etiquetas, entre ellas un párrafo Así pues, seleccionamos ese primer párrafo con la sentencia:
miParrafo = $("capadiv").getElement("p");
Luego, con la siguiente línea alteramos alguna de las propiedades de ese párrafo. Vemos que para alterarlo utilizamos el método set() de Element, que recibe dos parámetros. El primero es lo que queremos alterar y el segundo es el nuevo contenido.
miParrafo.set("html", "Meto otro texto en el párrafo");
La ejecución de la línea anterior forzará a que el contenido del párrafo sea "Meto otro texto en el párrafo".
Ahora veamos una segunda función que también hace uso de getElement() para seleccionar otro elemento.
function seleccionarPrimeraLista(){
miLista = $(document.body).getElement("ul");
miLista.set ("style", "font-size: 150%; color: red");
}
Con este nuevo ejemplo estamos seleccionando el primer elemento UL que hay en el BODY del documento HTML. Esto nos seleccionará la primera lista UL que haya en el cuerpo de la página. Luego con la siguiente línea cambiamos ese elemento UL para asignarle nuevos estilos CSS. El método set() de la clase Element, como hemos podido comprobar y tal como habíamos visto en distintos ejemplos de este manual de desarrollo web .com, es muy polivalente, permitiendo alterar cualquier estilo o atributo de una etiqueta HTML.
Para finalizar este ejercicio podemos ver el ejemplo en marcha en una página aparte.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...