DOM: objetos, métodos y propiedades: 2015

Lección 1 Introduccion

El DOM (Document Object Model), el Modelo de Objetos del Documento, proporciona una representación en forma de árbol de una página web. Además, ofrece un API (Application Programming Interface) que permite la manipulación de las páginas web desde JavaScript.

Cuando un navegador web muestra una página web, en paralelo construye el árbol que representa la página web. Este árbol puede ser consultado y modificado desde el lenguaje JavaScript a través del DOM.

Lección 2 DOM: introducción

Debes ver el vídeo DOM: introducción, en el que se explica que el DOM es una especificación del W3C y que es una representación en forma de árbol de un documento HTML o XML.

Lección 3 DOM: cómo recorrer un documento

Debes ver el vídeo DOM: cómo recorrer un documento, en el que se explica cómo se recorre y se accede al contenido de un documento HTML o XML mediante el DOM (childNodes, firstChild, lastChild, etc.).

Lección 4 DOM: cómo crear un documento

Debes ver el vídeo DOM: cómo crear un documento, en el que se explica cómo crear un documento HTML o XML desde cero y cómo añadirle contenido con los métodos createElement(), appendChild() e insertBefore().

Link relacionados:

https://developer.mozilla.org/es/docs/Web/API/DOMImplementation

http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/DOMImplementation.html

http://php.net/manual/es/book.dom.php

https://msdn.microsoft.com/en-us/library/ms760218(v=vs.85).aspx

Lección 5 Ejercicio

Debes realizar el ejercicio DOM: Jugando con el DOM.

Lección 6 Práctica

Debes realizar la Práctica 6: JavaScript: expresiones regulares y el Modelo de Objetos de Documento. El objetivo de esta práctica es:

Aprender a manejar el DOM de una página web para manipular su contenido.
Aprender a validar un formulario con el lenguaje de programación JavaScript y el empleo de expresiones regulares.

Lección 7 El BOM

El Browser Object Model (BOM), el Modelo de Objetos del Navegador, es el conjunto de objetos que exponen los navegadores para hacer uso de ciertas funcionalidades que exponen. El BOM no está estandarizado, cada navegador puede ofrecer sus propios objetos, con sus propiedades y métodos. Sin embargo, existe cierto consenso entre los fabricantes de navegadores web y los objetos más comunes presentan un comportamiento similar en todos los navegadores.

A través del BOM se puede acceder al historial de navegación, a la barra de estado del navegador, a las características del navegador o a la consola para escribir mensajes de depuración. Los métodos alert(), close(), confirm(), open(), print() o prompt() pertenecen al objetowindow, el objeto principal del BOM.

El objeto document, el objeto que permite acceder al DOM de una página web, es en realidad una propiedad del objeto window.

El W3C ha intentado estandarizar una parte del objeto window, pero no lo ha logrado hasta la fecha: Window Object 1.0 (W3C Working Draft 07 April 2006).

Para conocer las posibilidades del BOM y aprender a usarlo, consulta los siguientes recursos:

The Browser Object Model (Microsoft Developer Network)
Window (Mozilla Developer Network)

Lección 8 Introducción

DHTML (Dynamic HTML), el HTML Dinámico, no es una tecnología por sí misma, sino que es el término que se acuñó para referirse a una forma de desarrollar páginas web.

Con DHTML se pueden crear páginas web interactivas. Para ello, se tiene que utilizar el DOM para acceder al HTML y al CSS de una página web para modificar su contenido y su presentación.

Lección 9 DHTML (parte 1)

Debes ver el vídeo DHTML (parte 1), en el que se explica qué es DHTML (Dynamic HTML), se habla de la creación de páginas web interactivas y se muestra cómo acceder a través del DOM al CSS.