02 Apr

El Modelo de Objetos de Documento, en inglés, Document Object Model, (DOM), es una forma de representar los elementos de un documento estructurado (tal como una página Web HTML o un documento XML) como objetos que tienen sus propios métodos y propiedades. El responsable del DOM es el World Wide Web Consortium (W3C). El DOM es una Interfaz de Programación de Aplicaciones, en inglés, Application Programming Interface,(API), permite acceder, añadir y cambiar dinámicamente contenido estructurado en documentos con lenguajes como JavaScript. Provee una representación estructurada del documento y define una vía para que dicha estructura pueda ser desarrolladores Web ver el documento como un grupo estructurado de nodos. En esencia, el DOM conecta las páginas Web con scripts o lenguajes de programación. El DOM fue diseñado para ser independiente de cualquier lenguaje de programación particular, haciendo la representación estructurada del documento disponible para un API.

EJEMPLO 1

A pesar de sus orígenes, DOM se ha convertido en una utilidad disponible para la mayoría de lenguajes de programación (Java, PHP, JavaScript) y cuyas únicas diferencias se encuentran en la forma de implementarlo.


Métodos de la interfaz Document

• Element createElement (DOMString tagname)

• Attr createAttribute (DOMString name)

• Text createTextNode (DOMString data)

• NodeList getElementsByTagName(DOMString tagname)

• Element getElementById (DOMString elementID)


Árbol de nodos


Una de las tareas habituales en la programación de aplicaciones web con JavaScript consiste en la manipulación de las páginas web. De esta forma, es habitual obtener el valor almacenado por algunos elementos (por ejemplo los elementos de un formulario), crear un elemento (párrafos, <div>, etc.) de forma dinámica y añadirlo a la página, aplicar una animación a un elemento (que aparezca/desaparezca, que se desplace, etc.).


Todas estas tareas habituales son muy sencillas de realizar gracias a DOM. Sin embargo, para poder utilizar las utilidades de DOM, es necesario "transformar" la página original. Una página HTML normal no es más que una sucesión de caracteres, por lo que es un formato muy difícil de manipular. Por ello, los navegadores web transforman automáticamente todas las páginas web en una estructura más eficiente de manipular.


Esta transformación la realizan todos los navegadores de forma automática y nos permite utilizar las herramientas de DOM de forma muy sencilla. El motivo por el que se muestra el funcionamiento de esta transformación interna es que condiciona el comportamiento de DOM y por tanto, la forma en la que se manipulan las páginas.

DOM transforma todos los documentos XHTML en un conjunto de elementos llamados nodos, que están interconectados y que representan los contenidos de las páginas web y las relaciones entre ellos. Por su aspecto, la unión de todos los nodos se llama "árbol de nodos".


Acceso directo a los nodos


Una vez construido automáticamente el árbol completo de nodos DOM, ya es posible utilizar las funciones DOM para acceder de forma directa a cualquier nodo del árbol. Como acceder a un nodo del árbol es equivalente a acceder a "un trozo" de la página, una vez construido el árbol, ya es posible manipular de forma sencilla la página: acceder al valor de un elemento, establecer el valor de un elemento, mover un elemento de la página, crear y añadir nuevos elementos, etc. DOM proporciona dos métodos alternativos para acceder a un nodo específico: acceso a través de sus nodos padre y acceso directo.


Las funciones que proporciona DOM para acceder a un nodo a través de sus nodos padre consisten en acceder al nodo raíz de la página y después a sus nodos hijos y a los nodos hijos de esos hijos y así sucesivamente hasta el último nodo de la rama terminada por el nodo buscado.


Sin embargo, cuando se quiere acceder a un nodo específico, es mucho más rápido acceder directamente a ese nodo y no llegar a el descendiendo a través de todos sus nodos padre. Por ese motivo, no se van a presentar las funciones necesarias para el acceso jerárquico de nodos y se muestran solamente las que permiten acceder de forma directa a los nodos.

Por último, es importante recordar que el acceso a los nodos, su modificación y su eliminación solamente es posible cuando el árbol DOM ha sido construido completamente, es decir, después de que la página XHTML se cargue por completo.


Publicado por: Instituto de Información Científica y Tecnológica 

Fecha de publicación: Mayo, 2010.

Bibliografía

Recuperado de: Ciencias de la Información.(2010). Estándares web. Instituto de Información Científica y Tecnológica. Habana-Cuba.

https://www.redalyc.org/pdf/1814/181421569009.pdf 

Comentarios
* No se publicará la dirección de correo electrónico en el sitio web.
ESTE SITIO FUE CONSTRUIDO USANDO