Frontend

Curso de Manipulación del DOM desde JavaScript

En este curso aprenderás los métodos, propiedades y eventos relacionados con el DOM y cómo manipularlo desde JavaScript sin usar frameworks o librerías externas.

4.6 (116 valoraciones)
4 horas y 2 minutos · curso
Manipulación del DOM desde JavaScript

Lo que aprenderás en este curso:

  • Conocer qué es el DOM y las características de los elementos que lo conforman.
  • Aprender a seleccionar los distintos elementos que conforman una página web y modificar sus propiedades.
  • Aprender a moverte por el DOM.
  • Dar vida a una página web reaccionando a los eventos que se produzcan en mi navegador.

Requisitos del curso

Para la realización de este curso es recomendable que el alumno cuente con conocimientos básicos de programación (idealmente JavaScript), de HTML y de CSS.

Valoraciones de estudiantes:

  • 5
  • 4
  • 3
  • 2
  • 1
4.6
116 valoraciones

Contenido del curso:

    • 3 m
    • ¿Qué es el DOM?
      5 m
    • Elementos del DOM y sus características
      13 m
    • Herramientas para inspeccionar los elementos del DOM
      8 m
    • Seleccionando elementos
      16 m
    • Modificando propiedades de los elementos
      11 m
    • Modificando estilos de los elementos
      10 m
    • Práctica: Modificar elementos
      7 m
    • Definición y tipos de eventos
      7 m
    • Loop de eventos JS
      6 m
    • Capturando eventos
      16 m
    • Creando y lanzando eventos
      7 m
    • Práctica: Creación de eventos
      9 m
    • ¿Qué es "Traversing" el DOM?
      5 m
    • Relaciones entre los nodos
      10 m
    • Moviéndonos entre los nodos
      7 m
    • Práctica: Recorriendo el árbol
      7 m
    • 4 m
    • Añadiendo nuevos elementos a nuestra página
      13 m
    • Borrando elementos de nuestra página
      6 m
    • Práctica: Construir una tabla
      8 m
    • Proceso de construcción del DOM
      5 m
    • ¿Cómo medir la velocidad del DOM y de mi código JavaScript?
      9 m
    • Posibles problemas a la hora de trabajar con el DOM
      13 m
    • Práctica: Gestor de tarjetas
      16 m
    • Práctica: Modificar el DOM
      9 m
También te puede interesar

Te dejamos una selección de cursos, carreras y artículos

JavaScript para principiantes

Curso de JavaScript para principiantes

2 horas y 46 segundos · curso

En este curso aprenderás los métodos, propiedades y eventos relacionados con el DOM y cómo manipularlo desde JavaScript sin usar frameworks o librerías externas.

  • Frontend
Maquetación web con CSS

Curso de maquetación web con CSS

2 horas y 10 minutos · curso

En este curso aprenderás los métodos, propiedades y eventos relacionados con el DOM y cómo manipularlo desde JavaScript sin usar frameworks o librerías externas.

  • Frontend

Dudas frecuentes

1

¿Cuándo comienza el curso?

En OpenWebinars los cursos no tienen fecha de inicio y de final.

Cada curso tiene una fecha de publicación y desde ese día estarán 100% disponible todos los contenidos del curso para los usuarios suscritos a alguno de nuestros planes.

2

¿Cuál es el precio?

En OpenWebinars no vendemos cursos, talleres o laboratorios unitarios.

Tenemos diferentes tipos de suscripciones, que te dará acceso completo a todos los cursos de la plataforma y a los nuevos que vamos lanzando, siempre y cuando tu suscripción esté activa (como Spotify con la música o Netflix con las películas y series).

¿Eres una empresa? Tenemos planes especiales para ti. Consúltanos aquí.

3

¿Puedo obtener un diploma que acredite mis conocimientos?

Efectivamente, una vez superada cada formación, podrás descargarte el diploma acreditativo de cada una de ellas. Añádelas a tu CV y mejora tu perfil para las empresas.

También podrás obtener un diploma de nivel superior al superar todas las formaciones de la carrera.

Este curso está dirigido a cualquier persona que tenga conocimientos básicos de programación, de HTML y CSS y que quiera aprender los fundamentos de JavaScript a la hora de modificar, dotar de vida e interactividad los distintos elementos, todo ello de una forma muy práctica y con ejercicios para validar todo lo aprendido.

Por tanto, para la correcta realización de este curso es muy recomendable que el alumno cuente con conocimientos básicos de programación (idealmente en JavaScript), de HTML y de CSS. Si necesitas adquirir o refrescar estos conocimientos, te proponemos realizar el Curso de HTML5 y CSS3 y el Curso de JavaScript para principiantes, que encontrarás dentro de tu suscripción.

Comenzando con la formación, encontrarás un primer bloque introductorio, en el que, además de la presentación del curso y del profesor que lo imparte, se explicará qué es el DOM y la relación entre el mismo y JavaScript, además de qué elementos lo componen, sus características y algunas herramientas para inspeccionar los elementos del DOM.

Tras conocer los fundamentos del DOM, pasamos al siguiente bloque del curso, centrado en el acceso y modificación de los elementos. En las clases que lo componen podrás aprender todo lo relacionado con la selección de elementos, la modificación de las propiedades de los elementos además de la modificación de sus estilos. Para concluir este apartado, tendrás la práctica correspondiente, para que puedas ver de forma más clara y aplicada todo lo que se ha explicado en las lecciones previas.

Seguidamente entraremos en el segmento enfocado en los eventos del DOM, en el que se profundizará en la definición y los tipos de eventos existentes, en el loop de eventos de JavaScript, la captura de eventos, así como en la creación y lanzamiento de eventos. De nuevo, al final de este bloque tendrás otra lección en la que se usará lo explicado anteriormente para verlo de forma práctica.

Continúa la formación entrando a fondo en lo que se conoce como recorrer DOM o traversing, explicando qué es este concepto, además de profundizar en las relaciones entre los nodos y cómo movernos entre los nodos. Para acabar, como es habitual, tendremos una clase práctica para aplicar toda esta teoría y comprenderla mucho más claramente.

En el penúltimo apartado teórico vamos a mostraros cómo modificar la página y cómo añadir y eliminar nodos. Antes de nada, se explicará qué significa modificar el DOM, y para continuar se entrará en la adición de nuevos elementos a la página y en el borrado de algunos de ellos. Tras la teoría, pasaremos a verlo todo de forma aplicada, con un ejemplo muy completo en el que se usará todo lo aprendido previamente.

Para finalizar estos segmentos más teóricos, concluimos la formación con una serie de consideraciones sobre el rendimiento a la hora de modificar el DOM y recorrerlo, para que puedas conocer cómo estos procesos afectan a ese rendimiento. Se explicará el proceso de renderizado durante la construcción del DOM, cómo medir la velocidad del DOM y del código JavaScript, además de los posibles problemas que se pueden presentar a la hora de trabajar con el DOM.

El bloque final de este curso de manipulación del DOM con JavaScript consiste en un par de prácticas adicionales que te permitirán profundizar un poco más en la parte meramente aplicada de toda esa teoría desarrollada previamente.

Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información.