Curso de JavaScript: Manipulación del DOM
Curso de JavaScript: Manipulación del DOM

Entendiendo el DOM

1

¿Para qué aprender JavaScript?

2

¿Qué es DOM y Window Object?

3

Explorando Nodos del DOM

Seleccionando y Accesando a Elementos del DOM

4

Consultando el DOM con getElementById y querySelector

5

Navegación efectiva entre nodos

Manipulando Elementos del DOM

6

Modificando atributos y propiedades

7

Modificando texto en HTML

8

Modificando estilos en HTML

9

Modificando la visibilidad de elementos HTML

10

Creación de elementos con HTML Strings e insertAdjacentElement()

11

Agregando elementos con innerHTML e insertAdjacentHTML()

12

Creación de elementos con createElement()

13

Remover elementos con remove() y removeChild()

14

Clonación y reemplazo de elementos con cloneNode y replaceChild

Manipulando Eventos en el DOM

15

Entendiendo eventos y tipos: Burbuja, Captura y Propagación

16

Agregar y eliminar escuchadores de eventos o Event Listeners

17

El objeto evento o eventObject

18

Manejo de entradas de formulario y validación

19

Delegación de eventos y prevención de comportamiento predeterminado

Creando un Administrador de Tareas

20

Añadir tareas desde un formulario

21

Eliminar y editar tareas del DOM

22

Almacenamiento y carga de datos en localStorage

23

Eliminar y editar tareas del almacenamiento local

24

Inspeccionando y solucionando errores en el código

25

Personalizando la interfaz del administrador de tareas

26

Aún hay más por aprender

Asincronía en JavaScript

27

¿Cómo funciona el JavaScript Engine?

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
10 Hrs
9 Min
14 Seg
Curso de JavaScript: Manipulación del DOM

Curso de JavaScript: Manipulación del DOM

Carlos Gonzales

Carlos Gonzales

Aún hay más por aprender

26/27
Resources

How to transform static pages into dynamic ones with JavaScript?

In the world of web development, making pages dynamic can make a big difference in the user experience. JavaScript not only allows you to create and manipulate HTML and CSS to modify styles or delete snippets, but also offers the ability to generate new dynamic content on the fly, reflecting real-time interactions.

What browser tools can improve our pages?

One of the biggest advantages of making the web dynamic is taking advantage of the APIs provided by browsers. These interfaces not only optimize dynamic pages, but also make them more robust and functional.

  • Location: we can request the user's location through the Geolocation API, offering contextualized and relevant content based on geographic location.

  • Advanced CSS animations: Animation APIs allow fine-grained control over the timing, direction, and speed of CSS animations, taking visual interactions to another level.

  • Other interactions: Leveraging APIs to generate modern interactions such as notifications, caching, and more makes applications more aligned with modern user expectations.

What are components and how to use them in JavaScript?

JavaScript components are encapsulated code snippets - including HTML, CSS and JavaScript - designed to be reusable. This technique not only improves development efficiency, but also keeps code cleaner and more organized.

  • Advantages of using components:
    • Reusability: Allows the same component to be used in different parts of a project, or even in different projects, saving time and effort.
    • Maintenance: Facilitates the update of a component from a single source of truth, automatically distributing changes to all instances where it is used.

Best practices for improving the dynamics of your pages

  1. Interactive Design Planning: Before implementing dynamic techniques, plan the flow of interaction with the user, establishing which elements should change and under what conditions.

  2. Strategic Use of APIs: Learn how to identify which API could benefit your project the most and how to integrate it efficiently into the workflow.

  3. Testing and Continuous Optimization: When incorporating new functionalities, ensure their correct functioning and impact on the user experience through continuous testing. Adjust and optimize based on the results obtained.

  4. Knowledge Update: Always keep up to date with new capabilities and enhancements offered by browser technologies by participating in ongoing courses and experimenting with new tools.

With these improvements, you will not only transform your site into an interactive space, but you will also increase its added value, guaranteeing a positive impact on your visitors. Ready to dive deeper into the world of dynamic web pages? The learning doesn't end here!

Contributions 7

Questions 0

Sort by:

Want to see more contributions, questions and answers from the community?

Calvin Rafael Bobadilla Fernandez

Calvin Rafael Bobadilla Fernandez

7 months ago
Excelente curso diego! La explicacion estuvo excelente, y el proyecto final tambien. Antes de concluir, quisiera compartir un proyecto "secreto" que estoy haciendo. Tiene que ver con el to-do pero a una escala mas grande (lo llevo haciendo desde mucho antes del curso, aun falta algunas cosas) El nombre (temporal claro) es un super todo-list, con notas, manejadores de eventos, personalizar tu perfil y todo, pero una imagen vale mas que mil palabras asi que, aca lo enseno! ![](https://static.platzi.com/media/user_upload/image-d2096c10-e973-4df6-b55f-6254cebf4a81.jpg)
Mateo Espinosa Cubillos

Mateo Espinosa Cubillos

8 months ago
faltaron algunos fragmentos del curso, pero estuvo bueno, seria bueno que lo completaran bien
Tomas Arriola

Tomas Arriola

8 months ago
El curso está excelente, solo falta ordenar un poco el repositorio y aclarar algunos fragmentos de código. Les comparto una alternativa más que me parecio más sencilla: actualizo `localStorage` con la nueva tarea y luego renderizo la lista completa, asegurando que el almacenamiento y la interfaz estén sincronizados. En contraste, el enfoque del profesor renderiza la tarea primero y luego actualiza `localStorage`, lo que puede ser más propenso a inconsistencias y generar más código. ```js const taskForm = document.getElementById("task-form"); const taskList = document.getElementById("task-list"); const taskInput = document.getElementById("task-input"); let tasks = JSON.parse(localStorage.getItem("tasks")) || []; const toggleThemeBtn = document.getElementById("toggle-theme-btn"); // Función para renderizar tareas y asignar eventos function renderTasks() { taskList.innerHTML = ''; // Limpiar la lista de tareas tasks.forEach(task => { const li = document.createElement('li'); li.innerHTML = ` ${task} ❌ ✏️ `; taskList.appendChild(li); // Asignar eventos de eliminación li.querySelector('.delete-btn').addEventListener('click', function() { const taskText = li.childNodes[0].textContent.trim(); tasks = tasks.filter(t => t !== taskText); localStorage.setItem('tasks', JSON.stringify(tasks)); renderTasks(); // Re-renderizar la lista actualizada }); // Asignar eventos de edición li.querySelector('.edit-btn').addEventListener('click', function() { const newTask = prompt("Edit your task:", task); if (newTask !== null) { const index = tasks.indexOf(task); tasks[index] = newTask; localStorage.setItem('tasks', JSON.stringify(tasks)); renderTasks(); // Re-renderizar la lista actualizada } }); }); }; window.addEventListener('load', () => { const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark') { document.body.classList.add('dark-theme'); } else { document.body.classList.remove('dark-theme'); } }); // Añade un evento 'click' al botón para alternar la clase 'dark-theme' toggleThemeBtn.addEventListener("click", () => { // Alterna la clase 'dark-theme' en el <body> document.body.classList.toggle("dark-theme"); // Guarda la preferencia del tema en localStorage localStorage.setItem('theme', document.body.classList.contains("dark-theme") ? 'dark' : 'light'); }); // Añade un evento 'submit' al formulario de tareas taskForm.addEventListener("submit", (event) => { event.preventDefault(); // Previene que el formulario se envíe y recargue la página const task = taskInput.value; // Obtiene el valor del input tasks.push(task); // Agrega la nueva tarea a la lista localStorage.setItem('tasks', JSON.stringify(tasks)); // Guarda la lista actualizada en localStorage taskInput.value = ''; // Limpia el input renderTasks(); // Re-renderiza la lista actualizada }); // Inicializar el renderizado de tareas al cargar la página renderTasks(); ```Le doy crédito a ChatGpt por los comentarios en mi código.
Santiago Salamanca Rusinque

Santiago Salamanca Rusinque

3 months ago
![](https://static.platzi.com/media/user_upload/image-343c7aa6-8dd0-4a77-a45b-c5f8d77bc770.jpg) Quede así con el curso, pero tengo que practicar para afianzar estos nuevos conocimientos jaja, suerte a todos con sus estudios.
jesus manuel vergara arias

jesus manuel vergara arias

7 months ago
Buen curso, muy claro el profe en todo. Hay un solo punto, el orden del repo..... 9/10
Kyb3r Cipher

Kyb3r Cipher

4 months ago
Siento a este curso incompleto el DOM es muy complejo y tiene mas cosas incluso se mencionan en este video. Si es una escuela deberia ser completo y no solo esto. Deberian complementar pero los videos que estan buena explicacion por parte de Diego
Mercy María Ix Ballote

Mercy María Ix Ballote

5 months ago
excelente curso, más claro y basico que el que estaba antes