DOM
El Modelo de Objetos del Documento (DOM) es un API para documentos HTML y XML. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido y visualización. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.
Todas las propiedades, métodos y eventos disponibles en el documento estan organizados en objetos. Todos estos objetos están disponibles a JavaScript en los navegadores web más recientes, sin embargo el DOM fue diseñado para ser independiente del lenguaje de programación, haciendo diponible la representación estructural del documento desde una única y "consistente" API.
La W3C (World Wide Web Consortium) establece un estandar para el DOM llamada la W3C DOM - ¿Qué es DOM?
El HTML Dinámico (DHTML, del inglés Dynamic HTML) designa el conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de lenguaje HTML estático, un lenguaje interpretado en el lado del cliente (como JavaScript), el lenguaje de hojas de estilo en cascada (CSS) y la jerarquía de objetos de un Document Object Model (DOM). - Wikipedia.
Mientras que HTML es usado para almacenar el contenido (estructura), CSS el estilo (presentación), JavaScript es usado para dar un comportamiento a los elementos del documento HTML.
DOM Leves
Niveles del DOM:
DOM Level 1: especificación separada en dos partes: DOM Core y HTML.
DOM Core Level 1 provee un conjunto de nivel bajo de interfaces que pueden represtar cualquier documento estructurado, a su vez interfaces extendidas para representar un documento XML.
DOM HTML Level 1 provee interfaces adicionales de nivel alto que son usadas con las interfaces fundamentales definidas en DOM Core Level 1 para proveer una vista conveniente del documento HTML.
Ejemplos de interfaces: Document, Node, Attr, Element y Text. Todas las interfaces contienen atributos y/o métodos que pueden ser usados para interacturar con documentos HTML y XML.
Dom Level 2: especificación que contiene 6 diferentes especificaciones:
DOM2 Core: extiende la funcionalidad de DOM Core Level 1. Contiene interfaces especializadas dedicadas a XML. Introduce el método
getElementById
.DOM2 Views: permite a programas y scripts acceder dinámicamente y actualizar el contenido de la representación de un documento.
DOM2 Events: provee un sistema de eventos genericos a programas y scripts.
Métodos conocidos,
addEventListener
yhandleEvent
. Interfaces conocidasEvenTarget
,EventListener
,Event
,DocumentEvent
,MouseEvent
, etc. sin embargo no provee una interfaz para el teclado.DOM2 CSS ó DOM2 Style: permite a los programas y scripts el acceso dinámico y actualizar el contenido de las hojas de cascada (CSS).
DOM2 Traversal and Range: permite a los programas y scripts "atravesar" de forma dinámica e identicar un rango del contenido de un documento.
DOM2 HTML: permite a los programas y scripts el acceso dinámico y actualizacion del contenido y la estructura de documentos HTML. Extiende las interfaces definidas en DOM HTML Level 1 usando las facilidades de DOM2 Core.
DOM Level 3: especificación que contiene a otras 5 especificaciones:
DOM3 Load and Save: permite a los programas y scripts la carga dinámica de un documento XML a un documento DOM, y serializar un documento DOM a un documento XML.
DOM3 Validation: permite a los programas y scripts la actualización dinámica del contenido y la estructura de documentos mientras garantiza que el documento se mantiene/es válido.
DOM3 Events: extención de la especificación DOM2 Events. Se centra principalmente en eventos del teclado.
DOM3 Xpath: provee funcionalidades simples para el acceso a un árbol DOM usando XPath 1.0
Fuente: http://www.w3.org/standards/techs/dom#w3c_all
Lecturas
- DOM - Introducción.
- Tecnologías web (2010) por Otto Colomina Pardo. Lee Tema 3, parte 4: El API DOM.