DOM

El DOM (Document Object Model) es una representación en forma de árbol de la estructura de un documento HTML (o XML). El DOM proporciona una interfaz que permite acceder y manipular los elementos y contenido de un documento web.

En JavaScript, podemos interactuar con el DOM para realizar diversas tareas, como acceder a elementos HTML, modificar su contenido, agregar o eliminar elementos, cambiar estilos y manejar eventos.

A continuación, te mostraré un ejemplo básico de cómo acceder y manipular el DOM utilizando JavaScript:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
 
<body>
    <h1 id="titulo">Título</h1>
    <p id="parrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
    <button id="boton">Haz clic</button>
 
    <script>
        // Acceder a un elemento HTML
        const titulo = document.getElementById("titulo");
        console.log(titulo);
 
        // Modificar el contenido de un elemento HTML
        titulo.textContent = "Nuevo título";
 
        // Agregar un evento a un elemento HTML
        const boton = document.getElementById("boton");
        boton.addEventListener("click", () => {
            console.log("Haz hecho clic en el botón");
        });
    </script>
</body>
</html>

En este ejemplo, accedemos a un elemento HTML utilizando el método getElementById y lo almacenamos en una variable llamada titulo. Luego, modificamos el contenido del elemento utilizando la propiedad textContent. Finalmente, agregamos un evento al botón utilizando el método addEventListener.

Aqui podemos ver otro ejemplo de como acceder y manipular el DOM utilizando JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Manipulación del DOM</title>
</head>
<body>
  <h1 id="titulo">¡Hola, Mundo!</h1>
  <p id="parrafo">Este es un párrafo de ejemplo.</p>
 
  <script>
    // Acceder a elementos del DOM
    const tituloElemento = document.getElementById("titulo");
    const parrafoElemento = document.getElementById("parrafo");
 
    // Modificar contenido de elementos
    tituloElemento.textContent = "¡Hola, UDD!";
    parrafoElemento.innerHTML = "Este es un párrafo modificado.";
 
    // Agregar un nuevo elemento
    const nuevoElemento = document.createElement("p");
    nuevoElemento.textContent = "Este es un nuevo párrafo.";
    document.body.appendChild(nuevoElemento);
 
    // Cambiar estilos
    tituloElemento.style.color = "red";
    parrafoElemento.style.fontSize = "20px";
 
    // Manejar eventos
    tituloElemento.addEventListener("click", function() {
      alert("¡Haz hecho clic en el título!");
    });
  </script>
</body>
</html>

En este ejemplo, utilizamos JavaScript dentro de la etiqueta <script> para acceder y manipular el DOM. Algunas acciones que realizamos son:

Acceder a elementos del DOM utilizando getElementById.
Modificar el contenido de elementos utilizando textContent y innerHTML.
Crear un nuevo elemento utilizando createElement y agregarlo al DOM utilizando appendChild.
Cambiar estilos utilizando la propiedad style.
Manejar eventos utilizando addEventListener.

Recuerda que el DOM puede tener una estructura más compleja, con elementos anidados y diferentes atributos. Sin embargo, el ejemplo anterior te da una idea básica de cómo interactuar con el DOM utilizando JavaScript.

Buenas prácticas

Algunas buenas prácticas para trabajar con el DOM son:

Cachea las referencias a elementos del DOM: Al acceder a elementos del DOM utilizando métodos como getElementById o querySelector, almacena esas referencias en variables para evitar buscar los elementos repetidamente. Esto mejora el rendimiento y evita el código redundante.

// Mala práctica: Acceder al elemento del DOM cada vez que se necesita
document.getElementById("myElement").textContent = "Hola";
 
// Buena práctica: Almacenar la referencia del elemento en una variable
const myElement = document.getElementById("myElement");
myElement.textContent = "Hola";

Utiliza eventos delegados: En lugar de adjuntar un controlador de eventos a cada elemento individualmente, considera utilizar eventos delegados. Esto implica adjuntar el controlador de eventos a un elemento superior que contiene a todos los elementos objetivo. Luego, puedes utilizar la propiedad event.target para identificar el elemento específico que desencadenó el evento.

// Mala práctica: Adjuntar un controlador de eventos a cada elemento
const button1 = document.getElementById("button1");
button1.addEventListener("click", function() {
  // Lógica del evento para button1
});
 
const button2 = document.getElementById("button2");
button2.addEventListener("click", function() {
  // Lógica del evento para button2
});
 
// Buena práctica: Utilizar eventos delegados
const container = document.getElementById("container");
container.addEventListener("click", function(event) {
  if (event.target.matches("button")) {
    // Lógica del evento para los botones
  }
});

Evita la manipulación excesiva del DOM: Realizar muchas modificaciones al DOM puede ser costoso en términos de rendimiento. En lugar de hacer múltiples cambios, considera agrupar las modificaciones en un solo bloque utilizando fragmentos de documento o manipulando cadenas de texto, y luego realizar una sola modificación al DOM.

// Mala práctica: Modificar el DOM varias veces
const container = document.getElementById("container");
container.innerHTML = "";
container.appendChild(element1);
container.appendChild(element2);
container.appendChild(element3);
 
// Buena práctica: Agrupar las modificaciones y realizar una sola modificación
const container = document.getElementById("container");
const fragment = document.createDocumentFragment();
fragment.appendChild(element1);
fragment.appendChild(element2);
fragment.appendChild(element3);
container.innerHTML = "";
container.appendChild(fragment);

Elimina los event listeners: Si adjuntas un event listener a un elemento y posteriormente ya no lo necesitas, asegúrate de eliminarlo para evitar posibles fugas de memoria. Puedes utilizar el método removeEventListener para eliminar el event listener asociado a un elemento.

// Mala práctica: No eliminar el event listener
const button = document.getElementById("myButton");
button.addEventListener("click", myFunction);
 
// Buena práctica: Eliminar el event listener cuando ya no se necesita
const button = document.getElementById("myButton");
button.addEventListener("click", myFunction);
 
// Cuando ya no se necesita el event listener
button.removeEventListener("click", myFunction);

Estas son solo algunas buenas prácticas al trabajar con el DOM en JavaScript. Recuerda que cada caso puede ser diferente y es importante adaptar las prácticas según las necesidades de tu proyecto.

Eventos

Los eventos en JavaScript son acciones o sucesos que ocurren en el navegador y a los que podemos responder mediante la ejecución de código. Los eventos pueden ser desencadenados por el usuario (por ejemplo, hacer clic en un elemento, mover el mouse sobre un elemento, presionar una tecla) o pueden ser eventos generados por el propio navegador (por ejemplo, cargar la página, cambiar el tamaño de la ventana).

Para trabajar con eventos en JavaScript, generalmente utilizamos el método addEventListener para adjuntar un controlador de eventos a un elemento del DOM. El controlador de eventos es una función que se ejecutará cuando ocurra el evento.

A continuación, te mostraré un ejemplo básico de cómo trabajar con eventos en JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Eventos en JavaScript</title>
</head>
<body>
  <button id="myButton">Haz clic aquí</button>
 
  <script>
    // Obtener una referencia al elemento del botón
    const button = document.getElementById("myButton");
 
    // Adjuntar un controlador de eventos al botón
    button.addEventListener("click", function() {
      alert("¡Has hecho clic en el botón!");
    });
  </script>
</body>
</html>

En este ejemplo, utilizamos JavaScript dentro de la etiqueta <script> para trabajar con eventos. Algunas acciones que realizamos son:

Utilizar getElementById para obtener una referencia al elemento del botón.
Utilizar addEventListener para adjuntar un controlador de eventos al botón.
El controlador de eventos es una función anónima que se ejecutará cuando ocurra el evento de clic en el botón. En este caso, muestra un mensaje emergente utilizando alert.

Existen muchos eventos disponibles en JavaScript, como click, mouseenter, keydown, submit, entre otros. Puedes consultar la documentación oficial de eventos en JavaScript para obtener más información sobre los diferentes tipos de eventos y cómo utilizarlos.

Recuerda que los eventos son fundamentales para interactuar con los usuarios y responder a sus acciones en el navegador. Al utilizar eventos de manera efectiva, puedes crear interacciones dinámicas y enriquecer la experiencia del usuario en tu sitio web o aplicación.

Selección del DOM

La selección de elementos del DOM en JavaScript se refiere a la capacidad de acceder a elementos específicos dentro de la estructura del documento HTML utilizando métodos y selectores proporcionados por el DOM. Esto nos permite interactuar y manipular los elementos de una página web de forma programática.

Existen varios métodos y selectores que podemos utilizar para seleccionar elementos del DOM. A continuación, te mostraré algunos ejemplos:

getElementById

El método getElementById permite seleccionar un elemento por su ID, que debe ser único en el documento HTML. Devuelve el primer elemento que coincide con el ID especificado.

const element = document.getElementById('myElement');

getElementsByClassName

El método getElementsByClassName permite seleccionar elementos por su clase. Devuelve una lista de elementos que tienen la clase especificada.

const elements = document.getElementsByClassName('myClass');

getElementsByTagName

El método getElementsByTagName permite seleccionar elementos por su etiqueta. Devuelve una lista de elementos que tienen la etiqueta especificada.

const elements = document.getElementsByTagName('div');

querySelector

El método querySelector permite seleccionar un elemento utilizando un selector CSS. Devuelve el primer elemento que coincide con el selector especificado.

const element = document.querySelector('#myElement');

querySelectorAll

El método querySelectorAll permite seleccionar elementos utilizando un selector CSS. Devuelve una lista de todos los elementos que coinciden con el selector especificado.

const elements = document.querySelectorAll('.myClass');

En el siguiente ejemplo, utilizaremos todos los métodos y selectores mencionados anteriormente para seleccionar elementos del DOM.

<!DOCTYPE html>
<html>
<head>
  <title>Selección de elementos del DOM</title>
</head>
<body>
  <h1 id="titulo">Título</h1>
  <p class="parrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
  <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
  </ul>
  <div>
    <p>Texto 1</p>
    <p>Texto 2</p>
    <p>Texto 3</p>
  </div>
 
  <script>
    // getElementById: selecciona un elemento por su id
    const titulo = document.getElementById('titulo');
    console.log(titulo);
 
    // getElementsByClassName: selecciona elementos por su clase
    const parrafos = document.getElementsByClassName('parrafo');
    console.log(parrafos);
 
    // getElementsByTagName: selecciona elementos por su etiqueta
    const elementosLista = document.getElementsByTagName('li');
    console.log(elementosLista);
 
    // querySelector: selecciona el primer elemento que coincide con un selector CSS
    const texto1 = document.querySelector('div p');
    console.log(texto1);
 
    // querySelectorAll: selecciona todos los elementos que coinciden con un selector CSS
    const todosLosParrafos = document.querySelectorAll('p');
    console.log(todosLosParrafos);
  </script>
</body>
</html>

En este ejemplo, utilizamos diferentes métodos para seleccionar elementos del DOM:

getElementById: Utilizamos document.getElementById('titulo') para seleccionar el elemento <h1> con el id "titulo". El elemento seleccionado se almacena en la variable titulo.
getElementsByClassName: Utilizamos document.getElementsByClassName('parrafo') para seleccionar todos los elementos con la clase "parrafo". Los elementos seleccionados se almacenan en la variable parrafos.
getElementsByTagName: Utilizamos document.getElementsByTagName('li') para seleccionar todos los elementos <li>. Los elementos seleccionados se almacenan en la variable elementosLista.
querySelector: Utilizamos document.querySelector('div p') para seleccionar el primer elemento <p> que se encuentra dentro de un elemento <div>. El elemento seleccionado se almacena en la variable texto1.
querySelectorAll: Utilizamos document.querySelectorAll('p') para seleccionar todos los elementos <p> en el documento. Los elementos seleccionados se almacenan en la variable todosLosParrafos.

En cada caso, utilizamos console.log para mostrar los elementos seleccionados en la consola del navegador.

Ten en cuenta que estos métodos de selección de elementos te permiten interactuar y manipular los elementos del DOM de diferentes formas. Puedes acceder a sus propiedades, modificar su contenido, aplicar estilos, agregar o eliminar elementos, y mucho más.

Estos son solo algunos ejemplos de cómo seleccionar elementos del DOM en JavaScript. Además de los métodos mencionados, existen otros métodos y selectores más avanzados que permiten una selección más precisa y flexible.

Recuerda que al seleccionar elementos del DOM, es importante tener en cuenta la estructura del documento HTML y utilizar selectores adecuados para acceder a los elementos deseados. También puedes utilizar las referencias almacenadas en variables para acceder a los elementos seleccionados y manipularlos de manera más eficiente.

Crear elementos

Para crear elementos en el DOM utilizando JavaScript, podemos utilizar el método createElement. Este método nos permite crear un nuevo elemento HTML con la etiqueta especificada y luego podemos agregarlo al DOM utilizando métodos como appendChild o insertBefore.

A continuación, te mostraré un ejemplo de cómo crear elementos en el DOM:

<!DOCTYPE html>
<html>
<head>
  <title>Creación de elementos en JavaScript</title>
</head>
<body>
  <div id="container"></div>
 
  <script>
    // Obtener una referencia al contenedor
    const container = document.getElementById('container');
 
    // Crear un nuevo elemento
    const newElement = document.createElement('p');
 
    // Asignar contenido al nuevo elemento
    newElement.textContent = 'Este es un nuevo párrafo creado con JavaScript';
 
    // Agregar el nuevo elemento al contenedor
    container.appendChild(newElement);
  </script>
</body>
</html>

En este ejemplo, utilizamos JavaScript dentro de la etiqueta <script> para crear un nuevo elemento p y agregarlo al DOM. Aquí está el flujo de trabajo:

Utilizamos getElementById para obtener una referencia al elemento del contenedor.
Creamos un nuevo elemento utilizando createElement y especificamos la etiqueta deseada, en este caso, p.
Asignamos contenido al nuevo elemento utilizando la propiedad textContent.
Agregamos el nuevo elemento al contenedor utilizando appendChild.

Al ejecutar este código, verás que se agrega un nuevo párrafo al contenedor en la página web.

Recuerda que una vez que has creado un elemento, puedes manipularlo aún más, agregarle atributos, estilos o incluso adjuntar eventos a él antes de agregarlo al DOM. El método createElement es muy útil para generar elementos de forma dinámica y personalizada en respuesta a la lógica de tu aplicación.

Eventos del dom

Los eventos del DOM son acciones o sucesos que ocurren en los elementos del documento HTML y a los cuales se puede responder mediante la ejecución de código JavaScript. Los eventos permiten interactuar con los usuarios y capturar sus acciones, como hacer clic en un elemento, mover el mouse, escribir en un campo de texto, entre otros.

JavaScript proporciona diferentes métodos para adjuntar y manejar eventos en los elementos del DOM. A continuación, te mostraré algunos ejemplos de eventos comunes y cómo trabajar con ellos:

onchange

El evento onchange se desencadena cuando el valor de un elemento cambia y pierde el foco, como en el caso de los campos de entrada de texto o las listas desplegables.

<input type="text" onchange="miFuncion()">

En este ejemplo, cuando el usuario cambie el valor del campo de entrada y salga del mismo, se ejecutará la función miFuncion().

onclick

El evento onclick se desencadena cuando se hace clic en un elemento, como un botón o un enlace.

<button onclick="miFuncion()">Haz clic</button>

En este ejemplo, cuando el usuario haga clic en el botón, se ejecutará la función miFuncion().

onmouseover y onmouseout

Los eventos onmouseover y onmouseout se desencadenan cuando el cursor del mouse se mueve sobre un elemento o sale de él, respectivamente.

<div onmouseover="miFuncion()" onmouseout="miOtraFuncion()"></div>

En este ejemplo, cuando el cursor del mouse se mueva sobre el elemento div, se ejecutará la función miFuncion(), y cuando el cursor del mouse salga del elemento div, se ejecutará la función miOtraFuncion().

onkeydown

El evento onkeydown se desencadena cuando se presiona una tecla del teclado mientras un elemento tiene el foco, como un campo de entrada de texto.

<input type="text" onkeydown="miFuncion(event)">

En este ejemplo, cuando el usuario presione una tecla mientras el campo de entrada de texto tiene el foco, se ejecutará la función miFuncion() y se pasará el evento como argumento.

Evento click

El evento click se desencadena cuando se hace clic en un elemento.

const button = document.getElementById('myButton');
 
button.addEventListener('click', function() {
  // Lógica a ejecutar cuando se hace clic en el botón
});

Evento submit

El evento submit se desencadena cuando se envía un formulario.

const form = document.getElementById('myForm');
 
form.addEventListener('submit', function(event) {
  event.preventDefault(); // Evita que el formulario se envíe
 
  // Lógica a ejecutar cuando se envía el formulario
});

Evento input

El evento input se desencadena cuando se realiza un cambio en un campo de entrada, como un campo de texto.

const input = document.getElementById('myInput');
 
input.addEventListener('input', function() {
  // Lógica a ejecutar cuando cambia el valor del campo de entrada
});

Evento mouseover y mouseout

Los eventos mouseover y mouseout se desencadenan cuando el mouse se mueve sobre un elemento y sale de él, respectivamente.

const element = document.getElementById('myElement');
 
element.addEventListener('mouseover', function() {
  // Lógica a ejecutar cuando el mouse se mueve sobre el elemento
});
 
element.addEventListener('mouseout', function() {
  // Lógica a ejecutar cuando el mouse sale del elemento
});

Recomendación

Es importante tener en cuenta que los atributos de eventos en línea, como onchange, onclick, etc., se utilizan comúnmente para casos sencillos. Sin embargo, en situaciones más complejas, se recomienda utilizar el método addEventListener para adjuntar eventos de manera más flexible y separar el código JavaScript del HTML.

<button id="myButton">Haz clic</button>
 
<script>
  const button = document.getElementById("myButton");
 
  button.addEventListener("click", function() {
    // Lógica del evento onclick utilizando addEventListener
    miFuncion();
  });
</script>

En este caso, se utiliza addEventListener para adjuntar el evento click al botón y ejecutar la función miFuncion() cuando se hace clic en el botón.

En el siguiente ejemplo utilizaremos algunos de los eventos del DOM que hemos visto hasta ahora:

<!DOCTYPE html>
<html>
<head>
  <title>Eventos del DOM</title>
</head>
<body>
  <h1>Eventos del DOM</h1>
  <input type="text" id="inputText" onchange="mostrarMensaje()">
  <button onclick="cambiarColor()">Haz clic</button>
  <p onmouseover="mostrarMensaje('¡Pasaste el mouse por encima!')" onmouseout="mostrarMensaje('¡Mouse fuera!')">Pasa el mouse aquí</p>
  <input type="text" onkeydown="mostrarTecla(event)">
 
  <script>
    function mostrarMensaje(mensaje) {
      if (mensaje) {
        console.log(mensaje);
      } else {
        console.log("El valor del input ha cambiado");
      }
    }
 
    function cambiarColor() {
      document.body.style.backgroundColor = "red";
    }
 
    function mostrarTecla(event) {
      console.log("Tecla presionada: " + event.key);
    }
  </script>
</body>
</html>

En este ejemplo, se utilizan diferentes eventos del DOM:

onchange: Se utiliza en un campo de entrada de texto (<input>) con el atributo onchange="mostrarMensaje()". Cuando el valor del campo de entrada cambia y se pierde el enfoque del campo, se ejecuta la función mostrarMensaje(). En este caso, la función muestra un mensaje en la consola indicando que el valor del input ha cambiado.
onclick: Se utiliza en un botón (<button>) con el atributo onclick="cambiarColor()". Cuando se hace clic en el botón, se ejecuta la función cambiarColor(). En este caso, la función cambia el color de fondo del <body> a rojo.
onmouseover y onmouseout: Se utilizan en un párrafo (<p>) con los atributos onmouseover="mostrarMensaje('¡Pasaste el mouse por encima!')" y onmouseout="mostrarMensaje('¡Mouse fuera!')". Cuando el cursor del mouse se mueve sobre el párrafo, se ejecuta la función mostrarMensaje() con el mensaje correspondiente. Cuando el cursor se mueve fuera del párrafo, también se ejecuta la función mostrarMensaje() con el mensaje correspondiente.
onkeydown: Se utiliza en un campo de entrada de texto (<input>) con el atributo onkeydown="mostrarTecla(event)". Cuando se presiona una tecla mientras el campo de entrada tiene el foco, se ejecuta la función mostrarTecla() y se pasa como argumento el evento (event) que contiene información sobre la tecla presionada. En este caso, la función muestra en la consola la tecla presionada.

Cada evento está asociado a una función que se ejecuta cuando ocurre ese evento en el elemento correspondiente. Puedes personalizar las funciones y los mensajes según tus necesidades y agregar más lógica para interactuar con los elementos del DOM en respuesta a los eventos.

Estos son solo algunos ejemplos de eventos comunes que se pueden utilizar en JavaScript. Existen muchos más eventos disponibles, como keydown, keyup, change, focus, blur, entre otros. Puedes consultar la documentación oficial de eventos en JavaScript para obtener más información sobre los diferentes tipos de eventos y cómo utilizarlos.

Recuerda que los eventos son una parte fundamental de la interacción con los usuarios en una página web, y mediante su uso adecuado, puedes capturar y responder a las acciones del usuario para crear una experiencia interactiva y dinámica.

Agregar eventos a elementos en JavaScript

Para agregar eventos a los elementos del DOM en JavaScript, puedes utilizar el método addEventListener. Este método te permite adjuntar un controlador de eventos a un elemento específico y especificar qué código se ejecutará cuando ocurra ese evento en particular.

A continuación, te muestro un ejemplo de cómo agregar eventos a los elementos del DOM utilizando addEventListener:

<!DOCTYPE html>
<html>
<head>
  <title>Agregar eventos a elementos en JavaScript</title>
</head>
<body>
  <button id="myButton">Haz clic aquí</button>
 
  <script>
    // Obtener una referencia al elemento del botón
    const button = document.getElementById('myButton');
 
    // Agregar un controlador de eventos al botón
    button.addEventListener('click', function() {
      // Lógica a ejecutar cuando se hace clic en el botón
      console.log('Se hizo clic en el botón');
    });
  </script>
</body>
</html>

En este ejemplo, utilizamos JavaScript dentro de la etiqueta <script> para agregar un evento click al botón. Aquí está el flujo de trabajo:

Utilizamos getElementById para obtener una referencia al elemento del botón.
Utilizamos addEventListener para adjuntar un controlador de eventos al botón y especificamos el tipo de evento (click) y la función que se ejecutará cuando ocurra el evento.
Dentro de la función del controlador de eventos, escribimos el código que deseamos que se ejecute cuando el evento ocurra. En este caso, simplemente mostramos un mensaje en la consola.

Al ejecutar este código y hacer clic en el botón, verás que se muestra el mensaje "Se hizo clic en el botón" en la consola.

Puedes agregar múltiples eventos a un elemento, simplemente llamando a addEventListener con diferentes tipos de eventos y funciones de controladores.

Recuerda que el método addEventListener también te permite adjuntar eventos a otros elementos del DOM, como campos de entrada, enlaces, elementos de lista, etc. Simplemente necesitas obtener una referencia al elemento deseado y llamar a addEventListener para agregar el evento correspondiente.

Además, puedes utilizar funciones anónimas como en el ejemplo anterior o también puedes utilizar funciones definidas por separado para tus controladores de eventos, lo que puede facilitar el mantenimiento y la reutilización de código.

Manipulación de atributos

La manipulación de atributos en JavaScript nos permite acceder y modificar los atributos de los elementos del DOM. Podemos agregar, modificar y eliminar atributos utilizando métodos y propiedades proporcionados por el DOM.

A continuación, te muestro algunos ejemplos de cómo manipular atributos en JavaScript:

Acceder a un atributo

Para acceder al valor de un atributo de un elemento, podemos utilizar la propiedad getAttribute del elemento.

<img id="myImage" src="imagen.jpg" alt="Imagen de ejemplo">

const image = document.getElementById('myImage');
const src = image.getAttribute('src');
const alt = image.getAttribute('alt');
 
console.log(src); // Resultado: imagen.jpg
console.log(alt); // Resultado: Imagen de ejemplo

En este ejemplo, utilizamos getAttribute para obtener los valores de los atributos src y alt de la imagen.

Modificar un atributo

Para modificar el valor de un atributo de un elemento, podemos utilizar el método setAttribute del elemento.

<img id="myImage" src="imagen.jpg" alt="Imagen de ejemplo">

const image = document.getElementById('myImage');
image.setAttribute('src', 'nueva-imagen.jpg');
image.setAttribute('alt', 'Nueva imagen de ejemplo');

En este ejemplo, utilizamos setAttribute para cambiar los valores de los atributos src y alt de la imagen.

Eliminar un atributo

Para eliminar un atributo de un elemento, podemos utilizar el método removeAttribute del elemento.

<img id="myImage" src="imagen.jpg" alt="Imagen de ejemplo">

const image = document.getElementById('myImage');
image.removeAttribute('alt');

En este ejemplo, utilizamos removeAttribute para eliminar el atributo alt de la imagen.

En el siguiente ejemplo utilizaremos los métodos mencionados anteriormente para manipular atributos en JavaScript.

<!DOCTYPE html>
<html>
<head>
  <title>Manipulación de atributos del DOM</title>
</head>
<body>
  <h1 id="titulo">Título</h1>
  <img src="imagen.jpg" alt="Imagen" id="imagen" width="200" height="200">
  <button onclick="mostrarAtributo()">Mostrar Atributo</button>
  <button onclick="cambiarAtributo()">Cambiar Atributo</button>
  <button onclick="verificarAtributo()">Verificar Atributo</button>
  <button onclick="eliminarAtributo()">Eliminar Atributo</button>
 
  <script>
    function mostrarAtributo() {
      const imagen = document.getElementById('imagen');
      const src = imagen.getAttribute('src');
      console.log('Atributo src:', src);
    }
 
    function cambiarAtributo() {
      const imagen = document.getElementById('imagen');
      imagen.setAttribute('src', 'nueva-imagen.jpg');
      imagen.setAttribute('alt', 'Nueva Imagen');
      console.log('Atributos cambiados');
    }
 
    function verificarAtributo() {
      const imagen = document.getElementById('imagen');
      const tieneAlt = imagen.hasAttribute('alt');
      console.log('¿La imagen tiene el atributo alt?', tieneAlt);
    }
 
    function eliminarAtributo() {
      const imagen = document.getElementById('imagen');
      imagen.removeAttribute('width');
      imagen.removeAttribute('height');
      console.log('Atributos eliminados');
    }
  </script>
</body>
</html>

En este ejemplo, utilizamos diferentes métodos para manipular atributos de elementos del DOM:

getAttribute: En la función mostrarAtributo(), utilizamos getAttribute('src') para obtener el valor del atributo src de la imagen. Luego, mostramos el valor del atributo en la consola.
setAttribute: En la función cambiarAtributo(), utilizamos setAttribute('src', 'nueva-imagen.jpg') para cambiar el valor del atributo src de la imagen por "nueva-imagen.jpg". También utilizamos setAttribute('alt', 'Nueva Imagen') para cambiar el valor del atributo alt de la imagen. Luego, mostramos un mensaje en la consola indicando que los atributos han sido cambiados.
hasAttribute: En la función verificarAtributo(), utilizamos hasAttribute('alt') para verificar si la imagen tiene el atributo alt. Mostramos un mensaje en la consola indicando si la imagen tiene o no el atributo.
removeAttribute: En la función eliminarAtributo(), utilizamos removeAttribute('width') y removeAttribute('height') para eliminar los atributos width y height de la imagen. Mostramos un mensaje en la consola indicando que los atributos han sido eliminados.

Puedes utilizar estos métodos para acceder, modificar, verificar y eliminar atributos de elementos del DOM según tus necesidades. Recuerda que los nombres de los atributos deben coincidir exactamente con los nombres utilizados en el código HTML.

Recuerda que los atributos también pueden tener eventos asociados. Si deseas agregar o eliminar eventos específicos, puedes utilizar los métodos addEventListener y removeEventListener, respectivamente.

La manipulación de atributos en JavaScript es útil cuando necesitas cambiar dinámicamente los valores de los atributos de los elementos del DOM. Esto puede ser útil para actualizar imágenes, cambiar textos alternativos, actualizar enlaces, etc.

Es importante tener en cuenta que algunos atributos, como id y class, también tienen propiedades correspondientes en los elementos del DOM. Puedes acceder y modificar estas propiedades directamente en lugar de utilizar los métodos getAttribute y setAttribute.

Recuerda que al manipular atributos, debes tener en cuenta la estructura y la semántica adecuada de tu documento HTML y asegurarte de seguir las buenas prácticas para mantener un código limpio y mantenible.

LocalStorage

El Local Storage es una característica del navegador web que permite almacenar datos en el dispositivo del usuario de forma persistente. Es una forma de almacenamiento de datos clave-valor similar a las cookies, pero con una mayor capacidad y sin enviar los datos al servidor con cada solicitud.

En JavaScript, puedes utilizar el objeto localStorage para interactuar con el Local Storage y almacenar y recuperar datos en él. A continuación, te muestro algunos ejemplos de cómo utilizar el Local Storage:

Almacenar datos en el Local Storage

Para almacenar datos en el Local Storage, utilizamos la propiedad localStorage seguida del método setItem. Este método recibe dos argumentos: la clave (key) y el valor (value) que deseamos almacenar.

localStorage.setItem('nombre', 'John');
localStorage.setItem('edad', '30');

En este ejemplo, almacenamos dos pares clave-valor en el Local Storage. La clave 'nombre' tiene el valor 'John' y la clave 'edad' tiene el valor '30'.

Recuperar datos del Local Storage

Para recuperar datos del Local Storage, utilizamos el método getItem, que recibe la clave del dato que queremos obtener y devuelve su valor.

const nombre = localStorage.getItem('nombre');
const edad = localStorage.getItem('edad');
 
console.log(nombre); // Resultado: 'John'
console.log(edad); // Resultado: '30'

En este ejemplo, recuperamos los valores almacenados en el Local Storage utilizando las claves 'nombre' y 'edad'.

Eliminar datos del Local Storage

Para eliminar datos del Local Storage, utilizamos el método removeItem, que recibe la clave del dato que queremos eliminar.

localStorage.removeItem('nombre');

En este ejemplo, eliminamos el dato almacenado en el Local Storage con la clave 'nombre'.

Borrar todos los datos del Local Storage

Si deseas eliminar todos los datos almacenados en el Local Storage, puedes utilizar el método clear.

localStorage.clear();

Este método eliminará todos los datos almacenados en el Local Storage.

Es importante tener en cuenta que los datos almacenados en el Local Storage están disponibles incluso después de cerrar y volver a abrir el navegador. Sin embargo, los datos del Local Storage son específicos del dominio y solo pueden ser accedidos por el mismo dominio que los almacenó.

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de Local Storage</title>
</head>
<body>
  <h1>Local Storage Example</h1>
  <input type="text" id="nameInput" placeholder="Ingresa tu nombre">
  <button onclick="guardarNombre()">Guardar</button>
  <p id="mensaje"></p>
 
  <script>
    function guardarNombre() {
      const nombre = document.getElementById('nameInput').value;
      localStorage.setItem('nombre', nombre);
      document.getElementById('mensaje').textContent = 'Nombre guardado en el Local Storage.';
    }
 
    window.addEventListener('DOMContentLoaded', function() {
      const nombreGuardado = localStorage.getItem('nombre');
      if (nombreGuardado) {
        document.getElementById('nameInput').value = nombreGuardado;
        document.getElementById('mensaje').textContent = 'Nombre cargado desde el Local Storage.';
      }
    });
  </script>
</body>
</html>

En este ejemplo, se muestra una página web simple que tiene un campo de entrada de texto para ingresar un nombre, un botón para guardar el nombre en el Local Storage y un párrafo donde se muestra un mensaje relacionado con el uso del Local Storage.

Cuando se hace clic en el botón "Guardar", se obtiene el valor del campo de entrada de texto y se almacena en el Local Storage utilizando localStorage.setItem.
Cuando la página se carga por primera vez (utilizando el evento DOMContentLoaded), se verifica si hay un nombre guardado en el Local Storage utilizando localStorage.getItem. Si hay un nombre guardado, se muestra en el campo de entrada de texto y se muestra un mensaje en el párrafo indicando que se cargó desde el Local Storage.

De esta manera, cada vez que se ingrese un nombre y se haga clic en el botón "Guardar", el nombre se almacenará en el Local Storage y se mantendrá incluso si la página se actualiza o se cierra y se vuelve a abrir.

El Local Storage es útil para almacenar datos de forma persistente en el navegador, como preferencias del usuario, estado de la aplicación, datos de inicio de sesión, entre otros. Sin embargo, ten en cuenta que el Local Storage tiene una capacidad limitada y no debe ser utilizado para almacenar información sensible o excesivamente grande.

Recuerda utilizar el Local Storage de manera responsable y limpiar los datos innecesarios para mantener un buen rendimiento y una experiencia de usuario satisfactoria.

Elementos dinámicos

Elementos dinámicos se refiere a la creación y manipulación de elementos HTML de forma dinámica utilizando JavaScript. En lugar de tener todos los elementos HTML predefinidos en el archivo HTML, podemos utilizar JavaScript para crear, agregar, modificar y eliminar elementos HTML en tiempo de ejecución, según las necesidades de nuestra aplicación.

Aquí tienes un ejemplo que muestra cómo crear dinámicamente un elemento <p> y agregarlo al documento:

<!DOCTYPE html>
<html>
<head>
  <title>Elementos Dinámicos</title>
</head>
<body>
  <h1>Elementos Dinámicos</h1>
  <button onclick="agregarParrafo()">Agregar Párrafo</button>
 
  <script>
    function agregarParrafo() {
      const nuevoParrafo = document.createElement('p');
      nuevoParrafo.textContent = 'Este es un párrafo creado dinámicamente';
      document.body.appendChild(nuevoParrafo);
    }
  </script>
</body>
</html>

En este ejemplo, tenemos un botón "Agregar Párrafo" que, al hacer clic, ejecuta la función agregarParrafo(). Esta función utiliza el método createElement para crear dinámicamente un elemento <p>. Luego, establece el contenido de texto del párrafo utilizando la propiedad textContent. Finalmente, utilizamos appendChild para agregar el nuevo párrafo como un hijo del elemento <body>, lo que resulta en la visualización del párrafo en la página.

Este es solo un ejemplo básico, pero en JavaScript puedes realizar muchas más operaciones dinámicas con elementos HTML. Puedes agregar atributos, aplicar estilos, adjuntar eventos, modificar clases y estructuras, y mucho más. La manipulación dinámica de elementos HTML es especialmente útil cuando necesitas crear contenido de forma dinámica, actualizar la interfaz de usuario en respuesta a acciones del usuario o datos cambiantes, y crear aplicaciones interactivas y dinámicas.

Ejercicios DOM

Esta sección contiene ejercicios para practicar los conceptos aprendidos en la sección de DOM.

DOM

Los ejercicios de esta sección se basan en el uso de DOM.

Ejercicio 1 - Crear elementos

Crea una función que reciba un array de strings como parámetro y utilice la función map y la sintaxis de string templates para devolver un nuevo array donde cada elemento corresponda a la siguiente cadena: "El elemento n es nombre", donde n es la posición del elemento en el array y nombre es el valor del elemento.

Solución:

const crearCadenas = nombres => nombres.map((nombre, index) => `El elemento ${index} es ${nombre}`);
 
const nombres = ["Pedro", "Pablo", "María", "Juan"];
 
console.log(crearCadenas(nombres)); // Resultado: ["El elemento 0 es Pedro", "El elemento 1 es Pablo", "El elemento 2 es María", "El elemento 3 es Juan"]

En esta solución, creamos una función crearCadenas que toma un array de nombres y utiliza la función map y la sintaxis de string templates para devolver un nuevo array donde cada elemento corresponda a la siguiente cadena: "El elemento n es nombre", donde n es la posición del elemento en el array y nombre es el valor del elemento. Luego, llamamos a la función con el array ["Pedro", "Pablo", "María", "Juan"] y mostramos el resultado en la consola.

Desafío adicional:

Modifica la función para que también reciba un segundo parámetro que indique el nombre de la etiqueta HTML que se utilizará para crear los elementos.

Ejercicio 2 - Crear elementos

Solución:

const crearCadenas = nombres => nombres.map((nombre, index) => `<li>El elemento ${index} es ${nombre}</li>`);
 
const nombres = ["Pedro", "Pablo", "María", "Juan"];
 
console.log(crearCadenas(nombres)); // Resultado: ["<li>El elemento 0 es Pedro</li>", "<li>El elemento 1 es Pablo</li>", "<li>El elemento 2 es María</li>", "<li>El elemento 3 es Juan</li>"]

Desafío adicional:

Modifica la función para que también reciba un segundo parámetro que indique el nombre de la etiqueta HTML que se utilizará para crear los elementos.

Ejercicio 3 - Botones con acciones

Agregar 3 botones en el HTML que permitan hacer lo siguiente:

El primero agrega un encabezado (H1) en el documento.
En ambos casos tanto al h1 como a la etiqueta p agrega un id único.
El segundo agrega un párrafo (P) en el documento.
El tercero ejecutará un alert con un mensaje.

Solución:

<!DOCTYPE html>
<html>
<head>
  <title>Botones con acciones</title>
</head>
<body>
  <h1 id="titulo"></h1>
  <p id="parrafo"></p>
 
  <button onclick="agregarEncabezado()">Agregar Encabezado</button>
  <button onclick="agregarParrafo()">Agregar Párrafo</button>
  <button onclick="mostrarAlerta()">Mostrar Alerta</button>
 
  <script>
    function agregarEncabezado() {
      const tituloElemento = document.getElementById('titulo');
      tituloElemento.textContent = 'Este es un encabezado';
      tituloElemento.id = 'encabezado'; // Agrega un id único al h1
    }
 
    function agregarParrafo() {
      const parrafoElemento = document.getElementById('parrafo');
      parrafoElemento.textContent = 'Este es un párrafo';
      parrafoElemento.id = 'contenido'; // Agrega un id único al p
    }
 
    function mostrarAlerta() {
      alert('Este es un mensaje de alerta');
    }
  </script>
</body>
</html>

En este ejemplo, hemos agregado los 3 botones requeridos:

El primer botón, al hacer clic en él, ejecuta la función agregarEncabezado(). Esta función obtiene la referencia al elemento <h1> utilizando getElementById y establece el contenido de texto y un id único. En este caso, establecimos el texto del encabezado como "Este es un encabezado" y el id como "encabezado".
El segundo botón, al hacer clic en él, ejecuta la función agregarParrafo(). Esta función obtiene la referencia al elemento <p> utilizando getElementById y establece el contenido de texto y un id único. En este caso, establecimos el texto del párrafo como "Este es un párrafo" y el id como "contenido".
El tercer botón, al hacer clic en él, ejecuta la función mostrarAlerta(). Esta función simplemente muestra un mensaje de alerta con el texto "Este es un mensaje de alerta".

Espero que este ejemplo te ayude a comprender cómo agregar botones en HTML con acciones específicas utilizando JavaScript.

Ejercicio 4 - Manipulación de div con botones

Agregar un div de tamaño 300 x 300 px y 3 botones al HTML y cada botón tendrá un evento que realizará lo siguiente:

El primero cambiará el fondo del div a color rojo.
El segundo le cambiará el tamaño al div a 500 x 500 px.
El tercero le asignará un borde al div

Solución:

<!DOCTYPE html>
<html>
<head>
  <title>Manipulación de div con botones</title>
  <style>
    #myDiv {
      width: 300px;
      height: 300px;
      background-color: gray;
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>
 
  <button onclick="cambiarColor()">Cambiar color a rojo</button>
  <button onclick="cambiarTamaño()">Cambiar tamaño a 500x500 px</button>
  <button onclick="agregarBorde()">Agregar borde</button>
 
  <script>
    const divElement = document.getElementById('myDiv');
 
    function cambiarColor() {
      divElement.style.backgroundColor = 'red';
    }
 
    function cambiarTamaño() {
      divElement.style.width = '500px';
      divElement.style.height = '500px';
    }
 
    function agregarBorde() {
      divElement.style.border = '2px solid black';
    }
  </script>
</body>
</html>

En este ejemplo, hemos agregado un div con un tamaño inicial de 300x300 px y un color de fondo gris. Luego, hemos agregado los 3 botones con eventos asociados:

El primer botón, al hacer clic en él, ejecuta la función cambiarColor(). Esta función cambia el color de fondo del div a rojo mediante la modificación de la propiedad backgroundColor.
El segundo botón, al hacer clic en él, ejecuta la función cambiarTamaño(). Esta función cambia el tamaño del div a 500x500 px mediante la modificación de las propiedades width y height.
El tercer botón, al hacer clic en él, ejecuta la función agregarBorde(). Esta función agrega un borde de 2px de ancho y color negro al div mediante la modificación de la propiedad border.

Puedes personalizar el código CSS y los estilos según tus preferencias para adaptarlo a tu diseño y necesidades.

Ejercicio 5 - Guardar y mostrar lista de nombres

Agregar un input y un botón para guardar una lista de nombres en el local storage. A su vez, cada nombre que se agregue se deberá mostrar en una lista en el documento. Cargar la lista de nombres al recargar la página (Si existen datos guardados). Agregar un botón de eliminar a cada elemento de la lista de nombres y que actualice el la interfaz y el local storage.

Solución:

<!DOCTYPE html>
<html>
<head>
  <title>Guardar y mostrar lista de nombres</title>
</head>
<body>
  <h1>Lista de Nombres</h1>
  <input type="text" id="nameInput" placeholder="Ingrese un nombre">
  <button onclick="agregarNombre()">Guardar</button>
  <ul id="nameList"></ul>
 
  <script>
    const nameInput = document.getElementById('nameInput');
    const nameList = document.getElementById('nameList');
 
    // Función para agregar un nombre a la lista
    function agregarNombre() {
      const nombre = nameInput.value;
      if (nombre) {
        let nombresGuardados = localStorage.getItem('nombres');
        if (nombresGuardados) {
          nombresGuardados = JSON.parse(nombresGuardados);
          nombresGuardados.push(nombre);
        } else {
          nombresGuardados = [nombre];
        }
        localStorage.setItem('nombres', JSON.stringify(nombresGuardados));
        nameInput.value = '';
        mostrarNombres();
      }
    }
 
    // Función para mostrar los nombres en la lista
    function mostrarNombres() {
      nameList.innerHTML = '';
      let nombresGuardados = localStorage.getItem('nombres');
      if (nombresGuardados) {
        nombresGuardados = JSON.parse(nombresGuardados);
        nombresGuardados.forEach(function(nombre) {
          const listItem = document.createElement('li');
          listItem.textContent = nombre;
          const deleteButton = document.createElement('button');
          deleteButton.textContent = 'Eliminar';
          deleteButton.addEventListener('click', function() {
            eliminarNombre(nombre);
          });
          listItem.appendChild(deleteButton);
          nameList.appendChild(listItem);
        });
      }
    }
 
    // Función para eliminar un nombre de la lista
    function eliminarNombre(nombre) {
      let nombresGuardados = localStorage.getItem('nombres');
      if (nombresGuardados) {
        nombresGuardados = JSON.parse(nombresGuardados);
        const indice = nombresGuardados.indexOf(nombre);
        if (indice !== -1) {
          nombresGuardados.splice(indice, 1);
          localStorage.setItem('nombres', JSON.stringify(nombresGuardados));
          mostrarNombres();
        }
      }
    }
 
    // Cargar la lista de nombres al cargar la página
    window.addEventListener('DOMContentLoaded', mostrarNombres);
  </script>
</body>
</html>

En este ejemplo, hemos agregado un campo de entrada de texto (input), un botón para guardar el nombre en el Local Storage y una lista (ul) donde se mostrarán los nombres guardados.

Al hacer clic en el botón "Guardar", se ejecuta la función agregarNombre(). Esta función obtiene el valor del campo de entrada de texto, lo agrega a la lista de nombres en el Local Storage y luego llama a la función mostrarNombres() para actualizar la lista en el documento.
La función mostrarNombres() se encarga de obtener los nombres guardados del Local Storage, iterar sobre ellos y crear elementos de lista (li) para mostrarlos en el documento. Además, agrega un botón "Eliminar" a cada nombre, que al hacer clic ejecuta la función eliminarNombre() para eliminar el nombre correspondiente de la lista.
La función eliminarNombre(nombre) se encarga de buscar y eliminar el nombre de la lista de nombres en el Local Storage y luego llama a la función mostrarNombres() para actualizar la lista en el documento.
Al cargar la página, se llama a la función mostrarNombres() para mostrar la lista de nombres guardados en el Local Storage.
Para guardar los nombres en el Local Storage, se utiliza el método setItem() y para obtenerlos se utiliza el método getItem(). Ambos métodos reciben como primer parámetro el nombre de la clave y como segundo parámetro el valor a guardar o el valor obtenido.

Ejercicio 6 - Guardar y mostrar lista de tareas

Retomando el ejercicio anterior, agregar un botón de eliminar a cada elemento de la lista de nombres y que actualice la interfaz y el local storage

Solución:

<!DOCTYPE html>
<html>
<head>
  <title>Guardar y mostrar lista de nombres</title>
</head>
<body>
  <h1>Lista de Nombres</h1>
  <input type="text" id="nameInput" placeholder="Ingrese un nombre">
  <button onclick="agregarNombre()">Guardar</button>
  <ul id="nameList"></ul>
 
  <script>
    const nameInput = document.getElementById('nameInput');
    const nameList = document.getElementById('nameList');
 
    // Función para agregar un nombre a la lista
    function agregarNombre() {
      const nombre = nameInput.value;
      if (nombre) {
        let nombresGuardados = obtenerNombresGuardados();
        nombresGuardados.push(nombre);
        guardarNombres(nombresGuardados);
        nameInput.value = '';
        mostrarNombres();
      }
    }
 
    // Función para obtener los nombres guardados del Local Storage
    function obtenerNombresGuardados() {
      let nombresGuardados = localStorage.getItem('nombres');
      return nombresGuardados ? JSON.parse(nombresGuardados) : [];
    }
 
    // Función para guardar los nombres en el Local Storage
    function guardarNombres(nombres) {
      localStorage.setItem('nombres', JSON.stringify(nombres));
    }
 
    // Función para mostrar los nombres en la lista
    function mostrarNombres() {
      nameList.innerHTML = '';
      const nombresGuardados = obtenerNombresGuardados();
      nombresGuardados.forEach(function(nombre) {
        const listItem = document.createElement('li');
        listItem.textContent = nombre;
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Eliminar';
        deleteButton.addEventListener('click', function() {
          eliminarNombre(nombre);
        });
        listItem.appendChild(deleteButton);
        nameList.appendChild(listItem);
      });
    }
 
    // Función para eliminar un nombre de la lista
    function eliminarNombre(nombre) {
      let nombresGuardados = obtenerNombresGuardados();
      const indice = nombresGuardados.indexOf(nombre);
      if (indice !== -1) {
        nombresGuardados.splice(indice, 1);
        guardarNombres(nombresGuardados);
        mostrarNombres();
      }
    }
 
    // Cargar la lista de nombres al cargar la página
    window.addEventListener('DOMContentLoaded', mostrarNombres);
  </script>
</body>
</html>

En esta actualización del código, hemos agregado el botón de eliminar en cada elemento de la lista de nombres:

Dentro de la función mostrarNombres(), creamos el botón "Eliminar" para cada nombre en la lista. Al hacer clic en este botón, se ejecuta la función eliminarNombre(nombre) para eliminar el nombre correspondiente de la lista.
La función eliminarNombre(nombre) obtiene los nombres guardados del Local Storage, busca el índice del nombre especificado y lo elimina del array. Luego, guarda la lista actualizada en el Local Storage y llama a la función mostrarNombres() para actualizar la lista en el documento.

De esta manera, cada vez que se agrega un nombre a la lista, se muestra en la interfaz junto con un botón de eliminar que permite eliminar ese nombre de la lista y actualizar tanto la interfaz como el Local Storage.

Espero que este ejercicio sea útil para comprender cómo agregar un botón de eliminar a cada elemento de una lista y actualizar la interfaz y el Local Storage en consecuencia.

Inicio