JavaScript sin dolor usando Prototype (2da parte) - Trabajando el DOM

Prototype tiene 4 objetos (Element, Insertion, Observer y Position) que permiten varias formas de manipular DOM y deja de lado muchas de los altercados entre los navegadores que tratan a DOM con mucho enfurecimiento. En vez de lanzar su computadora por fuera de la ventana, observe esta sección.

El Objeto Element

El objecto Element trabaja de la forma en que usted probablemente lo esperaba: La mayor parte de los métodos de “Element” simplemente toman un ID o una referencia del objeto a Element que usted quiere manipular. Aquí tiene una mirada a algunos de los métodos más útiles:

// Hides an element
Element.hide(element)
// Shows an element
Element.show(element)
// Adds a CSS class to the element
Element.addClassName(element, "cssClassName")
// Removes a CSS class from the element
Element.removeClassName(element, "cssClassName")
// Returns true if element has the CSS class
Element.hasClassName(element, "cssClassName")
// {width: 394, height: 20}
Element.getDimensions(element)
// replaces the innerHTML of element with newHtml
Element.update(element, newHtml)

Observe la lista completa en el Sitio de Sergio Pereira.

El Objeto Insertion

Sé lo que esta pensando: ¿esto parece un poco extraño, correcto? Bien, el objeto Insertion añade pedazos de HTML en, y alrededor de, un Elemento. Hay 4 tipos de Insertion: Befote (Antes), Alter (Después), Top (Cima) and Bottom (Inferior). Esto le muestra como añadiría algún HTML antes de un elemento con el ID "myelement":

new Insertion.Before("myelement", "<p>I'm before!</p>");

Este diagrama muestra donde cada tipo de Insertion dejará su contenido HTML en relación con el elemento dado.

El Objeto Position

El objeto Position ofrece una carga de métodos que pueden indicarle la posición dada en la pantalla, y proporcionarle información sobre dicha posición en relación con otros elementos de forma compatible con los navegadores. Esto debe ocupar la mayor parte del código complicado de animaciones, efectos y del código de drag-and-drop. De una mirada a la referencia de Position para más detalles.