Si estás empezando en el desarrollo web, seguro has escuchado hablar del DOM. Pero ¿qué es exactamen

¿Qué es el DOM?

DOM significa Document Object Model (Modelo de Objetos del Documento). No es parte de JavaScript ni de HTML, es una interfaz que permite a lenguajes como JavaScript acceder y modificar el contenido, estructura y estilo de una página web.

Imagina que tu página HTML es un árbol genealógico. El DOM es la representación de ese árbol, donde cada etiqueta es un nodo que se puede modificar.

Ejemplo práctico

Tenemos este HTML:
<div id="mensaje">Hola mundo</div>

Con JavaScript podemos cambiar el texto:
document.getElementById("mensaje").innerHTML = "¡Hola Reinier Teach!";

El texto cambiará sin necesidad de recargar la página.

Métodos más usados para manipular el DOM

- getElementById() - Selecciona un elemento por su ID
- querySelector() - Selecciona el primer elemento que coincida con un selector CSS
- addEventListener() - Agrega eventos como clics o tecleos
- createElement() - Crea nuevos elementos
- appendChild() - Agrega un elemento dentro de otro
- classList.add() / remove() / toggle() - Añade o quita clases CSS

Ejemplo interactivo: Botón que cambia el color

<button id="miBoton">Haz clic</button>
<div id="caja" style="width:200px;height:200px;background:blue;"></div>

<script>
document.getElementById("miBoton").addEventListener("click", function() {
document.getElementById("caja").style.backgroundColor = "red";
});
</script>

Conclusión

El DOM es el puente entre tu código JavaScript y tu página HTML. Aprender a manipularlo te permitirá crear sitios web dinámicos e interactivos sin depender de librerías externas.

¿Ya has manipulado el DOM? Cuéntame tu experiencia en los comentarios.