Aprende JavaScript para manipulación del DOM - Curso con proyectos

¡Hola! Si hablas español y quieres aprender JavaScript para manipulación del DOM, estás en el lugar correcto.

En este artículo, encontrarás una breve introducción a JavaScript para la manipulación de DOM. Aprenderás por qué esta es una herramienta muy poderosa para desarrollar aplicaciones web interactivas y por qué deberías aprenderla si tu objetivo es ser desarrollador web front-end.

Luego, encontrarás un curso de 5.5 horas sobre JavaScript para manipulación del DOM en el canal de YouTube en español de freeCodeCamp con el cual puedes aprender los fundamentos en español y construir proyectos paso a paso.

¡Comencemos! ✨

◼️ ¿Qué es el DOM?

DOM es un acrónimo que significa Document Object Model. Es una interfaz que permite que los programas de computadora accedan y actualicen el contenido, la estructura y el estilo de un documento, como un archivo HTML.

El DOM le permite a los desarrolladores web interactuar con los elementos y componentes de sus sitios web usando lenguajes de programación como JavaScript.

El DOM es como un árbol

El DOM crea una representación de todos los elementos de una página web. Esta representación parece un árbol invertido con nodos y conexiones que representan su jerarquía en el documento.

El primer objeto que encontramos en la jerarquía de arriba a abajo es el objeto principal del documento. En HTML, este sería el elemento raíz , que contiene a todos los demás objetos de la página web.

Debajo de este primer objeto, la estructura crea ramificaciones que parecen ramas de un árbol.

Cada objeto tiene un lugar particular en el DOM. La jerarquía del DOM sigue la jerarquía de los objetos en el documento.

💡 Dato: un encabezado, un párrafo, una imagen o un enlace son ejemplos de elementos HTML que se representan como objetos en el DOM.

◼️ Importancia del DOM

El DOM es la forma que tiene el navegador de representar la estructura de un documento. Gracias al DOM, podemos acceder a los elementos de una página web en JavaScript y manipularlos en nuestro código.

El DOM también tiene un conjunto de métodos que le permiten a los desarrolladores acceder, manipular e incluso eliminar objetos del árbol. Incluso podemos modificar lo que el usuario ve de forma dinámica.

Por ejemplo, podríamos actualizar el texto de un elemento o añadir nuevos elementos de forma dinámica a medida que recibimos información actualizada.

Por eso el DOM es tan importante para los desarrolladores web. Nos permite crear páginas web interactivas que van más allá de mostrar contenido e información estática.

Con el DOM, podemos crear experiencias de usuario interactivas. Podemos crear animaciones, cambiar la información que ve el usuario y reaccionar a los eventos que ocurren cuando el usuario interactúa con la página web.

Básicamente, el DOM hace que la web sea la herramienta increíble que conocemos y amamos hoy en día, por lo que es muy importante para ti como desarrollador web. En este curso, aprenderá cómo funciona y cómo usarlo.

◼️ Conceptos importantes

A medida que trabajamos con el DOM, a menudo encontraremos terminología utilizada para describir la relación entre los nodos en la jerarquía.

Estos son algunos de los términos más importantes que debes conocer para comenzar a trabajar con el DOM:

• Nodo raíz: el nodo raíz es el nodo superior de la jerarquía del DOM. Es el único nodo de la jerarquía que no tiene un nodo padre.
• Nodo padre: un nodo que contiene otro nodo.
• Nodo secundario: un nodo que está contenido directamente dentro de otro nodo.
• Nodo descendiente: un nodo que está dentro de otro nodo (directa o indirectamente).
• Nodos hermanos: nodos que están al mismo nivel en la jerarquía DOM y dentro del mismo nodo padre.

En este ejemplo, podemos representar el DOM que corresponde a este archivo HTML con el diagrama que puedes ver aquí a la derecha.

Veamos este DOM con más detalle:

• Podemos ver un nodo raíz (html).
• El nodo raíz tiene dos nodos hijos (head y body).
• El nodo padre tiene un nodo hijo (h1).
• El nodo body tiene dos nodos hijos (h1 y p).
• Los nodos h1 y p son hermanos. Están en el mismo nivel en la jerarquía y comparten el mismo nodo padre.
• Los nodos de la parte inferior del diagrama no tienen nodos hijos porque representan texto. Además de los elementos HTML, los nodos también pueden representar texto y comentarios.

💡 Dato: durante el curso, aprenderás la diferencia entre un nodo y un elemento. Esto es muy importante.

◼️ Seleccionando elementos del DOM

Poder seleccionar un elemento HTML del DOM es muy útil para tener acceso a la estructura del sitio web. Los elementos se representan como objetos con propiedades y métodos con los cuales podemos trabajar en JavaScript.

Tenemos cinco métodos para seleccionar un elemento del DOM:

.getElementById()

Este método se utiliza para obtener un elemento por su id. Como el id de un elemento debe ser único por página web, usar el id es una forma perfecta de seleccionar un elemento específico de la jerarquía DOM, incluso si hay varios elementos similares o idénticos.

Este es un ejemplo:

const contenedor = document.getElementById('contenedor');

💡 Dato: este método devolverá un solo elemento porque los ids deben ser únicas.

.getElementsByClassName()

Sin embargo, si nuestro objetivo es seleccionar todos los elementos que tengan una clase en particular, deberíamos usar este método.

const pizzaToppings = document.getElementsByClassName('topping');

Este método retorna un objeto de tipo HTMLCollection. Este tipo de objeto es similar a un array que contiene una colección de elementos HTML.

.getElementsByTagName()

A veces, también es posible que necesitemos seleccionar todos los elementos de un tipo en particular, como todos los divs o todos los ps. Este método es muy útil para lograr exactamente eso.

const misToppings = document.getElementsByTagName('li');

Este método también retorna una HTMLCollection porque podemos tener varios elementos con el mismo nombre de etiqueta.

.querySelect()

También tenemos una forma de seleccionar el primer elemento que coincida con un selector específico. Con este método, podemos escribir selectores más complejos, similares a los que usamos en CSS para seleccionar elementos basados en criterios más detallados.

const primerToppingNoMarron = document.querySelector('ul li:not(topping-marron))');

💡 Dato: este método retorna un solo elemento, el primer elemento que coincide con el selector en el orden en el que aparecen en la jerarquía DOM.

.querySelectAll()

Y si necesitamos seleccionar todos los elementos que coinciden con un selector específico, solo necesitamos agregar All al final del nombre del método.

const toppingsNaranja = document.querySelectorAll('.topping.fondo-naranja');

✨ Genial. Estos son los métodos de JavaScript que podemos usar para seleccionar elementos del DOM. Ahora veamos cómo podemos agregar y eliminar elementos.

◼️ Manipulando el DOM

Otro aspecto clave de por qué el DOM es tan poderoso es que nos permite manipular la jerarquía inicial del documento para agregar, eliminar y modificar elementos.

Podemos crear un elemento.

Por ejemplo:

const toppingNuevo = document.createElement('li');

Y una vez que tengamos el elemento nuevo, podemos agregarlo a la jerarquía DOM que ya existe en nuestra página web.

Si tenemos una referencia al elemento principal donde queremos agregarlo, toppingsList, podemos agregarlo llamando al método .append(), así:

listaToppings.append(toppingNuevo);

También podemos eliminar un elemento con el método .remove():

toppingNuevo.remove();

Y podemos modificar el contenido de un elemento, como su HTML interno o texto interno:

toppingNuevo.innerText = 'Queso Extra';

toppingNuevo.innerText = '<div class="topping-nuevo">Queso Extra</div>';

◼️ Asignando Estilos

También podemos usar la notación de punto para acceder y modificar el estilo de un elemento. Incluso podemos agregar y eliminar las clases de los elementos.

toppingNuevo.classList.add('topping', 'fondo-marron');

toppingNuevo.style.backgroundColor = 'blue';
toppingNuevo.style.color = '#6dff00';
toppingNuevo.style.textTransform = 'uppercase';

Esto es muy poderoso y aprenderás cómo hacerlo durante el curso a medida que construyamos los proyectos.

💡 Dato: también podemos detectar y manejar eventos del DOM en JavaScript. Los eventos pueden ser desencadenados por interacciones del usuario, como hacer clic en un botón del mouse, o por el navegador, como cuando una imagen ha terminado de cargarse.

◼️ Contenido del curso

Excelente. Ahora que sabes más sobre el DOM y sobre por qué los desarrolladores web deberían aprender a manipular el DOM con JavaScript, veamos un resumen de lo que aprenderás durante el curso.

💡 Dato: el curso asume conocimientos básicos de HTML, CSS y JavaScript. Trabajaremos los ejemplos y proyectos paso a paso pero se recomienda tener conocimientos previos sobre los fundamentos de JavaScript.

Introducción al DOM

• ¿Qué es el DOM?
• ¿Para qué se usa el DOM?
• Jerarquía del DOM.
• Conceptos importantes.
• Relaciones entre los nodos.
• Nodo vs elemento en el DOM.

Herramientas para desarrolladores de Chrome y el DOM

• Introducción a las herramientas para desarrolladores de Chrome.
• La pestaña Elementos.
• Cómo inspeccionar una página web.
• Cómo usar la consola.
• Visualizar y comprender el DOM.
• Manipular el DOM en la vista previa.

💡 Dato: durante el curso, trabajaremos con Visual Studio Code e instalaremos la extensión Live Server para ver nuestros cambios automáticamente.

Seleccionando un elemento del DOM

• .getElementById()
• .getElementsByClassName()
• .getElementsByTagName()
• .querySelect()
• .querySelectAll()

Asignando estilo con JavaScript

• La propiedad style.
• Personalizar las propiedades de CSS con JavaScript.
• Obtener el valor de una propiedad CSS.

Asignando el contenido de un elemento

• La propiedad .innerText.
• La propiedad .innerHTML.
• La propiedad .textContent.
• Sus diferencias y obtener sus valores.

Modificar and recorrer el DOM

• Cómo crear un elemento.
• Cómo agregar un elemento.
• Cómo eliminar un elemento.
• Recorrer el DOM para acceder al nodo padre, los nodos hijos y los nodos hermanos.

Eventos del DOM

• ¿Qué es un evento?
• Desencadenantes de eventos
• Tipos de eventos del DOM
• Conceptos importantes
• Event listeners
• Cómo manejar eventos

Suena genial, ¿verdad? Aprenderás todo esto y mucho más durante el curso.

◼️ Proyectos del curso

Durante el curso, crearemos cinco proyectos interactivos paso a paso. Veamos con más detalle lo que aprenderás en cada uno de ellos.

Generador de colores hexadecimales aleatorios

Nuestro primer proyecto será un generador de colores hexadecimales aleatorios. Generaremos un color hexadecimal aleatorio y lo asignaremos como color de fondo del elemento body.

💡 Dato: practicarás cómo asignar un detector de eventos, cómo manejar un evento y cómo actualizar el texto interno y el estilo de un elemento.

Selector de colores RGB con controles deslizantes

Nuestro segundo proyecto también tendrá colores, pero esta vez el color no será aleatorio. Será un color RGB y podrás elegir los valores de rojo, verde y azul para generar un nuevo color y actualizar el fondo.

💡 Dato: practicarás cómo manejar un nuevo tipo de evento y cómo obtener los valores de los controles deslizantes cada vez que ocurra el evento.

Generador de citas aleatorias

Nuestro tercer proyecto mostrará una cita aleatoria y su autor. El usuario podrá hacer clic en el botón azul para cambiar la cita y seleccionar una nueva.

💡 Dato: practicarás cómo generar números aleatorios en JavaScript, cómo actualizar el texto de un elemento y cómo manejar eventos DOM.

Cronómetro

Nuestro cuarto proyecto será un cronómetro. El usuario podrá iniciar, pausar y detener el cronómetro y actualizar la hora y los iconos de manera adecuada.

💡 Dato: aprenderás cómo actualizar continuamente el contenido de un elemento en un intervalo de tiempo fijo, cómo restablecer el intervalo de tiempo y cómo actualizar el HTML interno de un elemento en el DOM.

Aplicación de lista de tareas pendientes

Finalmente, nuestro quinto proyecto será una aplicación de lista de tareas pendientes. El usuario podrá escribir una tarea en el campo de texto y hacer clic en el botón o presionar Entrar en el teclado para agregar la tarea nueva. Las tareas tendrán texto, un botón para marcarlas como completadas y un botón para eliminarlas de la lista. Cada estado actualizará su estilo.

💡 Dato: aprenderás cómo manejar eventos de teclado y practicarás cómo crear un elemento, asignar y eliminar clases y eliminar elementos del DOM.

💡 Dato: durante los proyectos, también trabajaremos con iconos de Bootstrap, Flexbox y Google Fonts.

📌 Curso de JavaScript para manipulación del DOM en YouTube

Genial. Ahora que sabes más sobre JavaScript para manipulación del DOM y lo que aprenderás durante el curso, puedes comenzar a tomar el curso:

✍️ Curso creado por Estefania Cassingena Navone (Twitter: @EstefaniaCassN, YouTube: Coding with Estefania).

Espero que te guste el curso y que te sea de utilidad para aprender a manipular el DOM con JavaScript.

También te invitamos a continuar aprendiendo con nuestros cursos en español: