Chuck's Academy

JavaScript Básico

Inicio / Tema / JavaScript Básico / Manipulación del DOM

Manipulación del DOM

La manipulación del DOM (Document Object Model) es una de las habilidades clave que necesitas dominar como desarrollador frontend. El DOM es una representación estructurada de la página web, que permite a JavaScript acceder y modificar su contenido y estructura en tiempo real. En este capítulo, aprenderemos cómo seleccionar, modificar y reaccionar a eventos en los elementos HTML utilizando JavaScript.

¿Qué es el DOM?

El DOM es una interfaz de programación que representa la estructura de un documento HTML o XML como un árbol de nodos. Cada elemento HTML se convierte en un nodo en este árbol, y JavaScript puede acceder a estos nodos para leer o cambiar su contenido, atributos y estilo.

Selección de Elementos del DOM

Para manipular elementos en una página web, primero necesitamos seleccionarlos. JavaScript proporciona varios métodos para hacerlo.

getElementById

Este método selecciona un elemento en el DOM utilizando su atributo id.

javascript
"Aquí utilizamos el método getElementById para seleccionar un elemento con el identificador header. Luego imprimimos el contenido de texto de ese elemento utilizando textContent."

querySelector y querySelectorAll

El método querySelector selecciona el primer elemento que coincide con un selector CSS, mientras que querySelectorAll selecciona todos los elementos que coinciden con el selector.

javascript
"En este ejemplo, usamos querySelector para seleccionar el primer párrafo y querySelectorAll para seleccionar todos los párrafos de la página. Luego imprimimos el texto del primer párrafo y la cantidad total de párrafos."

getElementsByClassName y getElementsByTagName

Estos métodos permiten seleccionar elementos basados en su clase o en su etiqueta HTML.

javascript
"Aquí utilizamos getElementsByClassName para seleccionar todos los elementos con la clase btn y getElementsByTagName para seleccionar todos los elementos div. Luego imprimimos la cantidad de botones y divs en la página."

Modificación de Contenido y Atributos

Una vez que has seleccionado un elemento, puedes modificar su contenido, atributos y estilos utilizando JavaScript.

Modificación de Texto

Puedes cambiar el contenido de texto de un elemento utilizando textContent o innerHTML.

javascript
"En este ejemplo, seleccionamos un elemento con el identificador title y cambiamos su contenido de texto a New Title usando textContent."

Modificación de Atributos

Puedes modificar los atributos de un elemento utilizando setAttribute o accediendo directamente a las propiedades del elemento.

javascript
"Aquí seleccionamos un enlace usando querySelector y cambiamos su atributo href para que apunte a example.com. También cambiamos el atributo target para que el enlace se abra en una nueva pestaña."

Estilos y Clases

JavaScript también te permite cambiar los estilos y clases CSS de los elementos.

Modificación de Estilos Inline

Puedes modificar los estilos directamente utilizando la propiedad style del elemento.

javascript
"En este ejemplo, seleccionamos un elemento con la clase box y cambiamos su color de fondo a azul y su ancho a doscientos píxeles utilizando la propiedad style."

Añadir y Eliminar Clases

Para modificar las clases CSS de un elemento, puedes utilizar los métodos classList.add, classList.remove, o classList.toggle.

javascript
"Aquí seleccionamos un botón con la clase btn. Añadimos la clase active utilizando classList.add, eliminamos la clase inactive con classList.remove, y alternamos la clase highlight con classList.toggle."

Eventos en JavaScript

Los eventos permiten que JavaScript responda a las interacciones del usuario, como hacer clic en un botón, mover el ratón o enviar un formulario. Puedes usar el método addEventListener para escuchar eventos y ejecutar una función cuando ocurra un evento específico.

Evento de Clic

javascript
"Aquí añadimos un listener al botón con el identificador myButton. Cuando se hace clic en el botón, se imprime el mensaje Button clicked en la consola."

Otros Eventos Comunes

Algunos eventos comunes en JavaScript son:

  • mouseover: cuando el ratón pasa sobre un elemento.
  • keydown: cuando una tecla es presionada.
  • submit: cuando un formulario es enviado.
javascript
"En este ejemplo, añadimos un listener a un campo de entrada para detectar cuando se presiona una tecla. Imprimimos el nombre de la tecla presionada en la consola."

Conclusión

En este capítulo, has aprendido a manipular el DOM utilizando JavaScript para seleccionar, modificar y reaccionar a eventos en los elementos HTML. La capacidad de interactuar dinámicamente con la página web es lo que hace a JavaScript tan poderoso.

Volver al capítulo anterior
Marcar como leìdo y continuar
Pregúntame lo que sea