CursosEmpresasBlogLiveConfPrecios

Y entonces nació internet...

Clase 1 de 29 • Curso de Manipulación del DOM

Clase anteriorSiguiente clase

Contenido del curso

DOM y Web API
  • 1
    Y entonces nació internet...

    Y entonces nació internet...

    02:23
  • 2

    Accede a la versión más actualizada de este contenido

    00:14
  • 3
    ¿Qué es el DOM?

    ¿Qué es el DOM?

    02:39
  • 4
    Web APIs modernas

    Web APIs modernas

    03:17
Operaciones básicas
  • 5
    Leer nodos

    Leer nodos

    09:31
  • 6
    NodeLists vs Array

    NodeLists vs Array

    03:46
  • 7
    Crear y agregar

    Crear y agregar

    15:47
  • 8
    Otras formas de agregar

    Otras formas de agregar

    06:55
  • 9
    Atributos y propiedades

    Atributos y propiedades

    05:12
  • 10
    Eliminar nodos

    Eliminar nodos

    09:31
  • 11
    Operaciones en lote

    Operaciones en lote

    06:52
Workshop 1: Fetch
  • 12
    Presentación del proyecto

    Presentación del proyecto

    01:10
  • 13
    Descargando información y creando nodos

    Descargando información y creando nodos

    18:36
  • 14
    Enriqueciendo la información

    Enriqueciendo la información

    10:53
  • 15
    Usando la API de internacionalización del browser

    Usando la API de internacionalización del browser

    12:14
  • 16
    Comparte el resultado

    Comparte el resultado

    02:18
Eventos
  • 17
    Reaccionar a lo que sucede en el DOM

    Reaccionar a lo que sucede en el DOM

    13:58
  • 18
    Event propagation

    Event propagation

    12:08
  • 19
    Event delegation

    Event delegation

    05:32
Workshop 2: Lazy loading
  • 20
    Presentación del proyecto

    Presentación del proyecto

    03:34
  • 21
    Nuestro propio plugin Lazy Loading

    Nuestro propio plugin Lazy Loading

    08:32
  • 22
    Creando las imagenes con JavaScript

    Creando las imagenes con JavaScript

    17:33
  • 23
    Intersection Observer

    Intersection Observer

    14:21
  • 24
    Aplicando Lazy loading

    Aplicando Lazy loading

    13:07
  • 25
    Comparte el resultado

    Comparte el resultado

    03:17
Workshop 3
  • 26
    Proyectos propuestos

    Proyectos propuestos

    04:17
Librerías relacionadas
  • 27
    ¿Y jQuery?

    ¿Y jQuery?

    03:41
  • 28
    ¿Y JSX?

    ¿Y JSX?

    09:40
Conclusiones
  • 29
    Conclusiones

    Conclusiones

    01:56
    Carlos Eduardo Gomez García

    Carlos Eduardo Gomez García

    teacher•
    hace 5 años

    Estuve recargando la página hasta que me dejó entrar al curso xD Este curso me llama la atención porque aprendí a manipular el DOM hace un tiempito y quiero refrescar conocimientos! Espero aportar mucho al curso <3

      Juan Jose Mayorga

      Juan Jose Mayorga

      student•
      hace 5 años

      Ya somos dos, tenía tiempo esperando este curso :)

      Andres Felipe Pinchao Ramirez

      Andres Felipe Pinchao Ramirez

      student•
      hace 5 años

      estaba igual me aparecían bloqueados los videos aun

    George Báez Beltré

    George Báez Beltré

    student•
    hace 5 años

    https://es.javascript.info/ Esta es otra Biblia del JS que vale oro

      fermin martin

      fermin martin

      student•
      hace 5 años

      Súper! muy buen enlace 👌

      Jonathan 🦑 Alvarez

      Jonathan 🦑 Alvarez

      teacher•
      hace 5 años

      Huh genial, gracias por compartirlo!

    Omar García Betanzos

    Omar García Betanzos

    student•
    hace 5 años
    <"Dominando JavaScript puedes dominar cualquier framework">
    David Daniel Castillo Nava

    David Daniel Castillo Nava

    student•
    hace 5 años

    Bueno ya se manipular el DOM, pero siempre ver cursos nuevos por que, siempre se aprender algo así sea pequeño, aprenderás algo!!!

    Cesar Umeres

    Cesar Umeres

    student•
    hace 5 años

    Me hizo recordar al video que habla sobre los profesore de Hola soy German

      Jonathan 🦑 Alvarez

      Jonathan 🦑 Alvarez

      teacher•
      hace 5 años

      Tal vez deba usar corbata la próxima :p

      Alejandro Mejia Escobar

      Alejandro Mejia Escobar

      student•
      hace 4 años

      Por si a alguien también le dio curiosidad ver el video: https://www.youtube.com/watch?v=mSjv8bjmKgQ

    Giselle Desiree Boyer Jimenez

    Giselle Desiree Boyer Jimenez

    student•
    hace 5 años

    Opino que deberían corregir el título del video, esperaba algo totalmente distinto y simplemente es una clase introductoria al curso

      Mauricio Ulises Martinez Velez

      Mauricio Ulises Martinez Velez

      student•
      hace 5 años

      Concuerdo completamente, esperaba algo de historia sinceramente.

    Esteban Daniel Espinoza Ayquipa

    Esteban Daniel Espinoza Ayquipa

    student•
    hace 5 años

    Aquí les dejo un link para que a medida que sigan el curso se apoyen de este material, que es sobre el DOM en JavaScript https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n

      Rolando Mamani Salas

      Rolando Mamani Salas

      student•
      hace 4 años

      Muchas gracias por el aporte

    Max Andy Diaz Neyra

    Max Andy Diaz Neyra

    student•
    hace 4 años

    Resumen de la clase:

    • Para estar actualizado y dominar cualquier frameworks debes dominar los fundamentos de JavaScript.
    • Objetivo del curso: manipular DOM con JS puro.
    • Requerimientos:
    • Conocer HTML
    • Conocer CSS
    • Conocer JS
    • Conocer programación y algoritmos
    • Tener instalado Node.js
    Eddy Arellanes

    Eddy Arellanes

    student•
    hace 5 años

    Alternativamente a descargar node directamente, puedes instalar NVM (Node Version Manager), que te permite instalar múltiples versiones de Node e intercambiar entre ellas cuando quieras con un simple comando, muy útil cuando algunos paquetes no funcionan bien en X versión https://github.com/nvm-sh/nvm LINUX https://github.com/coreybutler/nvm-windows WINDOWS

    Santiago Naranjo Conde

    Santiago Naranjo Conde

    student•
    hace 4 años

    ¡¡¡¿¿¿Que hace TheGrefg en Platzi 😲???!!!

    Miguel Angel Reyes Moreno

    Miguel Angel Reyes Moreno

    student•
    hace 5 años

    ¡Hola! Solo quiero mostrate algo que podrás hacer si aprendes bien este curso, yo hice una Pokedex Me gustaría saber qué opinas :)

      Misael Gomez

      Misael Gomez

      student•
      hace 3 años

      Hey tambien hice una pokedex https://comforting-gaufre-7f630b.netlify.app/

      Diego Hernandez

      Diego Hernandez

      student•
      hace 3 años

      Genial, dos proyectos para inspirar

    Enrique Devars

    Enrique Devars

    teacher•
    hace 5 años

    Ame el intro de este curso 💚

    Michael Juarez

    Michael Juarez

    student•
    hace 5 años

    Tip: Veanlo en 1.25x

    Ruben Peña

    Ruben Peña

    student•
    hace 5 años

    Poner velocidad del curso en 2X... Para mi va perfecto...

      Luis Alejandro Vera Hernandez

      Luis Alejandro Vera Hernandez

      student•
      hace 4 años

      La plena jaja

    Anggi Vanesa Pallares Solis

    Anggi Vanesa Pallares Solis

    student•
    hace 4 años
    1.JPG
    Omar Gabriel Aguilar Moscoso

    Omar Gabriel Aguilar Moscoso

    student•
    hace 4 años

    Son muy pocos los profesores de esta plataforma que son sinónimos de calidad y el profe Jonathan es uno de ellos

    Jimmy Buriticá Londoño

    Jimmy Buriticá Londoño

    student•
    hace 5 años

    Buena introducción, con muchas ganas de aprender cosas nuevas del DOM.

    Danilo Valenzuela

    Danilo Valenzuela

    student•
    hace 5 años

    Los cursos de Jonathan son muy buenos, muy profesionales. Tengo muchas expectativas del curso :V

      Rolando Mamani Salas

      Rolando Mamani Salas

      student•
      hace 4 años

      Es el primer curso que tomo de este profesor espero sea bueno como dices

    Keyla Conde Sánchez

    Keyla Conde Sánchez

    student•
    hace 3 años

    Estaba viendo el curso de introducción a React y tuve que venir a hacer este primero.

    Chrystian Fabian Lozano Ramirez

    Chrystian Fabian Lozano Ramirez

    student•
    hace 5 años

    Cringe

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads