¿DOM?¿DOMINAR?¿DOMINIO MUNDIAL O QUÉ?

El Document Object Model (DOM) es una interfaz de programación para los documentos HTML y XML. Proporciona una representación estructurada del documento y define de manera que la estructura se puede acceder desde los programas para que puedan cambiar el documento estructura, estilo y contenido. El DOM proporciona una representación del documento como un grupo estructurado de nodos y objetos que tienen propiedades y métodos.

¿Qué cosas podemos hacer gracias a DOM?

Cuando se carga una página web, el navegador crea un modelo de objetos de documento de la página.

Con el modelo de objetos, JavaScript está totalmente habilitado para crear HTML dinámico:

• JavaScript puede añadir, cambiar y eliminar todos los elementos y atributos HTML de la página.
• JavaScript puede cambiar todos los estilos CSS en la página.
• JavaScript puede reaccionar a todos los eventos existentes en la página.
• JavaScript puede crear nuevos eventos en la página.

¿Cómo navego en el DOM?

• childNodes: (propiedad) es una matriz que contiene todos los hijos de un nodo (pero no los hijos de éstos).
• firstChild y lastChild : (propiedades) contienen, respectivamente, el primer y último hijo de un nodo (es decir, son atajos para facilitar el uso de la matriz anterior).
• parentNode: (propiedad) permite acceder al nodo padre, esto es, al nodo del que cuelga el actual.
• previousSibling y nextSibling: (propiedades) permiten acceder a los hermanos del nodo.
• parentNode: (propiedad) permite acceder al nodo padre, esto es, al nodo del que cuelga el actual.
• hasChildNodes(): (método) devuelve un valor lógico indicando si el nodo tiene o no nodos hijos.

NOTA: En caso de que no exista una determinada propiedad (por ejemplo, un nodo no tiene hermanos e intentamos acceder a su previousSibling), la propiedad tiene valor null.

¿Cómo accedo a los atributos de un nodo?

Además de poder acceder a cada uno de los nodos del DOM, podemos acceder a los atributos de cada nodo, así como modificarlos o añadírselos.

Para este cometido, JavaScript implementa dos métodos que posee todo nodo:

• getAttribute ( “nombredelatributo” ): para acceder al valor del atributo
• setAttribute ( “nombredelatributo”, “nuevovalor” ): para modificar el valor del atributo, o añadir nuevos atributos.