Prototype es un Framework JavaScript que busca facilitar el desarrollo de aplicaciones Web dinámicas. Ofrece un conjunto de herramientas orientado a objetos y una librería para Ajax.

Todos los nodos se puede acceder a través del árbol. Su contenido puede ser modificado o suprimido, y los nuevos elementos se pueden crear. Los nodos del árbol tiene una relación jerárquica entre sí. Los terminos padre, hijo y hermano se utilzan para describir las relaciones entre los nodos del árbol. Acceder a las propiedades DOM HTML (siendo x un nodo del árbol) x.innerHTML - el valor de texto de x x.nodeName - el nombre de x x.nodeValue - el valor de x x.parentNode - el nodo principal de x x.childNodes - los nodos secundarios de x x.attributes - los atributos de los nodos de x Acceder a los métodos x.getElementById (id) - obtener el elemento con el id especificado x.getElementsByTagName (nombre) - obtener todos los elementos con el nombre nombre x.appendChild (nodo) - Insertar un nodo secundario de x x.removeChild (nodo) - eliminar un nodo secundario de x Raiz Elemento Nodo Padre Primer Hijo Ultimo Hijo Siguiente hermano Anterior hermano

Prototype nos ofrece la posibilidad de acceder mas fácilmente a los diferentes elementos de una página Web. Nos permite ahorrar código ofreciendo acceso rápido a diferentes funciones de javascript utilizadas frecuentemente. Por ejemplo, para acceder a un elemento de la página con id 1, con javascript tradicional: document.getElementById(1); Con Prototype: $(1);

El método utilitario $ será uno de los más utilizados, pero Prototype ofrece una enorme cantidad de métodos re escritos para acceder a funcionalidades que deberíamos programar desde cero con javascript. Se adjunta un cheatsheet u hoja de trampas, que contiene todos estos métodos.

CasoJs tradicionalPrototype Obtener el valor que contiene un campo de tipo input de un formulario. document.getElementById (campo).value; $(campo).value; Esconder un elemento.document.getElementById (elemento).style.display = none; $(elemento).hide(); Mostrar un elemento.document.getElementById (elemento).style.display = block; $(elemento).show(); Serializar los campos de un formulario para realizar una peticion Ajax. Demasiado largo para escribirlo acá $(form).serialize();