Gestión de la Árbol DOM mediante JavaScript

La interacción dinámica con la página web requiere la capacidad de modificar la estructura HTML miantras se ejecuta el script. Este proceso se divide principalmente en dos etapas fundamentales: la generación del nodo en memoria y su posterior integración o eliminación dentro del documento visible.

1. Construcción de Elementos en Memoria

Antes de que un elemento sea visible en el navegador, debe ser instanciado como un objeto en el entorno de ejecución. JavaScript proporciona métodos específicos dentro de la interfaz Document para este propósito:

• createElement(tagName): Genera una etiqueta vacía del tipo especificado.
• createTextNode(content): Crea un nodo de texto puro sin etiquetas.
• createComment(text): Establece un comentario dentro del código.

A continuación, un ejemplo práctico donde se instancia un div y se le asignan propiedades iniciales antes de mostrarlo:

<!-- Estructura base HTML -->
<div id="panel-principal"></div>

<script>
    // Paso 1: Crear el objeto elemento
    const componenteNuevaSeccion = document.createElement('div');
    
    // Configuración de atributos
    componenteNuevaSeccion.id = 'modulo-dinamico';
    componenteNuevaSeccion.classList.add('estilo-activo');
    componenteNuevaSeccion.innerHTML = '<p>Contenido generado por JS</p>';
    
    console.log(componenteNuevaSeccion);
</script>

2. Integración en el Documento Visible

Una vez creado el objeto, es necesario vincularlo al árbol DOM actual para que el navegador lo renderice. Existen dos estrategias principales dependiendo de la posición deseada.

Agregar al final (appendChild)

Este método adjunta el nuevo hijo como el último descendiente del nodo padre seleccionado.

<div class="zona-contenedora">
    <div>Item A</div>
    <div>Item B</div>
</div>

<script>
    const elemento = document.createElement('div');
    elemento.innerText = 'Nuevo Item Al Final';
    elemento.className = 'item-nuevo';

    const contenedor = document.querySelector('.zona-contenedora');
    // Adherir al final de los hijos existentes
    contenedor.appendChild(elemento);
</script>

Insertar Antes de un Referencia (insertBefore)

Esta función permite ubicar el nodo exactamente delante de otro hijo específico. La sintaxis requiere identificar tanto al padre como al hermano anterior (referencia).

• parentNode.insertBefore(newNode, referenceNode)
• Si el parámetro de referencia es null, la acción equivale a añadir al final.

Ejemplo de inserción controlada:

<div class="lista-tareas">
    <span>100</span>
    <span>200</span>
</div>

<script>
    const entradaNueva = document.createElement('span');
    entradaNueva.textContent = '999';

    const listaPadre = document.querySelector('.lista-tareas');
    const primerHijo = listaPadre.firstElementChild;

    // Colocar la nueva entrada justo antes del primer elemento existente
    listaPadre.insertBefore(entradaNueva, primerHijo);
</script>

Comportamientos Críticos a Considerar

Es vital comprender cómo el DOM maneja las referencias de memoria durante estas operaciones:

1. Reubicación, no clonación: Si se inserta el mismo objeto en dos posiciones diferentes, no se duplica. El navegador mueve el elemento a la última ubicación solicitada.
2. Actualización Reactiva: Los cambios realizados sobre la referencia del objeto en JavaScript se reflejan inmediatamente en la vista, incluso si la inserción ya ocurrió.

const modulo = document.createElement('article');
modulo.id = 'nota';

const wrapper = document.body;
wrapper.appendChild(modulo); 

// Modificar el contenido después de insertarlo afecta visualmente al usuario
modulo.innerHTML = '<h3>Título Actualizado</h3>'; 

3. Eliminación de Componantes

Para limpiar la estructura o responder a eventos de usuario, necesitamos poder borrar nodos. La API utiliza el método removeChild disponible en el elemento padre.

Este método devuelve el nodo eliminado. Es importante notar que el objeto persiste en la memoria del sistema aunque desaparezca del flujo visual, permitiendo potencialmente su reutilización en otra parte del documento.

<body>
    <div id="contenedor-galeria">
        <img src="foto1.jpg" alt="Imagen Principal" />
        <button onclick="eliminarFoto()">Quitar Imagen</button>
    </div>
</body>

<script>
    function eliminarFoto() {
        const galeria = document.getElementById('contenedor-galeria');
        const imagenReferencia = galeria.firstElementChild; // Obtenemos la img

        // Ejecutar borrado físico del DOM
        const nodoSobreviviente = galeria.removeChild(imagenReferencia);
        
        console.log('El nodo borrado fue:', nodoSobreviviente);
    }
</script>