Importancia del DOM (Document Object Model)
Introducción a DHTML
Importancia del DOM (Document Object Model)
Accediendo a una marca HTML a través del DOM (getElementById)
Accediendo a los nodos hijos de un elemento HTML(childNodes)
Accediendo a un nodo de texto de un elemento HTML (childNodes - nodeValue)
Accediendo a un nodo padre (parentNode)
Accediendo a un nodo hermano (nextSibling y previousSibling)
Otras formas de acceder a los nodos hijos (firstChild - lastChild)
Accediendo a un conjunto de marcas HTML similares (getElementsByTagName)
Agregar un nodo de texto (appendChild - createTextNode)
Eliminar un nodo de texto (removeChild) y Verificar si tiene nodos hijo (hasChildNodes)
Crear un nodo de tipo elemento createElement()
Agregar un nodo de tipo elemento (appendChild)
Agregar un nodo de tipo elemento en medio (insertBefore - createElement)
Eliminar un nodo de tipo elemento (removeChild)
Crear un atributo y agregárselo a un nodo de tipo elemento (setAttribute)
Borrar un atributo de un elemento (removeAttribute)
Recuperar un atributo de un elemento (getAttribute)
Verificar si un elemento tiene un atributo (hasAttribute)
Mover un nodo de tipo elemento.
Clonación de un nodo (cloneNode)
Consultar el tipo de nodo (nodeType)
Accediendo al estilo de una marca HTML.
Creación de controles de tipo input dinámicamente.
Evento onclick.
Referencia del objeto que generó el evento (this)
Información generada en un evento
Eventos onmousedown,onmouseup.
Evento ondblclick
Eventos onmouseover, onmouseout
Evento onmousemove
Evento onload y onunload
Modelo de eventos del DOM según la especificación de W3C
Evento load y unload (DOM)
Evento click (DOM)
Referencia del objeto que generó el evento (DOM)
Eventos mousedown ,mouseup (DOM)
Evento mousemove (DOM)
Evento focus (DOM)
Evento blur (DOM)
Evento submit (DOM)
Eventos keypress, keydown y keyup (DOM)
Evento change (DOM)
Evento scroll (DOM)
Información contenida en el objeto event (DOM)
Burbujeo y captura de eventos (DOM)
Detener el burbujeo de eventos (DOM)
Desactivación del evento por defecto de un elemento HTML (DOM)
Propiedad innerHTML
Accediendo a un elemento HTML a través de un selector CSS (querySelector)
Accediendo a un conjunto de elementos HTML a través de un selector CSS (querySelectorAll)
Mostrar y ocultar mensaje
Mensajes de error en la carga de un formulario
Mostrar un Tooltip
Apertura de enlace en la misma página o en otra pestaña
Arrastrar y soltar (drag and drop)
Menu desplegable accesible
Sesion 1e

Importancia del DOM (Document Object Model)

El modelo de objetos de documento ( DOM ) es una interfaz multiplataforma e independiente del lenguaje que trata un documento XML o HTML como una estructura de árbol en la que cada nodo es un objeto que representa una parte del documento. El DOM representa un documento con un árbol lógico. Cada rama del árbol termina en un nodo y cada nodo contiene objetos. Los métodos DOM permiten el acceso programático al árbol; con ellos se puede cambiar la estructura, estilo o contenido de un documento. Los nodos pueden tener controladores de eventos adjuntos. Una vez que se activa un evento, se ejecutan los controladores de eventos.

Para poder aplicar los conceptos de DHTML debemos conocer a la perfección el DOM (Document Object Model - Modelo Objeto Documento)
El DOM es otra forma para representar una página web. Para entender que es el DOM veamos tres tipos de personas frente a una página web:

1 - Un usuario de internet que conoce muy poco sobre el mundo de la computación, ve una página web como una ventana que contiene texto con distintos tamaños y colores, imágenes, enlaces etc. esto es lo que ve un usuario común de internet.

2 - Ahora veamos como ve una página web una persona que se ha iniciado hace muy poco en el mundo del diseño de páginas web, este usuario ve un poco más allá de lo que ve un usuario común, puede identificar que texto dispuso en la marca title del documento, diferencia las distintas marcas HTML para la estructura de la página, si ha definiedo estilos, si incorporó algun aplique Flash etc. Este segundo tipo de personas puede imaginar el contendino HTML y CSS de la página.

3 - Ahora por último, para un programador de sitios web tiene una visión mucho más profunda, puede decir si la página según su interactividad tiene apliques de programación.


Este último tipo de persona puede identificar más allá del código HTML y CSS de la página, intuye perfectamente si hay programación por detrás del esqueleto HTML y la definición de las hojas de estilo.

Este tercer tipo de persona debe conocer perfectamente el DOM.
¿Entonces que es el DOM?
El DOM es otra forma de ver el contenido de la página. Con el DOM, todos los elementos HTML se insertan en un árbol cuyos nodos son las marcas HTML y las hojas, los valores propiamente dichos de las marcas. Por medio de JavaScript podemos acceder y modificar este árbol de marcas y hacer que la página varíe luego que ya se haya mostrado en el navegador. De aquí el nombre de esta tecnología DHTML es decir Dynamic Hyper Text Markup Language.

Mediante el DOM podemos acceder al contenido y estilo de cada marca del documento y modificarlo de acuerdo a algún evento.
Mediante el DOM podemos insertar, borrar, modificar marcas HTML. Podemos acceder a la hoja de estilo definida a la página y dinámicamente agregar, modificar o borrar propiedades. Todos esto sin tener que recargar la página del servidor, es decir todo se hace en el cliente (navegador) mediante JavaScript.