Javascript para novatos 20º: El DOM (Document Object Model)

Javascript para novatos 20º: El DOM (Document Object Model)

publicado en: Diseño web | 0

Y por fin vamos a ver como acceder al documento HTML desde Javascript.

Introducción

El DOM (Modelo de Objetos del Documento, en inglés) es un estándar del W3C (World Wide Web Consortium) que nos permite el acceso y la modificación de los diferentes elementos de nuestro documento HTML.

DOM:

«El DOM es una (…) interface que permite a programas y scripts acceder dinámicamente y actualizar el contenido, estructura y estilo de un documento.» definición del W3C

Cuando creamos un documento HTML, este se compone de diferentes etiquetas que el navegador debe interpretar para poder mostrar los elementos visuales que queremos que el usuario vea en pantalla.

Al mismo tiempo que el navegador realiza la tarea de interpretar las etiquetas, confecciona una estructura (el DOM) en la que organiza jerárquicamente todos los elementos que conforman nuestra página web (<html>, <body>, <a>, . . .).

Esta estructura que se presenta como un diagrama de árbol está compuesta por nodos que pueden ser padres, hijos o hermanos de otros nodos. También existen diferentes tipos de nodo según su contenido.

En la representación del DOM que tenemos a continuación cada rectángulo es un nodo. Aunque existen 12 tipos de nodo, en el ejemplo hemos utilizado algunos de los más comunes.

Document: Es la raíz del árbol, el nodo de donde salen todos los demás.

Element: Los nodos que contienen las etiquetas HTML y de donde pueden salir otros nodos.

Attr: Representa a los atributos de las etiquetas con sus pares «atributo=valor».

Text: Representa el texto encerrado por una etiqueta.

Ejemplo del DOM de una página
20.1 Ejemplo DOM

Como hemos visto anteriormente, el navegador construye el DOM automáticamente y sin que nosotros nos enteremos cuando el documento HTML se carga y la página web se muestra en pantalla. A partir de ese momento nosotros desde el código Javascript vamos a poder acceder a los diferentes nodos, lo que significa que vamos a acceder al documento HTML.

Concretamente, a través del DOM podremos:

– Cambiar todos los elementos HTML de la página.

– Cambiar todos los atributos HTML.

– Cambiar todos los estilos CSS.

– Añadir o eliminar elementos y atributos existentes.

– Responder a los eventos ocurridos en la página.

– Crear nuevos eventos.

El objeto document

Ahora que ya sabemos que «document» está en lo más alto de la jerarquía del DOM, vamos a conocerlo con más detalle.

Según vayamos avanzando iremos viendo que en Javascript casi todo es un objeto, y «document» es el objeto que contiene el resto de objetos que conforman la página web. Con lo cual para acceder y modificar cualquier parte de nuestra página, siempre deberemos hacerlo a través del objeto document.

Recordemos que en el DOM cada cosa es un nodo:

– El mismo documento es un nodo de tipo document.

– Todos los elementos HTML son nodos de elemento.

– Todos los atributos son nodos de atributo.

– Los textos dentro de los elementos HTML son nodos de texto.

– Los comentarios son nodos de comentarios.

Como el resto de objetos, document posee diferentes propiedades y métodos, «y para muestra un botón»:

«title»: Esta es una de sus propiedades y como podrás imaginar corresponde al título de la página que contiene la etiqueta <title>.

«write»: Este método lo conocemos muy bien gracias a los ejemplos del tutorial, y es uno de los muchos métodos que nos proporciona document. Con él podemos escribir en el documento HTML.

A continuación, expongo unas tablas con los métodos, propiedades y técnicas que veremos en los próximos capítulos (21-26). Espero que sirva de ayuda para que tengamos una idea general de lo que podemos hacer a través del DOM para modificar una página web.

Gráfico de métodos y propiedades DOM
20.2 Métodos y propiedades DOM

Hasta aquí la presentación del DOM y del objeto “document”, en el próximo capítulo veremos cómo acceder a los diferentes nodos del DOM.

 


Ir a Javascript para novatos 21ª parte

Share on LinkedInShare on FacebookShare on Google+Tweet about this on Twitter

Dejar una opinión