El DOM (Document Object Model) o Modelo de Objetos del Documento es una interfaz que permite a JavaScript acceder y manipular el contenido, la estructura y el estilo de una página web.
Cuando un navegador carga una página HTML, crea automáticamente una representación de la misma en forma de árbol de objetos. Cada elemento HTML se convierte en un objeto que JavaScript puede consultar, modificar o eliminar.
Gracias al DOM, los desarrolladores pueden:
- Modificar el contenido de una página web.
- Cambiar estilos CSS dinámicamente.
- Crear y eliminar elementos HTML.
- Responder a las acciones del usuario.
- Construir aplicaciones web interactivas.
Acceder a elementos con getElementById
La función getElementById() permite seleccionar un elemento HTML utilizando su identificador único (id).
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo DOM</title>
</head>
<body>
<h1 id="titulo">Bienvenido</h1>
<p>Este es el mensaje de bienvenida.</p>
<script>
var texto = document.getElementById("titulo").innerHTML;
alert("El primer título es: " + texto);
</script>
</body>
</html>
¿Cómo funciona esto?
document.getElementById("titulo")localiza el elemento cuyo identificador es "titulo".innerHTMLobtiene el contenido interno del elemento.- El texto recuperado se muestra mediante una ventana emergente (
alert).
Obtener elementos con getElementsByTagName()
La función getElementsByTagName() permite obtener todos los elementos que comparten la misma etiqueta HTML.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo DOM</title>
</head>
<body>
<h1>Bienvenido</h1>
<p>Este es el primer párrafo.</p>
<h2>Tecnología</h2>
<p id="segundo">Este es el segundo párrafo.</p>
<script>
var parrafos = document.getElementsByTagName("p");
alert("Contenido del segundo párrafo: " +
parrafos[1].innerHTML);
document.getElementById("segundo").innerHTML =
"El mensaje original ha sido modificado.";
</script>
</body>
</html>
Explicación
La función devuelve una colección de elementos.
Por ejemplo:
parrafos[0]
hace referencia al primer párrafo.
Mientras que:
parrafos[1]
corresponde al segundo párrafo.
Posteriormente, el contenido del segundo párrafo se modifica mediante la propiedad innerHTML.
Gestión de eventos en JavaScript
Los eventos permiten ejecutar acciones cuando el usuario interactúa con la página.
Algunos eventos comunes son:
- Hacer clic en un botón.
- Mover el ratón.
- Escribir en un campo de texto.
- Enviar un formulario.
- Pulsar una tecla.
Ejemplo utilizando addEventListener()
<!DOCTYPE html>
<html>
<head>
<title>Eventos DOM</title>
</head>
<body>
<input type="button"
id="btnClick"
value="Haz clic aquí">
<script>
document.getElementById("btnClick")
.addEventListener("click", mostrarMensaje);
function mostrarMensaje() {
alert("¡Has hecho clic en el botón!");
}
</script>
</body>
</html>
¿Qué ocurre en este ejemplo?
- Se selecciona el botón mediante su identificador.
- Se añade un detector de eventos con
addEventListener(). - Cuando el usuario hace clic, se ejecuta la función
mostrarMensaje(). - Aparece una ventana emergente con el mensaje indicado.
Crear elementos dinámicamente
JavaScript permite generar nuevos elementos HTML sin necesidad de recargar la página.
Ejemplo
var nuevoParrafo = document.createElement("p");
nuevoParrafo.innerHTML =
"Este párrafo ha sido creado dinámicamente.";
document.body.appendChild(nuevoParrafo);
Resultado
Se crea un nuevo párrafo y se añade automáticamente al final de la página.
Eliminar elementos del DOM
También es posible eliminar elementos existentes.
Ejemplo
var elemento =
document.getElementById("segundo");
elemento.parentNode.removeChild(elemento);
Resultado
El párrafo con identificador segundo desaparece de la página.
Métodos DOM más utilizados
| Método | Descripción |
|---|---|
getElementById() | Selecciona un elemento por su ID |
getElementsByTagName() | Obtiene elementos por etiqueta |
querySelector() | Selecciona el primer elemento que coincida con un selector CSS |
querySelectorAll() | Obtiene todos los elementos que coincidan con un selector CSS |
createElement() | Crea un nuevo elemento |
appendChild() | Añade un elemento al DOM |
removeChild() | Elimina un elemento |
addEventListener() | Asocia eventos a elementos |
Conclusión
El DOM es uno de los pilares fundamentales de JavaScript y del desarrollo web moderno. Gracias a él, podemos crear páginas dinámicas capaces de reaccionar a las acciones de los usuarios en tiempo real.
Dominar conceptos como:
getElementById()getElementsByTagName()innerHTMLcreateElement()removeChild()addEventListener()
te permitirá desarrollar interfaces más interactivas, modernas y profesionales.
Si estás aprendiendo JavaScript, comprender el DOM es un paso imprescindible para convertirte en desarrollador web y crear aplicaciones dinámicas que ofrezcan una excelente experiencia de usuario.