El DOM (Document Object Model) nos permite a los programadores acceder y manipular páginas XHTML como si fueran documentos XML.

Una de las tareas habituales en la programación frontend con JS consiste en manipular las páginas webs. Creando etiquetas nuevas, cambiando información, validando formularios… de hecho ahora es cuando JS se va a volver divertido y cuanto más se aprende más ganas de innovar y probar cosas aparecen.

Pero para que esto se pueda lograr es necesario que los navegadores transformen las páginas webs en una estructura mucho más sencilla de manipular que una cadena de caracteres.

Esta transformación que realizan los navegadores de forma automática nos permite utilizar las herramientas del DOM de forma muy sencilla. En esta transformación se convierten todos los elementos del documento XHTML en otros elementos llamados nodos que están interconectados y que representan los contenidos de las páginas webs y la relación que hay entre ellos. A esta unión se le llama árbol de nodos,y cada web tiene el suyo propio.

Aunque una página completa pueda tener miles de nodos, la transformación se hace de forma automática y no hay perdida de tiempo en la carga.

Tipos de nodos

Según la especificación completa el DOM se compone de 12 tipos de nodos aunque las webs XHTML suele utilizar solamente cuatro o cinco tipos:

• Document: nodo raiz del que deriban todos los demas nodos del árbol
• Element: representa a la etiquetas XHTML, es el único nodo que puede tener atributos y del que pueden derivar otros nodos
• Attr: estos nodos representa cada uno de los atributos de las etiquetas XHTML
• Text: contiene el texto encerrado en una etiqueta XHTML
• Comment: representa los comentarios incluidos en la página XHTML

¿Qué puede hacer JavaScript con el DOM?

JavaScript puede hacer una lista de acciones con el DOM tal y como vemos a continuación:

• cambiar los elementos HTML
• cambiar los atributos HTML
• cambiar los estilos CSS de la página
• eliminar elementos y atributos HTML
• añadir nuevos elementos y atributos HTML
• reaccionar con todos los eventos de la página
• crear nuevos eventos en la página

De este modo en las próximas entradas aprenderemos:

• Cómo cambiar el contenido de elementos HTML
• Cómo cambiar el estilo CSS de los elementos
• Cómo hacer reaccionar ante elementos HTML del DOM
• Como añadir y eliminar elementos del HTML