Manipulación del DOM usando Prototype

Por Maikel González Suárez | 2008-04-17 | dom, javascript

Introducción

Prototype es un Framework Javascript usado para agilizar el desarrollo de aplicaciones Web obteniéndose un código compatible en los diferentes navegadores así como fácil de mantener y extender.

Primeramente, en este artículo se mostrará como descargar e instalar Prototype en una aplicación Web. Luego se expondrá detalladamente cada una de las vías para seleccionar elementos del DOM, crear nuevos elementos en tiempo de ejecución, adicionarlos al DOM y eliminarlos del DOM.

Descargando e instalando Prototype

El sitio oficial de Prototype es http://prototypejs.org y la zona de descarga para la versión actual (en este momento la versión 1.6.0.2) es http://prototypejs.org/download. Prototype consiste en un único fichero Javascript llamado prototype-1.6.0.2.js, el cual necesita guardarse en el sistema de archivos de la aplicación a desarrollar.

En lo adelante se asumirá que el fichero descargado fue renombrado prototype.jsy colocado en un directorio /js, previendo una futura actualización sin necesidad de cambiar el código HTML.

Por ejemplo, para un sitio Web nombrado www.ejemplo.com el fichero sería accesible desde http://www.ejemplo.com/js/prototype.js, en este directorio serán guardados también los restantes ficheros Javascript de la aplicación.

Para cargar Prototype en una página del sitio Web sería de la siguiente manera.

 
<html>
    <head>
        <title>Cargando Prototype y mostrando la version instalada </title>
        <script type="text/javascript" src="/js/prototype.js"></script>
        <script type="text/javascript">
            alert('Instalada la Prototype ' + Prototype.Version );
        </script>
    </head>
    <body>
    </body>
</html>

El código anterior llama una ventana de alerta que muestra la versión cargada de Prototype usando la variable interna Prototype.Version.

Documentación de Prototype

El sitio de la Prototype contiene una detallada documentación (en idioma inglés) de las APIs en http://prototypejs.org/api.

La función $()

La primera función a analizar es $() , esta función es similar a document.getElementById()excepto que devuelve los elementos añadiéndole funcionalidades propia de la Prototype.

La función $() admite múltiples argumentos devolviendo un arreglo de elementos, sin embargo, es más usual que se utilice un único argumento, devolviendo por tanto un único elemento.

Para recuperar un elemento (o múltiples elementos) con $() se utiliza el ID de ese elemento a seleccionar.

A continuación se muestra un ejemplo donde el elemento div con ID miDiv es seleccionado y su vez se modifica su contenido por medio del método update().

 
<html>
   <head>
       <title>Seleccionando un elemento con $() y actualizando su contenido</title>
       <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="miDiv"></div>
        <script type="text/javascript">
            $('miDiv').update('Este Div ha sido actualizado');
        </script>
    </body>
</html>

La función $$()

Una de las funciones más poderosas brindadas por Prototype es la función $$(). Esta función permite seleccionar una serie de elementos del DOM usando selectores CSS, devolviendo un arreglo de elementos colocados en el orden que son encontrados en el documento HTML.

Para mostrar como funciona $$() véase los ejemplos siguientes:

$$('img') – selecciona todas las imágenes de un documento
$$('#contenedor a') – selecciona todos los enlaces o vínculos dentro elemento con ID contenedor
$$('div.miClase input[type=text]') – recupera todas las cajas de texto dentro de un div que tenga la clase miClase.

Si no se encuentra ninguna coincidencia entonces devuelve un arreglo vacío.

A continuación se muestra un ejemplo usando $$(). En este ejemplo se recorren cada uno de los elementos seleccionados y se le escribe un número.

 
<html>
    <head>
        <title>Seleccionando y actualizando una serie de elementos usando $$()</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div>
            <ul id="listado">
                <li>Descargar Prototype</li>
                <li>Instalar Prototype</li>
                <li>Disfrutar Prototype</li>
            </ul>
        </div>
        <script type="text/javascript">
            var items = $$('#listado li');
 
            for (var i = 0; i < items.size(); i++) {
                items[i].update('Elemento ' + i);
            }
        </script>
    </body>
</html>

Nótese que se ha usado el método size() para determinar el número de elementos en el arreglo. Este método al igual que otros, es una funcionalidad añadida por Prototype.

De manera general, el uso de la función $$() es más eficiente cuando en el selector CSS se tiene un elemento ID de partida. Por ejemplo, se desean seleccionar todos los elementos con la clase miClase pero se sabe de antemano que todos pertenecen al elemento con ID algunId, la forma más eficiente sería $$('#algunId .miClase') en lugar de $$('. miClase'). La eficiencia en la búsqueda se debe a que la clase será chequeada tan sólo para los elementos dentro #algunId y no para todos los elementos del DOM.

Creación de nuevos elementos e insertándolos en el DOM

La Prototype 1.6.0 posee la habilidad de crear fácilmente nuevos elementos. Un elemento es creado como instancia de la clase Element. Esta clase requiere como primer argumento el tipo de elemento a crear, mientras que el segundo argumento especifica los atributos del elemento.

El ejemplo siguiente muestra como crear vínculo (equivalente a usar la etiqueta HTML <a>). Se invocará el método update() en el vínculo creado para colocarle texto.

Después que un elemento ha sido creado, debe insertarse en el documento llamando el método insert() en otro elemento que ya exista en el documento.

 
<html>
    <head>
        <title>Creando un nuevo elemento en el DOM</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="anuncio">
          <p>Sitio dedicado a los desarrolladores Web</p>             		    
        </div>
 
        <script type="text/javascript">
            var atributos = {
                href   : 'http://www.htmleando.com',
                target : '_blank'
            };
 
            var enlace = new Element('a', atributos);
 
            enlace.update('Visite HTMLeando');
 
            $('anuncio').insert(enlace);
        </script>
    </body>
</html>

Nótese que cuando se crean los atributos para nuevo elemento, algunos nombres de atributos necesitan ir entre comillas. Por ejemplo, utilizando {class : 'MiClase' } causaría un error en algunos navegadores, por lo que es aconsejable usar en su lugar { 'class' : 'MiClase'}.

El HTML equivalente al generado por Javascript sería:

 
<html> 
   <head>
        <title>Creando un nuevo elemento en el DOM</title>
  </head>
    <body>
        <div id="anuncio">
            <p>Sitio dedicado a los desarrolladores Web</p>
            <a href="http://www.htmleando.com" target="_blank">Visite  HTMLeando</a>
        </div>
    </body>
</html>

Cuando se llama el método insert() teniendo como único argumento el elemento nuevo, este se convierte en el último hijo del elemento donde se insertó. Sin embargo, podría haberse insertado como primer hijo con tan sólo cambiar el argumento a insert().

El haber utilizado $('anuncio').insert(enlace) es equivalente a $('anuncio').insert({ bottom : enlace }), mientras si se desea que aparezca antes del párrafo "Sitio dedicado a los desarrolladores Web" entonces debe usarse $('main').insert({ top : enlace }).

Por último, es posible usar el método insert() teniendo como argumento código HTML, siendo una alternativa más rápida.

 
<html>
    <head>
        <title>Creando un nuevo elemento en el DOM</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="anuncio">
          <p>Sitio dedicado a los desarrolladores Web</p>             		    
        </div>
 
        <script type="text/javascript">
            $('anuncio').insert('<a href="http://www.htmleando.com" target="_blank">Visite  HTMLeando</a>');
        </script>
    </body>
</html>

Eliminando elementos del DOM

Para eliminar un elemento del DOM se hace llamando el método remove()en el elemento que se desea eliminar. Al llamar este método se devuelve el elemento a eliminar, permitiendo guardarlo en otra variable en caso que se desee agregar nuevamente al DOM.

Para ocultar o mostrar temporalmente un elemento es aconsejable usar los métodos hide() y show() respectivamente.

Este ejemplo muestra como usar el método remove() para eliminar un elemento de una página HTML. Al correr el ejemplo en el navegador la página aparecerá en blanco.

 
<html>
    <head>
        <title>Eliminando un elemento del DOM usando remove() </title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="anuncio">
          <p>Sitio dedicado a los desarrolladores Web</p>             		    
        </div> 
        <script type="text/javascript">
            $('anuncio').remove();
        </script>
    </body>
</html>