Cómo funciona el DOM de JavaScript: Un tutorial práctico

Yulianny Betancourt — Wed, 30 Nov 2022 19:05:04 +0000

Artículo original: How the JavaScript DOM Works – A Practical Tutorial

Si estuvieras escuchando música en una aplicación y quisieras pausar o pasar una canción, tendrías que hacerlo a través de la aplicación.

Este proceso es similar a cómo funciona el Modelo de objetos de documento o DOM. Aquí, la aplicación de música representa el DOM porque sirve como medio para realizar cambios en la música.

En este tutorial, tu aprenderás qué es el DOM y cómo funciona de una manera práctica.

¿Qué es el DOM?

El DOM es una API Web que permite a los desarrolladores usar la lógica de programación para realizar cambios en el código HTML. Es una manera confiable de realizar cambios que convierten los sitios web estáticos en dinámicos.

Este es un tema importante en el desarrollo web porque el DOM sirve para dar inicio al uso de JavaScript en el navegador.

El código HTML no es considerado parte del DOM hasta que es analizado por el navegador. Para ver que está pasando en el código HTML, cuando está siendo analizado, copia tu código desde la etiqueta y pégalo aquí (dentro del cuadro con el título 'Markup to test' después de los tres puntos).

¿Qué estaremos construyendo?

En este artículo, estaremos aprendiendo lo más importante y las partes usadas con frecuencia del DOM para construir este simple proyecto:

Lo puedes ver en CodePen aquí.

Funcionalidades del Proyecto

Como puedes ver arriba en la demostración del proyecto, estas son las funcionalidades que estaremos implementado:

Cambio dinámico de color: Cuando se hace clic en un color, el color del carro, el botón addTocart, y la etiqueta, todos cambian para coincidir con el color seleccionado.
Botón de cambio: Al hacer clic en el botón addToCart aparece el botón de éxito y viceversa.

Requisitos previos

Conocimientos básicos de HTML y CSS.
Conocimientos básicos de JavaScript.
Un IDE (Editor de texto).
Un navegador web.

Tener en cuenta: Debido a que el objetivo del artículo es aprender sobre JavaScript y el DOM, no a vamos hacer mucho énfasis en el código de HTML y CSS. Daremos un vistazo rápido para poder preparar la aplicación. Luego profundizaremos para aprender sobre el DOM.

Código HTML:

En nuestro archivo index.html , vamos a crear la estructura básica del proyecto, lo cual incluye: el enlace del archivo CSS, Font Awesome, y Google Fonts – todo dentro de nuestra etiqueta . Dentro de nuestra etiqueta , crearemos nuestra tarjeta del producto y enlazaremos nuestra etiqueta JavaScript al final de la etiqueta .



  
    
    
    
    
    
    
    
    Práctica del DOM
  
  
    
      
        
      
      
        CARRO
        Mercedez Benz c300 2022
        
          
            
            Kilometraje: 4,000 millas
          
          
            
            Combustible: 25mpg
          
          
            Seguridad:
            
              
              
              
              
              
            
          
        
        Escoge un color:
        
          
            
            
            
          
          
            $134,450
            $140,500

Código CSS:

En nuestro archivo de estilos, primero vamos a configurar nuestros estilos generales así:

* {
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
  background-color: antiquewhite;
}

Luego, damos estilos a nuestro producto, empezando con la etiqueta, imagen, descripción y detalles.

/* etiqueta producto */
.tag {
  font-size: 0.9rem;
  background-color: black;
  border-radius: 5px;
  width: 4rem;
  display: flex;
  justify-content: center;
  color: #fff;
}

/* producto*/
.product-title {
  font-size: 2rem;
  font-weight: 700;
}

.product-card {
  background: #fff;
  display: grid;
  /* align-items: center; */
  grid-template-rows: 55% 45%;
  height: 80%;
  width: 30%;
  box-shadow: 10px 10px 25px 0px #3c3c3c;
}

.product-image {
  /* border: 2px solid black; */
  background-image: url("./img/black-benz.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 40px 10px;
  width: 28rem;
  height: 66%;
}

.product-description {
  background-color: #62c256;
  color: #fff;
  padding-left: 20px;
  margin-top: -67px;
}

.product-details {
  display: flex;
  flex-direction: column;
  margin-top: -20px;
}

.product-image img {
  width: 28rem;
}

.stars {
  color: yellow;
  font-size: 1em;
}

Después, le daremos estilos a nuestros colores: sus precios, colores como un grupo, y colores individuales.

/* colores */
.colors-price {
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: space-between;
  margin-top: -15px;
}

.colors {
  display: flex;
  width: 6rem;
  justify-content: space-between;
  cursor: pointer;
}

.red {
  background: red;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.gray {
  background: gray;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.black {
  background: black;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.pricing {
  display: flex;
  width: 12rem;
  justify-content: space-between;
  align-items: center;
}

.old-price {
  font-weight: 100;
}

Finalmente, le daremos estilos a nuestros botones con este código:

/* botones */
button {
  cursor: pointer;
}

#button {
  background-color: #000;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
}

button white-button {
  background-color: #fff;
}

.button-text {
  color: #fff;
  margin-left: 5px;
}

.feedback {
  display: none;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
}

Implementación del DOM

Todo en el DOM recae en alguna de estas dos categorías: selección de elementos y manipulación de elementos. Después de crear nuestros archivos HTML y CSS, nos dirigimos a nuestro archivo app.js para implementar lo siguiente:

Selección: Hacemos referencia a todos los elementos que queremos hacer dinámicos desde nuestro código HTML y les asignamos variables en nuestro archivo JavaScript.
Manipulación: Una vez que hemos seleccionado y enlazado las variables, creamos las diversas funciones responsables de la manipulación y luego las enlazamos a las variables.

¿Cómo seleccionar elementos en el DOM?

Para tener acceso a los elementos de HTML que se quieren manipular, necesitas hacer que JavaScript sea consciente de la existencia de dichos elementos. A esto nos referimos generalmente como "selección" de elementos – básicamente es enlazarlos.

In el DOM, no hay una sola forma de localizar y hacer referencia a un elemento para su manipulación. En cambio, dependerá del selector que hayas usado en la etiqueta del elemento.

Para ello, se asigna el elemento a una variable. Tomando el siguiente formato. Ten en cuenta que todos los selectores del DOM están precedidos por el objeto de documento y un punto:

const ejemplo = document.[DOMselector]

En nuestro archivo de JavaScript, tenemos que seleccionar todos los elementos que queremos manipular, como el botón, los colores, la tarjeta de imagen, y la etiqueta.

Vamos a utilizar tantos selectores de DOM como sea posible, así que aprendamos más sobre ellos.

Cómo usar el `querySelector`

querySelector es un método que acepta el selector exacto del CSS en una cadena y retorna un elemento. Puedes usarlo para seleccionar los colores rojo y negro así como la tarjeta de imagen, usando sus nombres de clase.

Si quisieras usar este enfoque para seleccionar y retornar más de un elemento, puedes usar QuerySelectorAll en su lugar.

const redColor = document.querySelector(".red");

El código de arriba vincula el span con la clase "red" de nuestro código HTML a la variable redColor en nuestro JavaScript.

const blackColor = document.querySelector(".black");

El código de arriba vincula el span con la clase "black" de nuestro código HTML a la variable blackColor en nuestro JavaScript.

const imageCard = document.querySelector(".product-image");

El código de arriba vincula el div con la clase "product-image"

de nuestro código HTML a la variable imageCard en nuestro JavaScript.

const feedbackBtn = document.querySelector(".feedback");

El código de arriba vincula el botón con la clase "feedback"

Código HTML del proyecto

Aquí está el CSS:

* {
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
  background-color: antiquewhite;
}

/* etiqueta de producto */
.tag {
  font-size: 0.9rem;
  background-color: black;
  border-radius: 5px;
  width: 4rem;
  display: flex;
  justify-content: center;
  color: #fff;
}

/* producto */
.product-title {
  font-size: 2rem;
  font-weight: 700;
}

.product-card {
  background: #fff;
  display: grid;
  /* align-items: center; */
  grid-template-rows: 55% 45%;
  height: 80%;
  width: 30%;
  box-shadow: 10px 10px 25px 0px #3c3c3c;
}

.product-image {
  /* border: 2px solid black; */
  background-image: url("./img/black-benz.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 40px 10px;
  width: 28rem;
  height: 66%;
}

.product-description {
  background-color: #62c256;
  color: #fff;
  padding-left: 20px;
  margin-top: -67px;
}

.product-details {
  display: flex;
  flex-direction: column;
  margin-top: -20px;
}

.product-image img {
  width: 28rem;
}

.stars {
  color: yellow;
  font-size: 1em;
}

/* colores */
.colors-price {
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: space-between;
  margin-top: -15px;
}

.colors {
  display: flex;
  width: 6rem;
  justify-content: space-between;
  cursor: pointer;
}

.red {
  background: red;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.gray {
  background: gray;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.black {
  background: black;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.pricing {
  display: flex;
  width: 12rem;
  justify-content: space-between;
  align-items: center;
}

.old-price {
  font-weight: 100;
}

/* botones */
button {
  cursor: pointer;
}

#button {
  background-color: #000;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
}

button white-button {
  background-color: #fff;
}

.button-text {
  color: #fff;
  margin-left: 5px;
}

.feedback {
  display: none;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
}

Código CSS del proyecto

Aquí está el código JavaScript:

/// 1. Cambiar el color del carrito y el color del botón addToCart cuando un color es seleccionado
/// - Seleccionando elementos
const redColor = document.querySelector(".red");
const grayColor = document.getElementsByClassName("gray");
const blackColor = document.querySelector(".black");
const cartButton = document.getElementById("button");
const itemTag = document.getElementsByTagName("h3")[0];
const imageCard = document.querySelector(".product-image");
const feedbackBtn = document.querySelector(".feedback");

// Modificando elementos
// - Agregando detectores de eventos
// - Color rojo
redColor.addEventListener("click", function () {
  cartButton.style.backgroundColor = "red";
  itemTag.style.backgroundColor = "red";
  imageCard.style.backgroundImage = 'url("./img/red-benz.webp")';
});

// - Color Gris
grayColor[0].addEventListener("click", function () {
  cartButton.style.backgroundColor = "gray";
  itemTag.style.backgroundColor = "gray";
  imageCard.style.backgroundImage = 'url("./img/gray-benz.jpg")';
});

// - Color Negro
blackColor.addEventListener("click", function () {
  cartButton.style.backgroundColor = "black";
  itemTag.style.backgroundColor = "black";
  imageCard.style.backgroundImage = 'url("./img/black-benz.jpg")';
});

// Implementando el evento clic en el botón
// - Botón del Carrito
const cart = () => {
  cartButton.style.display = "none";
  feedbackBtn.style.display = "block";
};
cartButton.addEventListener("click", cart);

// - Botón de retroalimentación
const feedback = () => {
  cartButton.style.display = "block";
  feedbackBtn.style.display = "none";
};
feedbackBtn.addEventListener("click", feedback);

Código JavaScript del proyecto

Conclusión

El DOM es una parte esencial del desarrollo web moderno porque este ayuda a los desarrolladores a transformar aplicaciones de páginas web estáticas a dinámicas.

Como principiantes, puede ser difícil entender el DOM y todo lo que conlleva su manejo. Tomar tiempo para construir proyectos simples como este te ayudará a reforzar los conceptos.

Gracias por leer ??. Espero te haya sido de ayuda.

Yulianny Betancourt - freeCodeCamp.org

Cómo funciona el DOM de JavaScript: Un tutorial práctico

¿Qué es el DOM?

¿Qué estaremos construyendo?

Funcionalidades del Proyecto

Requisitos previos

Código HTML:

CARRO

Mercedez Benz c300 2022

$134,450

$140,500

Código CSS:

Implementación del DOM

¿Cómo seleccionar elementos en el DOM?

Cómo usar el `querySelector`

Cómo usar `getElementsByClassName`

Cómo usar `getElementById`

Cómo usar `GetElementsByTagName`

de nuestro código HTML con la variable itemTag en nuestro JavaScript.
De todos estos, el querySelector y querySelectorAll son probablemente los más populares debido a como generalizan y lo menos restrictivos que son.

Cómo manipular elementos en el DOM

¿Qué son los Eventos?

Anatomía de un evento

¿Qué son los manejadores de Eventos?

¿Cómo implementar los Eventos y los manejadores de Eventos?

Cómo implementar el botón del Carrito

Cómo Implementar el botón de retroalimentación

Código completo del Proyecto

CARRO

Mercedez Benz c300 2022

$134,450

$140,500

Conclusión

Yulianny Betancourt - freeCodeCamp.org

Cómo funciona el DOM de JavaScript: Un tutorial práctico

¿Qué es el DOM?

¿Qué estaremos construyendo?

Funcionalidades del Proyecto

Requisitos previos

Código HTML:

CARRO

Mercedez Benz c300 2022

$134,450

$140,500

Código CSS:

Implementación del DOM

¿Cómo seleccionar elementos en el DOM?

Cómo usar el querySelector

Cómo usar getElementsByClassName

Cómo usar getElementById

Cómo usar GetElementsByTagName

de nuestro código HTML con la variable itemTag en nuestro JavaScript.De todos estos, el querySelector y querySelectorAll son probablemente los más populares debido a como generalizan y lo menos restrictivos que son.

Cómo manipular elementos en el DOM

¿Qué son los Eventos?

Anatomía de un evento

¿Qué son los manejadores de Eventos?

¿Cómo implementar los Eventos y los manejadores de Eventos?

Cómo implementar el botón del Carrito

Cómo Implementar el botón de retroalimentación

Código completo del Proyecto

CARRO

Mercedez Benz c300 2022

$134,450

$140,500

Conclusión

Cómo usar el `querySelector`

Cómo usar `getElementsByClassName`

Cómo usar `getElementById`

Cómo usar `GetElementsByTagName`

de nuestro código HTML con la variable itemTag en nuestro JavaScript.
De todos estos, el querySelector y querySelectorAll son probablemente los más populares debido a como generalizan y lo menos restrictivos que son.