El DOM permite acceder y modificar los elementos de una página web mediante JavaScript.
Con JavaScript podemos cambiar el contenido de una etiqueta HTML, modificar sus estilos, agregar o eliminar elementos y responder a las acciones realizadas por el usuario.
Qué es el DOM
DOM significa Document Object Model o modelo de objetos del documento.
Representa todos los elementos que forman una página web, como:
- Encabezados.
- Párrafos.
- Botones.
- Menús.
- Imágenes.
- Enlaces.
El navegador organiza estos elementos mediante una estructura de árbol.
El documento HTML funciona como la raíz principal. Desde ella aparecen elementos como head y body, que a su vez contienen otras etiquetas.
<html> <head> <title>Mi página</title> </head> <body> <h1>Título principal</h1> <a href="#">Enlace</a> </body> </html>Qué podemos hacer con JavaScript y el DOM
Al acceder al DOM desde JavaScript podemos:
- Cambiar el contenido de los elementos.
- Agregar o eliminar etiquetas.
- Modificar atributos.
- Cambiar estilos CSS.
- Responder a eventos.
- Crear nuevos elementos.
Esto permite que una página web se comporte de manera dinámica.
Documento HTML de ejemplo
Para practicar utilizaremos tres párrafos con la misma clase, pero con identificadores diferentes.
<p id="parrafo1" class="parrafos">Párrafo 1</p> <p id="parrafo2" class="parrafos">Párrafo 2</p> <p id="parrafo3" class="parrafos">Párrafo 3</p>Seleccionar un elemento por su ID
El método getElementById() permite seleccionar un elemento mediante el valor de su atributo id.
const elementoPorId = document.getElementById("parrafo1");En este caso, la variable contiene el elemento cuyo identificador es parrafo1.
Cambiar el contenido con innerHTML
La propiedad innerHTML permite leer o reemplazar el contenido HTML de un elemento.
elementoPorId.innerHTML = "HTML";Después de ejecutar esta línea, el contenido del primer párrafo será reemplazado por la palabra HTML.
Seleccionar elementos por su clase
El método getElementsByClassName() selecciona todos los elementos que tienen una clase determinada.
const elementosPorClase = document.getElementsByClassName("parrafos");Este método devuelve una HTMLCollection con los elementos encontrados.
Podemos comprobar cuántos elementos contiene mediante la propiedad length.
console.log(elementosPorClase.length);Como existen tres párrafos con la clase parrafos, el resultado será 3.
Acceder a un elemento de la colección
Las posiciones comienzan desde cero:
- Posición 0: primer elemento.
- Posición 1: segundo elemento.
- Posición 2: tercer elemento.
Para cambiar el segundo párrafo:
elementosPorClase[1].innerHTML = "CSS";Seleccionar elementos por su etiqueta
El método getElementsByTagName() selecciona los elementos que utilizan una etiqueta HTML determinada.
const elementosPorEtiqueta = document.getElementsByTagName("p");Este método también devuelve una HTMLCollection.
Para comprobar su longitud:
console.log(elementosPorEtiqueta.length);Para modificar el tercer párrafo:
elementosPorEtiqueta[2].innerHTML = "JavaScript";Después de ejecutar los tres ejemplos, los párrafos mostrarán HTML, CSS y JavaScript.
Ejemplo completo para cambiar el contenido
const elementoPorId = document.getElementById("parrafo1"); const elementosPorClase = document.getElementsByClassName("parrafos"); const elementosPorEtiqueta = document.getElementsByTagName("p"); elementoPorId.innerHTML = "HTML"; elementosPorClase[1].innerHTML = "CSS"; elementosPorEtiqueta[2].innerHTML = "JavaScript";Modificar estilos CSS desde JavaScript
La propiedad style permite cambiar directamente la apariencia de un elemento seleccionado.
Por ejemplo, podemos modificar el primer párrafo para que se parezca a un botón:
elementoPorId.style.background = "black"; elementoPorId.style.color = "white"; elementoPorId.style.borderRadius = "5px"; elementoPorId.style.width = "150px"; elementoPorId.style.textAlign = "center";Cómo escribir propiedades CSS en JavaScript
Las propiedades CSS que contienen guiones se escriben en JavaScript mediante el formato camelCase.
| Propiedad en CSS | Propiedad en JavaScript |
|---|---|
background-color | backgroundColor |
border-radius | borderRadius |
text-align | textAlign |
font-size | fontSize |
La primera palabra se escribe en minúscula y cada palabra siguiente comienza con mayúscula.
Ejemplo completo
Archivo HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Manipulación del DOM</title> </head> <body> <p id="parrafo1" class="parrafos">Párrafo 1</p> <p id="parrafo2" class="parrafos">Párrafo 2</p> <p id="parrafo3" class="parrafos">Párrafo 3</p> <script src="script.js"></script> </body> </html>Archivo JavaScript
const elementoPorId = document.getElementById("parrafo1"); const elementosPorClase = document.getElementsByClassName("parrafos"); const elementosPorEtiqueta = document.getElementsByTagName("p"); elementoPorId.innerHTML = "HTML"; elementosPorClase[1].innerHTML = "CSS"; elementosPorEtiqueta[2].innerHTML = "JavaScript"; elementoPorId.style.background = "black"; elementoPorId.style.color = "white"; elementoPorId.style.borderRadius = "5px"; elementoPorId.style.width = "150px"; elementoPorId.style.textAlign = "center";Conclusión
El DOM representa los elementos que componen una página web y permite manipularlos mediante JavaScript.
Podemos seleccionar elementos por su identificador, clase o etiqueta utilizando getElementById(), getElementsByClassName() y getElementsByTagName().
Después de seleccionar un elemento, podemos modificar su contenido con innerHTML y cambiar su apariencia mediante la propiedad style.
