Nodos del DOM en JavaScript

Comprendiendo los nodos del DOM

El Modelo de Objetos del Documento (DOM) es un concepto fundamental en el desarrollo web que actúa como interfaz entre los documentos HTML y JavaScript. Cuando se carga una página web, el navegador analiza el HTML y construye el DOM — un árbol de objetos en memoria, en tiempo real, que JavaScript puede leer y modificar. Cada cambio que realices en el DOM se refleja instantáneamente en la página, lo que hace posibles las aplicaciones web interactivas.

Esta guía cubre los nodos del DOM: qué son, los distintos tipos que encontrarás, cómo identificarlos, y cómo crearlos, añadirlos, eliminarlos y reemplazarlos. Al final comprenderás los bloques de construcción sobre los que se asienta toda técnica DOM de nivel superior — como seleccionar elementos o recorrer el árbol.

¿Qué es un nodo del DOM?

Un nodo es la unidad más básica del árbol DOM. Todo lo que hay en un documento — elementos, el texto que contienen, atributos e incluso comentarios — se representa como un nodo. Cada nodo es un object que hereda de la clase integrada Node, por lo que todos comparten un conjunto común de propiedades (nodeType, nodeName, parentNode, childNodes, etc.) usadas para la navegación y la manipulación.

Una forma útil de visualizarlo: el HTML que escribes es la receta, y el DOM es el object vivo que el navegador elabora a partir de esa receta. Una vez cargada la página, ya no editas el texto HTML — editas los nodos.

<!DOCTYPE html>
<html>
<head>
    <title>DOM Nodes Example</title>
</head>
<body>
    <div id="example">
        <!-- This is a comment node -->
        <p>This is a text node within an element node.</p>
    </div>
    <script>
        let exampleDiv = document.getElementById('example');
        exampleDiv.style.border = '2px solid blue'; // Highlight the div element
        exampleDiv.style.padding = '10px';
    </script>
</body>
</html>

Pruébalo tú mismo »

Explicación: En este ejemplo accedemos al div con el ID example y aplicamos estilos CSS para distinguirlo visualmente. Esto demuestra cómo manipular directamente las propiedades de estilo de un nodo de elemento, haciéndolo más visible en la página.

Los distintos tipos de nodos del DOM

Cada nodo tiene una propiedad numérica nodeType que indica qué tipo de nodo es. Los tipos más habituales con los que trabajarás son:

`nodeType`	Constante	Significado
`1`	`Node.ELEMENT_NODE`	Un elemento HTML como `<div>` o `<p>`
`3`	`Node.TEXT_NODE`	El texto dentro de un elemento (incluidos espacios en blanco)
`8`	`Node.COMMENT_NODE`	Un comentario HTML (`<!-- ... -->`)
`9`	`Node.DOCUMENT_NODE`	El object `document` en sí, la raíz del árbol

Una sorpresa habitual para los principiantes: los espacios en blanco cuentan como nodos de texto. Los saltos de línea y la sangría entre las etiquetas crean nodos de texto vacíos, razón por la que childNodes devuelve más elementos de los esperados. (Si solo quieres los hijos de tipo elemento y deseas omitir esos nodos de texto con espacios en blanco, usa children en lugar de childNodes.) Los atributos también son nodos, pero el código moderno los lee con getAttribute() / setAttribute() en lugar de recorrer los nodos de atributo directamente.

El siguiente ejemplo recorre los nodos hijo de un <div> e informa del tipo de cada uno:

<!DOCTYPE html>
<html>
<head>
    <title>Node Types Interactive Example</title>
    <style>
        #info {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        #output {
            border: 1px solid #ccc;
            padding: 10px;
        }
        button {
            cursor: pointer;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="info">
        <!-- This is a comment node -->
        <p>Element node with a <span>child element node</span> and some text.</p>
    </div>
    <button onclick="displayNodeTypes()">Show Node Types</button>
    <div id="output">Node types will be displayed here.</div>
    <script>
        function displayNodeTypes() {
            const infoDiv = document.getElementById('info');
            const outputDiv = document.getElementById('output');
            outputDiv.innerHTML = '';  // Clear previous output
            const nodeTypes = [];

            // Iterate over all child nodes of the div
            infoDiv.childNodes.forEach(node => {
                let typeDescription = '';
                switch(node.nodeType) {
                    case Node.ELEMENT_NODE:
                        typeDescription = 'Element node: ' + node.tagName;
                        break;
                    case Node.TEXT_NODE:
                        // Trim text content and check if it's not empty
                        let textContent = node.textContent.trim();
                        if (textContent) {
                            typeDescription = 'Text node: "' + textContent + '"';
                        }
                        break;
                    case Node.COMMENT_NODE:
                        typeDescription = 'Comment node: "' + node.textContent.trim() + '"';
                        break;
                }

                // Only add non-empty descriptions
                if (typeDescription) {
                    nodeTypes.push(typeDescription);
                    const p = document.createElement('p');
                    p.textContent = typeDescription;
                    outputDiv.appendChild(p);
                }
            });

            // If no nodes are visible or found
            if (nodeTypes.length === 0) {
                outputDiv.textContent = 'No visible nodes found.';
            }
        }
    </script>
</body>
</html>

Pruébalo tú mismo »

El documento HTML muestra cómo identificar y visualizar distintos tipos de nodos del DOM (como nodos de elemento, de texto y de comentario). Incluye una sección con estilos para mostrar estos nodos, un botón que activa una función JavaScript para analizarlos y listarlos, y un área donde se muestran los resultados. La función JavaScript inspecciona cada nodo dentro de una parte designada del documento, lo categoriza y muestra su tipo y detalles.

Manipulación de nodos del DOM

Las páginas interactivas se construyen modificando nodos después de que la página se haya cargado. Las cuatro operaciones a las que recurrirás con más frecuencia son crear, añadir, eliminar y reemplazar nodos. Para un recorrido más completo de las técnicas construidas sobre estas operaciones, consulta manipulación del DOM.

Crear y añadir nodos

Crear un nodo y añadirlo son dos pasos separados. document.createElement() crea un nodo desconectado que aún no está en la página; appendChild() (o append(), prepend(), insertBefore()) es lo que realmente lo inserta en el árbol:

<!DOCTYPE html>
<html>
<head>
    <title>Add Node Example</title>
</head>
<body>
    <button onclick="addNewParagraph()">Add Paragraph</button>
    <script>
        function addNewParagraph() {
            let newNode = document.createElement('p');
            newNode.textContent = 'This is a new paragraph.';
            document.body.appendChild(newNode);
        }
    </script>
</body>
</html>

Pruébalo tú mismo »

Explicación: Este ejemplo incluye un botón que, al hacer clic, activa una función para crear un nuevo elemento de párrafo (<p>) y lo añade al cuerpo del documento. Demuestra cómo JavaScript puede usarse para añadir contenido dinámicamente a una página, lo que resulta especialmente útil para aplicaciones que necesitan actualizarse en tiempo real sin recargar la página.

Eliminar nodos

Para quitar un nodo de la página, llama a removeChild() en su padre o — de forma más sencilla en los navegadores modernos — llama a node.remove() directamente sobre el nodo en sí. El ejemplo usa removeChild() para que puedas ver la relación padre/hijo de forma explícita:

<!DOCTYPE html>
<html>
<head>
    <title>Remove Node Example</title>
</head>
<body>
    <div id="container">
        <p id="toBeRemoved">This paragraph will be removed. <button onclick="removeParagraph()">Remove</button></p>
    </div>
    <script>
        function removeParagraph() {
            let parentNode = document.getElementById('container');
            let childNode = document.getElementById('toBeRemoved');
            parentNode.removeChild(childNode);
        }
    </script>
</body>
</html>

Pruébalo tú mismo »

Explicación: Este script ofrece una demostración práctica de cómo eliminar un elemento del DOM usando un botón integrado dentro del propio párrafo. El método removeChild() se utiliza para eliminar el elemento especificado, mostrando una acción dinámica iniciada por el usuario que altera directamente la estructura del documento.

Reemplazar nodos

replaceChild(newNode, oldNode) intercambia un nodo por otro en un solo paso, conservando la posición del nodo antiguo en el árbol:

<!DOCTYPE html>
<html>
<head>
    <title>Replace Node Example</title>
</head>
<body>
    <div id="oldElement">This element will be replaced. <button onclick="replaceElement()">Replace</button></div>
    <script>
        function replaceElement() {
            let newNode = document.createElement('div');
            newNode.textContent = 'This is a replacement.';
            let oldNode = document.getElementById('oldElement');
            oldNode.parentNode.replaceChild(newNode, oldNode);
        }
    </script>
</body>
</html>

Pruébalo tú mismo »

Explicación: En este ejemplo interactivo, un botón activa la sustitución de un div existente por uno recién creado. Esto ilustra el método replaceChild(), que resulta especialmente útil en situaciones donde un elemento debe actualizarse en función de acciones del usuario o de eventos externos, como la recepción de nuevos datos desde un servidor.

Buenas prácticas y consejos

Minimiza las manipulaciones del DOM: cada cambio puede provocar que el navegador recalcule el diseño (un reflow) y redibuje la página (un repaint). Agrupa los cambios en lugar de tocar el DOM en un bucle cerrado.
Primero lee, luego escribe: mezclar lecturas (como offsetHeight) y escrituras dentro de un bucle fuerza repetidos layout thrashing. Agrupa todas las lecturas juntas y todas las escrituras juntas.
Construye fuera de pantalla, inserta una vez: usa un DocumentFragment (que se muestra a continuación) para ensamblar muchos elementos antes de insertarlos en una sola operación.
Cachea tus selecciones: guarda los resultados de getElementById/querySelector en una variable en lugar de volver a consultar el mismo elemento repetidamente. Consulta optimización del rendimiento del DOM para más información.

Información

Asegúrate siempre de la compatibilidad entre navegadores cuando realices manipulaciones del DOM. Realizar pruebas en distintos navegadores ayuda a prevenir comportamientos inesperados y garantiza una experiencia de usuario coherente.

Ejemplo con DocumentFragment

Un DocumentFragment es un contenedor ligero y fuera de pantalla para nodos. Como no forma parte del documento en tiempo real, añadir nodos a él no tiene ningún coste en términos de diseño — el navegador solo realiza un reflow una vez, cuando insertas el fragmento completo en la página. Esto lo hace ideal para añadir muchos elementos a la vez:

<!DOCTYPE html>
<html>
<head>
    <title>DocumentFragment Example</title>
</head>
<body>
    <div id="list-container">
        <h2>Item List</h2>
        <ul id="item-list">
            <!-- Items will be added here -->
        </ul>
        <button id="add-items">Add 100 Items</button>
    </div>

    <script>
        const itemList = document.getElementById('item-list');
        const addItemsButton = document.getElementById('add-items');

        addItemsButton.addEventListener('click', () => {
            // Create a DocumentFragment
            const fragment = document.createDocumentFragment();

            // Add 100 list items to the fragment
            for (let i = 1; i <= 100; i++) {
                const listItem = document.createElement('li');
                listItem.textContent = `Item ${i}`;
                fragment.appendChild(listItem);
            }

            // Append the fragment to the item list
            itemList.appendChild(fragment);
        });
    </script>
</body>
</html>

Pruébalo tú mismo »

Comenzamos seleccionando el elemento <ul> donde se añadirán los nuevos elementos y el botón que activará la adición.
Cuando se hace clic en el botón "Add 100 Items", creamos un object DocumentFragment.
A continuación, creamos 100 elementos <li> en un bucle, establecemos su contenido de texto y añadimos cada uno al DocumentFragment.
Finalmente, añadimos el DocumentFragment al elemento <ul>. Como el fragmento no forma parte del DOM en tiempo real durante la fase de construcción, este enfoque minimiza los reflows y repaints, mejorando el rendimiento.

El uso de DocumentFragment es especialmente útil cuando necesitas añadir un gran número de elementos al DOM a la vez, ya que reduce la sobrecarga asociada a múltiples reflows y repaints, lo que lleva a actualizaciones más fluidas y rápidas.

Nodos del DOM vs. árboles del DOM

Los nodos del DOM y los árboles del DOM son conceptos relacionados, pero se refieren a diferentes aspectos de cómo se estructura y manipula un documento web:

Nodos del DOM: un nodo del DOM es un componente individual dentro del Modelo de Objetos del Documento (DOM). Todo elemento, texto, comentario y atributo dentro de un documento HTML o XML se considera un nodo. Los nodos son los bloques de construcción fundamentales de un documento. Por ejemplo, una etiqueta <h1>, el texto dentro de esa etiqueta e incluso los atributos de esa etiqueta (como class="title") son todos nodos independientes.
Árbol del DOM: el árbol del DOM hace referencia a la estructura o jerarquía completa de nodos tal como están organizados en el documento. Es una representación en forma de árbol que muestra cómo se relacionan entre sí todos los nodos de un documento. Los nodos de este árbol tienen relaciones padre-hijo, igual que las carpetas y los archivos en tu ordenador. Por ejemplo, en un documento HTML, el nodo <body> puede ser un nodo padre con varios nodos hijo como <div>, <p> e <img> que representan distintas partes de la página web.

En términos simples, puedes pensar en un nodo del DOM como un punto único o una pieza de un puzzle mayor, mientras que el árbol del DOM representa el puzzle completo o el conjunto total de relaciones entre esos puntos. El árbol del DOM es útil para navegar y manipular la estructura de un documento mediante lenguajes de programación como JavaScript, ya que permite a los desarrolladores encontrar (seleccionar), modificar o actualizar elementos de forma eficiente dentro de la jerarquía anidada.

Conclusión

Los nodos son los átomos del DOM. Una vez que puedes reconocer los distintos tipos de nodos, leer el nodeType de un nodo, y crear, añadir, eliminar y reemplazar nodos con confianza, cualquier tarea DOM de nivel superior se vuelve abordable. Ten en cuenta el rendimiento — agrupa los cambios y recurre a un DocumentFragment cuando insertes muchos elementos a la vez.

Qué leer a continuación

Propiedades de nodo: tipo, etiqueta y contenidos — profundiza en nodeType, nodeName, textContent y sus compañeros.
Seleccionar elementos del DOM — encuentra los nodos con los que quieres trabajar.
Recorrer el DOM — desplázate entre nodos padre, hijo y hermano.
Manipulación del DOM — un conjunto de herramientas más completo basado en las operaciones tratadas aquí.

Práctica

¿Cuáles de los siguientes son tipos de nodos del DOM en un documento web?