Para poder seguir este curso debes tener conocimentos de los lenguajes HTML y CSS para construir páginas Web. Si no es así puedes aprenderlo en Aprende Web
Logo Aprende Web

Aprende Web

curso de JAVASCRIPT

por Anyelguti


5. Acceso al DOM

El documento

Estructura de la página

Para poder realizar acciones con javascript, el programador debe poderlas insertar en la página, o debe por tanto acceso a ciertos datos de la página para utilizarlos en el programa. De ahí la necesidad de saber cómo se estructura la página, y de qué manera se puede acceder a los datos de la misma. Antes de seguir con el tema, conviene aclarar algunos conceptos:

Objetos, Métodos y propiedades.

Si has leido algún manual de javascript verás que salen bastante estos conceptos, vamos a intentar aclarar a qué se refiere cada uno de ellos. Todos ellos se refieren a elementos del código javascript, más complejos que las variables.

El DOM o Document Object Model

Como dice su nombre (en inglés) Es el Modelo de Objeto de Documento, es decir, es un modelo de estructura que deben seguir todas las páginas Web. La página es construida de manera secuencial, es decir escribiendo una instrucción detras de otra, y de hecho el navegador también la lee en ese mismo orden, pero hay que tener en cuenta que no todas las partes de la página tienen la misma importancia, ya que ésta está construida con etiquetas, y unas etiquetas dependen de otras. El DOM es la estructura de la página, es decir, desde un objeto inicial, llamado document parten dos elementos hijos, las etiquetas head y body, y de éstas parten todos los demás elementos. A este respecto, el objeto document vendría representado por la etiqueta html de comienzo y final de la página.

Esto, que parece obvio, tiene su importancia para acceder a la página con javascript, ya que para acceder a un elemento hay que tener en cuenta su ubicación en la página.

En realidad el objeto inicial del que parte la página no es el objeto document sino el objeto window que es el navegador. De él derivan varios objetos hijos, uno de ellos el documento -document- que es el que nos ocupa aquí.

Nodos

Cada elemento del DOM se denomina nodo En realidad un nodo no es una etiqueta, sino que cada etiqueta tiene dos nodos, el primero el de la etiqueta en sí, (nombre de la etiqueta), y como nodo hijo de éste, está el texto o contenido de la etiqueta.

En el siguiente esquema vemos la estructura del DOM de una página sencilla

Estructura del dom

Aquí cada recuadro es un nodo, y las flechas indican la relación entre ellos, el nodo superior es el nodo padre y el nodo inferior, del que depende es el nodo hijo.

Hay dos tipos de nodos, los nodos elementos (los que llevan etiquetas) y los nodos texto (los que llevan el texto o contenido de la página). Esto es importante, ya que javascript diferencia entre estos dos tipos de nodos.

La transformación de la página en una estructura de este tipo se realiza de forma automática, de forma que lo único que nos interesa aquí es saber que esto es así, para poder luego aplicarlo al acceso a los elementos mediante javascript.

Tipos de nodos

Aunque existen 12 tipos de nodos en realidad para manipular las páginas web sólo necesitamos los 5 siguientes:


En la página siguiente veremos los métodos para acceder a los elementos de la página y poder manipularlos.

Métodos del DOM

Ir a la página

anteriorAnterior     Siguiente siguiente

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com manda un correo