Aprende ¿Qué es el Modelo de Objetos del Documento (DOM)? | Manipulación del DOM para el Desarrollo Web Interactivo

Ahora que hemos cubierto las clases de JavaScript, cambiemos nuestro enfoque al Modelo de Objetos del Documento (DOM), que es la interfaz que nos permite manipular páginas web. La siguiente sección explorará cómo JavaScript interactúa con el DOM para crear contenido dinámico e interactivo.

Piensa en el DOM como un árbol genealógico. Cada elemento en el documento es como un miembro de la familia, conectado por relaciones: padres, hijos y hermanos.

En el DOM, los elementos, atributos y textos se denominan nodos, y estos nodos se organizan jerárquicamente, igual que los miembros de una familia en un árbol genealógico. Algunos nodos son padres con hijos, mientras que otros son hermanos.

La relación entre HTML y el DOM

Cuando un navegador carga un documento HTML, lee el código HTML y construye un árbol DOM correspondiente. HTML proporciona la estructura estática de la página web, mientras que el DOM es la representación viva y dinámica que JavaScript puede manipular.

HTML define la estructura inicial del árbol genealógico de quién está conectado con quién, pero es estático y no cambia por sí solo;
El DOM es el árbol genealógico en tiempo real, y puede modificarse. Se pueden agregar o eliminar nuevos miembros (elementos), y las relaciones (padre-hijo, hermanos) pueden actualizarse mediante JavaScript.

Por ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
  </body>
</html>

Este HTML crea un árbol genealógico básico con un nodo <html> como padre, y los nodos <head> y <body> como hijos. Dentro del body, <h1> y <p> son hermanos.

Esta estructura es la versión viva e interactiva del HTML en el DOM, donde JavaScript puede manipular las relaciones entre los nodos (miembros de la familia).

Cómo interactúa JavaScript con el DOM

JavaScript puede acceder y manipular el DOM para realizar cambios en el árbol genealógico en tiempo real. Es posible agregar nuevos miembros, eliminar existentes o modificar su información.

Acceso a miembros de la familia: Así como se puede encontrar a una persona específica en un árbol genealógico, JavaScript puede acceder a nodos individuales en el DOM utilizando métodos como document.getElementById() o document.querySelector();
Modificación de información: Una vez que se accede a un miembro de la familia, se pueden actualizar sus detalles. Por ejemplo, JavaScript puede cambiar el contenido de texto o los atributos de un elemento usando propiedades como innerHTML o textContent;
Modificación de relaciones: JavaScript también puede agregar nuevos miembros al árbol o eliminarlos. Esto se realiza manipulando la estructura del DOM con métodos como appendChild() o removeChild().

Ejemplo

Considere este HTML:

<p id="greeting">Hello, World!</p>

Utilizando JavaScript, es posible cambiar el texto del párrafo, de manera similar a actualizar el nombre de un miembro de la familia:

// Access the family member (DOM element) using its ID
const greetingElement = document.getElementById('greeting');

// Modify the family member's details (DOM content)
greetingElement.textContent = 'Hello, JavaScript!';

Después de ejecutar el código JavaScript, el árbol genealógico (DOM) se actualiza y el texto del párrafo cambia de "Hello, World!" a "Hello, JavaScript!"

index.html

index.js

index.css

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 1

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain more about how to access different types of DOM nodes?

What are some common methods for modifying the DOM with JavaScript?

Can you give more examples of how JavaScript can change the structure of a webpage?

Awesome!

Completion rate improved to 2.22

Desliza para mostrar el menú