Certificado de JavaScript DOM

8h 0m

Curso completo de JavaScript para dominar el DOM y crear aplicaciones web frontend interactivas y dinámicas.

El Document Object Model (DOM) es una interfaz de programación fundamental para documentos HTML y XML que representa la estructura de un documento como un árbol de objetos. Esta representación permite a JavaScript acceder y manipular dinámicamente el contenido, estructura y estilo de una página web.

Fundamentos del DOM

El DOM convierte cada elemento HTML en un nodo dentro de una estructura jerárquica que refleja fielmente la organización del documento. Esta estructura arbórea comienza con el objeto document, que representa la página completa y actúa como punto de entrada para acceder a todos los elementos.

La comprensión del DOM es esencial para cualquier desarrollador web moderno, ya que constituye el puente entre el HTML estático y las aplicaciones web dinámicas e interactivas que los usuarios esperan hoy en día.

// El objeto document es el punto de entrada al DOM
console.log(document.doctype);
console.log(document.documentElement); // Elemento <html>
console.log(document.head); // Elemento <head>
console.log(document.body); // Elemento <body>

Selección de elementos

JavaScript ofrece múltiples métodos para localizar y seleccionar elementos específicos dentro del DOM. Estos selectores permiten identificar elementos por su ID, clase, nombre de etiqueta o mediante selectores CSS más complejos.

getElementById: Encuentra un elemento por su atributo ID único

const header = document.getElementById('main-header');

getElementsByClassName: Selecciona elementos por su clase

const items = document.getElementsByClassName('item');

querySelector: Utiliza selectores CSS para encontrar el primer elemento que coincida

const firstButton = document.querySelector('button.primary');

querySelectorAll: Devuelve todos los elementos que coinciden con el selector

const allLinks = document.querySelectorAll('a[href^="https"]');

La capacidad de seleccionar elementos con precisión es la base para cualquier manipulación posterior del DOM.

Manipulación del contenido

Una vez seleccionados los elementos, JavaScript permite modificar su contenido de diversas formas:

textContent: Modifica o accede al contenido de texto plano

const title = document.querySelector('h1');
title.textContent = 'Nuevo título de la página';

innerHTML: Permite insertar o modificar contenido HTML

const container = document.querySelector('.container');
container.innerHTML = '<p>Este párrafo <strong>reemplaza</strong> todo el contenido anterior</p>';

Creación de elementos: Para un enfoque más estructurado

const newDiv = document.createElement('div');
newDiv.textContent = 'Elemento creado dinámicamente';
document.body.appendChild(newDiv);

Esta capacidad de manipulación permite actualizar la interfaz de usuario en respuesta a acciones del usuario o cambios en los datos sin necesidad de recargar la página.

Modificación de atributos y estilos

El DOM facilita la alteración dinámica de atributos HTML y propiedades CSS:

Atributos estándar:

const link = document.querySelector('a');
link.href = 'https://ejemplo.com';
link.setAttribute('target', '_blank');

Clases CSS:

const element = document.querySelector('.item');
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('selected');

Estilos inline:

const box = document.querySelector('.box');
box.style.backgroundColor = '#3498db';
box.style.padding = '20px';
box.style.borderRadius = '5px';

Esta capacidad permite crear interfaces adaptativas que responden visualmente a las interacciones del usuario.

Sistema de eventos

El sistema de eventos del DOM permite que las aplicaciones web respondan a las interacciones del usuario y otros cambios en el entorno:

Asignación de eventos básica:

const button = document.querySelector('button');
button.onclick = function() {
    alert('Botón pulsado');
};

Event Listeners modernos:

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
    event.preventDefault();
    console.log('Formulario enviado');
});

Propagación de eventos:

document.querySelector('.container').addEventListener('click', function(event) {
    if (event.target.matches('.btn-delete')) {
        console.log('Botón de eliminar pulsado');
    }
}, false);

Los eventos son el corazón de la interactividad web, permitiendo crear aplicaciones que responden de manera fluida a las acciones del usuario.

Almacenamiento en el navegador

El DOM se complementa con APIs de almacenamiento que permiten persistir datos en el navegador:

localStorage: Almacenamiento persistente sin fecha de expiración

// Guardar datos
localStorage.setItem('username', 'usuario123');

// Recuperar datos
const username = localStorage.getItem('username');

// Eliminar datos
localStorage.removeItem('username');

sessionStorage: Almacenamiento que dura solo durante la sesión actual

sessionStorage.setItem('temporalData', JSON.stringify({id: 1, status: 'active'}));

Estas APIs permiten crear aplicaciones web con estado persistente incluso cuando el usuario navega entre páginas o cierra y reabre el navegador.

Browser Object Model (BOM)

El BOM proporciona objetos adicionales proporcionados por el navegador para interactuar con la ventana del navegador:

window: El objeto global del navegador

// Abrir nueva ventana
const newWindow = window.open('https://ejemplo.com', '_blank');

// Redireccionar
window.location.href = 'https://nuevapagina.com';

navigator: Información sobre el navegador y el sistema

console.log(navigator.userAgent);
console.log(navigator.language);

history: Historial de navegación

// Navegar hacia atrás
history.back();

// Navegar hacia adelante
history.forward();

screen: Información sobre la pantalla del usuario

console.log(`Resolución: ${screen.width}x${screen.height}`);

El BOM extiende las capacidades del DOM permitiendo a las aplicaciones web interactuar con el navegador mismo, no solo con el contenido del documento.

Aplicaciones prácticas

El DOM y sus tecnologías asociadas permiten crear una amplia gama de funcionalidades interactivas:

Validación de formularios en tiempo real
Interfaces de usuario dinámicas que se actualizan sin recargar la página
Animaciones y transiciones controladas por JavaScript
Aplicaciones de una sola página (SPA)
Gestores de tareas y aplicaciones de productividad
Juegos basados en navegador
Administradores de contenido del lado del cliente

Dominar el DOM es fundamental para crear experiencias web modernas que sean rápidas, interactivas y atractivas para los usuarios.

Buenas prácticas

Para trabajar eficientemente con el DOM, es importante seguir ciertas prácticas recomendadas:

Minimizar las manipulaciones directas del DOM para mejorar el rendimiento
Utilizar la delegación de eventos para manejar múltiples elementos similares
Agrupar las modificaciones del DOM para reducir el reflow y repaint
Preferir classList sobre manipulación directa de la propiedad className
Utilizar fragmentos de documento para insertar múltiples elementos
Cachear referencias a elementos DOM que se utilizan repetidamente
Separar la lógica de la aplicación de la manipulación del DOM

// Mal enfoque: múltiples manipulaciones individuales
for (let i = 0; i < 100; i++) {
    document.body.innerHTML += `<div>Elemento ${i}</div>`;
}

// Buen enfoque: manipulación agrupada
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = `Elemento ${i}`;
    fragment.appendChild(div);
}
document.body.appendChild(fragment);

Estas prácticas ayudan a crear aplicaciones web más eficientes y mantenibles.

Compatibilidad entre navegadores

Aunque los navegadores modernos han estandarizado en gran medida la implementación del DOM, todavía existen algunas diferencias sutiles que los desarrolladores deben tener en cuenta:

Verificar la compatibilidad de características nuevas en sitios como MDN o caniuse.com
Utilizar polyfills para características no soportadas en navegadores antiguos
Probar el código en múltiples navegadores
Considerar el uso de bibliotecas o frameworks que abstraen las diferencias entre navegadores

El conocimiento de estas consideraciones de compatibilidad es crucial para desarrollar aplicaciones web robustas que funcionen consistentemente en diferentes entornos.

Empezar curso GRATIS

Tutoriales de programación en este certificado

Completa estas lecciones de programación para obtener tu certificado de superación

Ejercicios de programación de JavaScript DOM

Completa estos ejercicios de programación para obtener tu certificado de superación

Otros cursos de programación con certificado

Supera todos los retos de JavaScript DOM y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.

Git Básico

5h 0m

Git Avanzado

8h 0m

HTML Básico

3h 0m

HTML Intermedio

5h 0m

HTML Avanzado

8h 0m

CSS Básico

5h 0m

CSS Intermedio

7h 0m

CSS Avanzado

8h 0m

JavaScript Sintaxis

5h 0m

JavaScript OOP Intermedio

7h 0m

JavaScript Asíncrono y Funcional

6h 0m

TypeScript Sintaxis Básica

5h 0m

TypeScript OOP

8h 0m

TypeScript Avanzado

8h 0m

Python Sintaxis Básica

5h 0m

Python Estructuras de datos

3h 0m

Python OOP

8h 0m

Python Funcional

7h 0m

Python Biblioteca Estándar

10h 0m

Tecnologías que aprenderás

Al finalizar este curso obtendrás

Certificado de superación en JavaScript DOM

Tras completar todas las lecciones y ejercicios del curso JavaScript DOM se te genera un enlace con tu certificado para que lo puedas descargar o compartir directamente en cualquier plataforma, siempre accesible.

Accede a todas certificaciones