Entendiendo el DOM y su Manipulación con JavaScript
Clase 2 de 27 • Curso de JavaScript: Manipulación del DOM
Contenido del curso
Seleccionando y Accesando a Elementos del DOM
Manipulando Elementos del DOM
- 6
Atributos y Propiedades en HTML y su Manipulación con JavaScript
07:39 min - 7
Modificar texto en HTML con JavaScript
04:50 min - 8
Modificar Estilos CSS con JavaScript: Propiedad Style y ClassName
11:30 min - 9
Uso de classList para Manipular Clases en Elementos HTML
07:38 min - 10
Manipulación del DOM con innerHTML e InsertAdjacentHTML
09:47 min - 11
Agregar elementos HTML sin reemplazar contenido existente
05:18 min - 12
Creación y Manipulación de Elementos DOM con createElement
13:28 min - 13
Eliminar Elementos del DOM con JavaScript: Métodos y Ejemplos
05:43 min - 14
Clonación y Reemplazo de Elementos en JavaScript
12:47 min
Manipulando Eventos en el DOM
- 15
Eventos y Flujo en Programación Web: Capturing y Bubbling
05:03 min - 16
Manejo de Eventos en JavaScript: click, mouseOver y mouseOut
11:46 min - 17
Manipulación de Eventos en JavaScript para Interacción de Elementos
07:35 min - 18
Validación de Formularios con JavaScript: Prevenir Comportamiento por Defecto
10:06 min - 19
Delegation Pattern en JavaScript: Mejora de Eventos Click en Listas
09:30 min
Creando un Administrador de Tareas
- 20
Creación de un Task Manager con Persistencia usando Local Storage
09:01 min - 21
Interactividad en Botones de Tareas: Borrar y Editar en JavaScript
13:37 min - 22
Persistencia de Datos con Local Storage en Tareas Web
15:17 min - 23
Guardado y edición de tareas en local storage con JavaScript
10:59 min - 24
Manejo de Errores en Local Storage para Tareas Dinámicas
03:24 min - 25
Cambio de Tema Dinámico y Persistente en Aplicaciones Web
07:18 min - 26
Creación de Páginas Web Dinámicas con JavaScript
01:28 min
Asincronía en JavaScript
Resumen
¿Qué es el DOM y cómo funciona?
Entender el DOM es fundamental para cualquier desarrollador que desee manipular contenidos y estructura de una página web. A menudo, cuando escribimos una URL como "plachi.com" en el navegador, este se comunica con un servidor para obtener archivos necesarios. Estos archivos, tras ser interpretados, permiten la generación del DOM, una representación jerárquica en forma de árbol del documento HTML, compuesta por nodos. Estos nodos se convierten en objetos de JavaScript que pueden ser seleccionados y manipulados a través de este lenguaje, creando una interacción dinámica y personalizada entre el usuario y el contenido web.
¿Qué papel juega el Window Object?
El Window Object es el objeto que representa a la ventana del navegador, es decir, toda la pantalla del navegador en la que se despliega el contenido del DOM. Al estar sobre el navegador, el Window Object ofrece acceso a varias web APIs además del DOM. Por ejemplo:
- Para mostrar un cuadro de alerta (
alert), usamos el Window Object. - Si necesitamos solicitar acceso al micrófono o la cámara del usuario, se realiza a través de las APIs del Window Object.
El DOM es solo una parte de este ecosistema, y se utiliza principalmente para seleccionar y manipular elementos dentro de un documento HTML, haciendo que la página web sea más interactiva y dinámica.
¿Cómo se diferencian el DOM y el Window Object?
Aunque el DOM y el Window Object son ambos esenciales para el desarrollo web, se utilizan para funciones diferentes:
- DOM (Document Object Model): Permite manipular el contenido y la estructura de un documento HTML para personalizar la interacción y la experiencia del usuario.
- Window Object: Proporciona una interfaz para acceder a otras APIs que no están directamente relacionadas con el contenido HTML, como alertas o permisos para funcionalidades de hardware como cámaras o micrófonos.
Ambos son vitales para una experiencia web completa y avanzada, permitiendo a los desarrolladores crear aplicaciones y sitios web que no solo sean visualmente atractivos, sino también funcionales y eficientes.