Qu es el DOM?

Cuando una pgina web es cargada, el navegador crea un Modelo de Objeto de Documento de la pgina. El Modelo de Objetos de Documento es contruido como unrbol de objetos.

El DOM es una API para XML, lo que sin siglas quiere decir que es una capa de programacin intermedia que representa un documento y que nos permite modificarlo. Pordecirlo de otra manera, es una serie de funciones y procedimientos que nos permiten trabajar sobre un modelo abstracto de un documento, que sirve como medio de comunicacin entre nuestro lenguaje de programacin.

*El DOM es una interfaz independiente de cualquier lenguaje de programacin.

Ejemplo:

Ttulo de la pgina Encabezado Un prrafo Un prrafo con un vnculo Un elemento de lista Otro elemento de lista Otro prrafo

-En el DOM todos los elementos HTML son definidos como objetos.-La interfaz de programacin son las propiedades y mtodos de los objetos.-Un propiedad es un valor que t puedes configurar u obtener.-Un mtodo es una accin que t puedes hacer, como agregar o eliminar el elemento.

Los nodos del rbol

Como se ve, el DOM es un modelo jerrquico. En la representacin que he ofrecido antes,todo aquello situado en el origen o el final de una rama del rbol es un nodo, y los nodos establecen entre s relaciones de parentesco. Por ejemplo, el elemento ul es hijo de body, padre de dos li, hermano de h1 y los tres p, descendiente de html y ascendente del texto de cualquiera de los li.

-As, todo documento puede representarse como un conjunto de nodos relacionados entre s .

En pocas palabras HTML DOM es un estndar para obtener , cambiar, agregar, o eliminar elementos HTML.

Tipos de nodo:

As, cuando el agente de usuario mapea un documento, lo que hace es asignar a cada nodo una constante que lo identifica. Dependiendo del tipo de nodo, ste aceptar una serie de propiedades y mtodos, y podr tener hijos o no.

Propiedades generales de los nodos:

Identificacin del tipo de nodo:

En el Document Object Model, el objeto document representa tu pgina web, es decir, el objeto documento , es el propietario de todos los elementos en tu pgina web, si t quieres accesar a un elemento en tu pgina web, t necesitas accesar primero al objeto document.

Formas de accesar y manipular HTML:

Encontrar elementos HTML:

- document.getElementById() #Encuentra elementos por su atributo ID

- document.getElementsByTagName() #Encuentra elementos por su nombre de etiqueta.

- document.getElementsByClassName() #Encuentra elementos por su nombre de clase

Mtodos nuevos.

[document.querySelector() - document.querySelectorAll]

Cambiar elementos HTML:

- element.innerHTML # Cambia el contenido de un elemento

- element.attribute # Cambia el atributo de un elemento

- element.setAttribute( atributo, valor) # Cambia el atributo de un elemento

- element.style.property # Cambia el estilo de un elementos

Agregando y eliminando elementos:

- document.createElement() # Crea un elemento HTML

- document.removeChild() # Remueve un elemento HTML

- document.appendChild() # Agrega un elemento HTML

- document.replaceChild() # Reemplaza un elemento HTML

- document.write( texto ) # Escribe dentro de un flujo de salida HTML

Agregar escuchadores de eventos:

Ejemplo: document.getElementById(ID).onclick = function(){ //cdigo }

document.getElementById(ID).addEventListener(Evento, Funcin, Captura de usuario);

Los nodos del rbol