Comprendiendo los Fundamentos del DOM

El Modelo de Objetos del Documento (DOM) es una interfaz de plataforma cruzada que trata un documento HTML o XML como una estructura jerárquica de nodos. Esta sección te proporcionará una base sólida sobre qué es el DOM y cómo interactuar con él utilizando JavaScript.

¿Qué es el DOM?

El DOM es una representación en memoria de un documento web. Cuando un navegador carga una página web, convierte el HTML en un DOM que puede ser manipulado con JavaScript. El DOM estructura el documento en forma de un árbol de nodos, donde cada elemento HTML se convierte en un nodo.

Componentes Principales del DOM

1. Documento (Document Object): El objeto raíz que representa la página web completa.
2. Elementos (Element Nodes): Representan las etiquetas HTML y forman la estructura del documento.
3. Atributos (Attribute Nodes): Asociados a los elementos, representan las propiedades de las etiquetas HTML.
4. Texto (Text Nodes): Contenido textual dentro de los elementos.

Acceso y Manipulación del DOM con JavaScript

Podemos usar JavaScript para acceder y manipular los nodos del DOM. Algunas de las funciones más comunes incluyen:

• document.getElementById(id): Accede a un elemento por su ID.
• document.getElementsByClassName(className): Accede a todos los elementos con una clase específica.
• document.querySelector(selector): Selecciona el primer elemento que coincide con un selector CSS.
• document.querySelectorAll(selector): Selecciona todos los elementos que coinciden con un selector CSS.

html

Creación y Modificación de Elementos

Además de acceder a los nodos existentes, también podemos crear y modificar elementos dentro del DOM.

• document.createElement(tagName): Crea un nuevo nodo de elemento.
• element.appendChild(newNode): Añade un nodo hijo a un elemento existente.
• element.setAttribute(attribute, value): Establece un atributo para un elemento.

html

Eventos del DOM

Los eventos son una parte fundamental del DOM, permitiendo que las páginas web respondan a las interacciones del usuario. Puedes usar addEventListener para vincular funciones manejadoras a eventos de los elementos.

html

Interacción Avanzada con el DOM

Manipular el DOM no se limita a cambiar texto o manejar eventos. También puedes modificar estilos, eliminar nodos, clonar nodos, y más.

• Modificar Estilos: element.style.property = value;
• Eliminar Nodos: element.removeChild(node);
• Clonar Nodos: element.cloneNode(deep);

html

---

Con una comprensión firme del DOM, estás listo para comenzar a escribir pruebas que verifiquen la correcta manipulación del DOM. En la siguiente sección, aprenderemos a instalar y configurar Jest, la herramienta que utilizaremos para nuestras pruebas en JavaScript.