Con el fin de poder manipular los documentos HTML cuando son cargados en el navegador se definió el Modelo de Objetos del Documento, una API la cual define la estructura y la forma en que podemos realizar acciones sobre los componentes de una página, es incluido como un estándar por la W3C con la intención de proporcionar un entorno de programación.
¿Que podemos hacer con el DOM – Document Object Model?
Haciendo uso del Document Objet Model los programadores de aplicaciones y sitios Web pueden realizar acciones sobre todos los componentes que estén cargados en una página HTML, acciones como agregar, modificar, eliminar, listar. Están disponibles para gestionar el contenido de las paginas (Esto aplica tanto para elementos como para contenido).
El DOM podemos imaginarlo como un árbol de Objetos:
Al momento de cargar la página se crea el DOM y su estructura jerárquica dependiendo del modelado de cada página basado en sus etiquetas, ejemplo:
Existen muchas herramientas que nos permiten apreciar el aspecto del DOM de nuestras páginas una de ellas es Live DOM Viewer que nos muestra en forma de árbol nuestras etiquetas y una visualización en tiempo real del código HTML ingresado:
Si nos damos cuenta podemos definir una página Web HTML como una jerarquía de nodos que parten de uno principal <html> que a su vez contiene dos nodos importantes <head> y <body> de los cuales se van desprendiendo más etiquetas garantizando jerarquía dentro del documento.
¿Como podemos hacer uso del DOM?
Luego de que la Web es cargada completamente en el navegador, JavaScript al ser un lenguaje de programación Client Side obtiene toda la potencia necesaria para generar HTML dinámico haciendo uso del DOM.
Veamos alguna cosas que JavaScript puede hacer con el DOM:
Puede cambiar todos los elementos HTML en la página.
Puede cambiar todos los atributos HTML en la página.
Puede cambiar todos los estilos CSS en la página.
Puede eliminar elementos y atributos HTML existentes.
Puede agregar nuevos elementos y atributos HTML.
Puede reaccionar a todos los eventos HTML existentes en la página.
Puede crear nuevos eventos HTML en la página.
¿Cuales son los nodos del DOM?
Podemos encontrar varios tipos de Nodos como lo son: DocumentType, Element, Attr, Text, Comment, CDataSection, Document, siendo este último el más importante debido a que es el nodo raíz de todos los documento HMTL y XML (Nodo Padre).
Cambiando valores del DOM:
Veamos un ejemplo sencillo en el cual cambiamos el valor de un elemento de una página Web haciendo uso del DOM:
<html>
<body>
<p id="parrafo"></p>
<script>
document.getElementById("parrafo").innerHTML = "Byspel.com!";
</script>
</body>
</html>
Existen varias formas de referencias elementos HTML no solo por ID:
document.getElementById(id) Busca un elemento mendiante un ID
document.getElementsByTagName(name) Busca elementos por una etiqueta
document.getElementsByClassName(name) Busca elementos basado en el nombre de una clase
Aunque el ejemplo enmarcado anteriormente es muy sencillo podemos ver claramente como podemos acceder y actualizar el valor de un nodo, para este caso un párrafo desde JavaScript partiendo del objeto document y referenciando el párrafo con getElementById, cabe decir que las capacidades y las funciones que podemos alcanzar son innumerables, esto es solo el comienzo.