Antes de profundizar en la utilización de DOM Testing Library, es crucial comprender los fundamentos del Document Object Model (DOM). El DOM es una representación en forma de árbol que permite la manipulación dinámica del contenido, la estructura y el estilo de documentos web.

¿Qué es el DOM?

El DOM es una interfaz de programación para documentos HTML y XML. Provee una representación estructural del documento y define cómo los programas pueden acceder y modificar su contenido y presentación.

Estructura del DOM

El documento HTML se representa como un árbol de nodos, donde cada nodo corresponde a una parte del documento. Los tipos de nodos más comunes son:

• Element Nodes (Nodos de Elemento): Representan etiquetas HTML como <div>, <a>, <p>, etc.
• Text Nodes (Nodos de Texto): Representan el contenido de texto dentro de los elementos.
• Attribute Nodes (Nodos de Atributo): Representan los atributos de las etiquetas HTML (como class, id, src).

Acceso y Manipulación del DOM

Podemos acceder y manipular el DOM usando varias APIs de JavaScript. Aquí hay algunos métodos y propiedades fundamentales:

• document.getElementById(id): Retorna el elemento con el id especificado.
• document.querySelector(selector): Retorna el primer elemento que coincide con el selector CSS especificado.
• element.textContent: Establece o retorna el contenido textual de un elemento.
• element.innerHTML: Establece o retorna el contenido HTML interno de un elemento.
• element.setAttribute(name, value): Establece el valor de un atributo en el elemento.

Ejemplo de Manipulación del DOM

Vamos a crear un pequeño ejemplo para ilustrar cómo manipular el DOM con JavaScript.

HTML Inicial:

html

JavaScript (app.js):

javascript

[Placeholder para imagen explicativa: Diagrama que muestra la estructura del árbol DOM basada en el ejemplo HTML]

Recorrido del Árbol DOM

Podemos recorrer el árbol DOM para obtener y manipular elementos. Algunas de las propiedades útiles son:

• parentNode: Retorna el nodo padre del nodo seleccionado.
• childNodes: Retorna una colección de los nodos hijos.
• firstChild: Retorna el primer nodo hijo.
• lastChild: Retorna el último nodo hijo.

Ejemplo:

javascript

Eventos en el DOM

Los eventos son una parte fundamental del DOM, permitiendo interactividad en las aplicaciones web. Algunos de los eventos más comunes son click, input, submit, entre otros.

Ejemplo de Adición de Evento:

javascript

[Placeholder para imagen explicativa: Diagrama que ilustre la interacción de eventos en el DOM, mostrando cómo un evento click en un botón se propaga al manejador de eventos]

Comprender estos fundamentos del DOM te permitirá realizar pruebas más efectivas y precisas en tus aplicaciones web. En los próximos temas, aplicaremos estos conocimientos básicos para escribir pruebas de interacción con DOM Testing Library.