Skip to main content

Introducción

¿Qué es el DOM?​

El Modelo de Objetos del Documento, más conocido como DOM (Document Object Model), es una interfaz de programación de aplicaciones (API) que permite a los desarrolladores interactuar y manipular documentos HTML y XML de una manera estructurada y dinámica. En esencia, el DOM proporciona una representación en árbol del documento, donde cada nodo del árbol corresponde a una parte del documento, como un elemento, un atributo, o un fragmento de texto.

HTML (documento)
└── <html>
    └── <head>
    |   ├── <title>
    |   |   └── Título de la página
    |   └── <link>
    |       └── Archivos de estilos
    └── <body>
        └── <header>
        |   └── <nav>
        |       └── Menú de navegación
        └── <main>
        |   ├── <section>
        |   |   └── Contenido principal
        |   └── <section>
        |       └── Otro contenido
        └── <footer>
            └── <p>
                └── Pie de página

1.1 Estructura del DOM​

La estructura del DOM se puede imaginar como un árbol jerárquico, donde el nodo raíz es el documento mismo, y cada nodo hijo representa un componente del documento. Esta estructura se descompone de la siguiente manera:

  • Nodo Documento (Document Node): Es el nodo raíz de cada documento, representando al documento entero.
  • Nodos Elemento (Element Nodes): Representan las etiquetas HTML o XML, como <div>, <span>, <a>, etc.
  • Nodos de Texto (Text Nodes): Representan el contenido textual dentro de los elementos.
  • Nodos de Atributo (Attribute Nodes): Representan los atributos de los elementos, aunque en la mayoría de las implementaciones del DOM, los atributos se gestionan como parte de los elementos en lugar de nodos separados.

Esta representación permite una manipulación precisa y dinámica del contenido y la estructura del documento, lo que es esencial para la creación de aplicaciones web interactivas y modernas.

1.2 Historia y Evolución del DOM​

El DOM fue concebido para estandarizar la forma en que los documentos son accedidos y manipulados por los navegadores web. Antes de la estandarización, cada navegador implementaba su propio método para manipular documentos, lo que resultaba en una fragmentación significativa y problemas de compatibilidad. La primera especificación del DOM fue publicada por el World Wide Web Consortium (W3C) en 1998, y ha evolucionado desde entonces en varias versiones, siendo DOM Level 1, DOM Level 2 y DOM Level 3 las más conocidas.

El DOM no solo se limita a HTML, sino que también se aplica a documentos XML, lo que permite a los desarrolladores trabajar con una amplia variedad de lenguajes de marcado. Con el advenimiento de HTML5 y la proliferación de aplicaciones web dinámicas, la relevancia del DOM ha aumentado, convirtiéndose en una herramienta esencial para los desarrolladores web.

1.3 Interacción con el DOM​

Uno de los aspectos más poderosos del DOM es su capacidad para ser manipulado mediante lenguajes de programación, particularmente JavaScript. JavaScript, como lenguaje de scripting del lado del cliente, proporciona las herramientas necesarias para interactuar con el DOM de manera efectiva. A través de métodos y propiedades predefinidos, los desarrolladores pueden acceder y modificar la estructura, el estilo y el contenido de los documentos.

1.3.1 Acceso a Elementos del DOM​

El acceso a los elementos del DOM se puede realizar de varias maneras, utilizando métodos que permiten seleccionar elementos específicos o grupos de elementos. Los métodos más comunes incluyen:

  • document.getElementById(id): Devuelve el elemento que tiene el atributo id especificado.
  • document.getElementsByClassName(className): Devuelve una colección de todos los elementos que tienen la clase especificada.
  • document.getElementsByTagName(tagName): Devuelve una colección de todos los elementos que tienen el nombre de etiqueta especificado.
  • document.querySelector(selector): Devuelve el primer elemento que coincide con el selector CSS especificado.
  • document.querySelectorAll(selector): Devuelve una lista estática de todos los elementos que coinciden con el selector CSS especificado.

Estos métodos proporcionan una gran flexibilidad, permitiendo a los desarrolladores acceder a cualquier parte del documento de manera eficiente.

1.3.2 Manipulación del DOM​

La manipulación del DOM implica cambios en la estructura del documento, el contenido o los atributos de los elementos. JavaScript proporciona varios métodos para lograr esto:

  • Crear Elementos: document.createElement(tagName) crea un nuevo elemento con el nombre de etiqueta especificado.
  • Agregar Nodos: parentNode.appendChild(newNode) agrega un nuevo nodo como hijo del nodo especificado.
  • Eliminar Nodos: parentNode.removeChild(childNode) elimina un nodo hijo del nodo especificado.
  • Modificar Contenido: element.innerHTML permite establecer o obtener el HTML dentro de un elemento, mientras que element.textContent establece o obtiene el texto dentro de un elemento.
  • Modificar Atributos: element.setAttribute(name, value) establece el valor de un atributo, y element.getAttribute(name) obtiene el valor de un atributo.

1.3.3 Eventos en el DOM​

Los eventos son una parte crucial de la interacción con el DOM. Permiten que los desarrolladores respondan a las acciones del usuario, como clics, movimientos del ratón, entradas de teclado, y más. La asociación de eventos a elementos del DOM se realiza típicamente mediante el método addEventListener(type, listener):

  • click: Ocurre cuando se hace clic en un elemento.
  • mouseover: Ocurre cuando el puntero del ratón se mueve sobre un elemento.
  • mouseout: Ocurre cuando el puntero del ratón se mueve fuera de un elemento.
  • submit: Ocurre cuando se envía un formulario.
  • keydown: Ocurre cuando se presiona una tecla.

La gestión eficiente de eventos es esencial para crear experiencias de usuario fluidas y receptivas.

1.4 Ventajas y Desafíos del DOM​

La principal ventaja del DOM es su capacidad para permitir una interacción y manipulación detallada y precisa de los documentos web. Esto es fundamental para la creación de aplicaciones web dinámicas y ricas en funcionalidades. Sin embargo, también presenta desafíos, especialmente en términos de rendimiento. Manipulaciones frecuentes y extensas del DOM pueden causar "reflujos" (reflows) y "repintados" (repaints), que son operaciones costosas para el navegador y pueden llevar a una degradación del rendimiento.

1.4.1 Reflujos y Repintados​

  • Reflujos (Reflows): Ocurren cuando se cambia la estructura del DOM o los estilos que afectan al diseño del documento. El navegador debe recalcular las posiciones y tamaños de los elementos, lo que puede ser una operación costosa en términos de rendimiento.
  • Repintados (Repaints): Ocurren cuando se cambia la apariencia de los elementos sin afectar su disposición, como los colores de fondo o las propiedades de borde. Aunque menos costosos que los reflujos, también pueden afectar el rendimiento si son frecuentes.

Minimizar estos procesos es crucial para mantener el rendimiento y la fluidez de las aplicaciones web. Técnicas como la modificación de clases en lugar de estilos individuales y el uso de fragmentos de documentos para realizar cambios en lote pueden ayudar a reducir estos impactos.

1.5 Herramientas y Técnicas Avanzadas​

Existen numerosas herramientas y técnicas avanzadas que facilitan la interacción con el DOM y mejoran el rendimiento y la mantenibilidad del código.

1.5.1 Frameworks y Librerías​

  • React: Un marco de trabajo desarrollado por Facebook que utiliza un DOM virtual para minimizar los cambios directos al DOM real, mejorando significativamente el rendimiento.
  • Angular: Un framework desarrollado por Google que proporciona una estructura robusta para el desarrollo de aplicaciones web dinámicas y utiliza técnicas avanzadas para la manipulación del DOM.
  • Vue.js: Un framework progresivo que se centra en la capacidad de respuesta y la simplicidad, permitiendo una manipulación eficiente del DOM.

1.5.2 Técnicas de Manipulación Eficiente​

  • DOM Virtual: Utilizado por bibliotecas como React, crea una representación en memoria del DOM real, permitiendo actualizaciones más eficientes y minimizando los reflujos y repintados.
  • Fragmentos de Documentos (Document Fragments): Permiten realizar múltiples cambios en un fragmento del DOM antes de insertarlo en el documento real, mejorando el rendimiento.
  • Delegación de Eventos (Event Delegation): En lugar de agregar múltiples oyentes de eventos a muchos elementos individuales, se añade un solo oyente a un ancestro común, utilizando el concepto de burbujeo de eventos.

1.5.3 Herramientas de Depuración​

  • DevTools del Navegador: La mayoría de los navegadores modernos incluyen herramientas de desarrollo que permiten inspeccionar, editar y depurar el DOM en tiempo real.
  • Lighthouse: Una herramienta de Google que ayuda a auditar el rendimiento de las aplicaciones web, proporcionando información sobre la eficiencia del DOM.

1.6 Futuro del DOM​

A medida que la web continúa evolucionando, también lo hace el DOM. La integración con nuevas tecnologías, como Web Components y la Web Assembly, promete llevar la manipulación del DOM a nuevos niveles de eficiencia y funcionalidad. Los desarrolladores web deben mantenerse al tanto de estas tendencias y adaptarse a las nuevas herramientas y técnicas para seguir creando experiencias de usuario excepcionales.

En resumen, el DOM es una parte fundamental del desarrollo web moderno, proporcionando la estructura y las herramientas necesarias para crear aplicaciones interactivas y dinámicas. La comprensión profunda de su funcionamiento, junto con el uso de técnicas y herramientas avanzadas, es esencial para cualquier desarrollador web que busque crear aplicaciones eficientes y de alta calidad.

Ejemplos de Manipulación del DOM en JavaScript​

1. Acceso a Elementos del DOM​

1.1 document.getElementById​

<!DOCTYPE html>
<html>
<head>
    <title>Acceso a Elementos del DOM</title>
</head>
<body>
    <div id="myDiv">Hola, Mundo!</div>
    <script>
        var element = document.getElementById('myDiv');
        console.log(element.textContent); // Salida: Hola, Mundo!
    </script>
</body>
</html>

1.2 document.getElementsByClassName​

<!DOCTYPE html>
<html>
<head>
    <title>Acceso a Elementos del DOM</title>
</head>
<body>
    <div class="myClass">Elemento 1</div>
    <div class="myClass">Elemento 2</div>
    <script>
        var elements = document.getElementsByClassName('myClass');
        console.log(elements.length); // Salida: 2
        console.log(elements[0].textContent); // Salida: Elemento 1
    </script>
</body>
</html>

1.3 document.getElementsByTagName​

<!DOCTYPE html>
<html>
<head>
    <title>Acceso a Elementos del DOM</title>
</head>
<body>
    <p>Parrafo 1</p>
    <p>Parrafo 2</p>
    <script>
        var paragraphs = document.getElementsByTagName('p');
        console.log(paragraphs.length); // Salida: 2
        console.log(paragraphs[1].textContent); // Salida: Parrafo 2
    </script>
</body>
</html>

1.4 document.querySelector y document.querySelectorAll​

<!DOCTYPE html>
<html>
<head>
    <title>Acceso a Elementos del DOM</title>
</head>
<body>
    <div id="container">
        <p class="text">Texto 1</p>
        <p class="text">Texto 2</p>
    </div>
    <script>
        var firstText = document.querySelector('#container .text');
        console.log(firstText.textContent); // Salida: Texto 1

        var allTexts = document.querySelectorAll('#container .text');
        console.log(allTexts.length); // Salida: 2
        console.log(allTexts[1].textContent); // Salida: Texto 2
    </script>
</body>
</html>

2. Manipulación del DOM​

2.1 Crear y Agregar Elementos​

<!DOCTYPE html>
<html>
<head>
    <title>Manipulación del DOM</title>
</head>
<body>
    <div id="parentDiv">Padre</div>
    <script>
        var newElement = document.createElement('p');
        newElement.textContent = 'Este es un nuevo párrafo';
        document.getElementById('parentDiv').appendChild(newElement);
    </script>
</body>
</html>

2.2 Modificar Contenido​

<!DOCTYPE html>
<html>
<head>
    <title>Manipulación del DOM</title>
</head>
<body>
    <div id="contentDiv">Contenido Antiguo</div>
    <script>
        var element = document.getElementById('contentDiv');
        element.textContent = 'Contenido Nuevo';
        // También se puede usar innerHTML
        // element.innerHTML = '<strong>Contenido Nuevo</strong>';
    </script>
</body>
</html>

2.3 Modificar Atributos​

<!DOCTYPE html>
<html>
<head>
    <title>Manipulación del DOM</title>
</head>
<body>
    <img id="myImage" src="imagen_antigua.jpg" alt="Imagen">
    <script>
        var image = document.getElementById('myImage');
        image.setAttribute('src', 'imagen_nueva.jpg');
        image.alt = 'Imagen Nueva';
    </script>
</body>
</html>

2.4 Eliminar Nodos​

<!DOCTYPE html>
<html>
<head>
    <title>Manipulación del DOM</title>
</head>
<body>
    <div id="parentDiv">
        <p id="childP">Este es un párrafo que será eliminado</p>
    </div>
    <script>
        var parent = document.getElementById('parentDiv');
        var child = document.getElementById('childP');
        parent.removeChild(child);
    </script>
</body>
</html>

3. Manejo de Eventos​

3.1 addEventListener​

<!DOCTYPE html>
<html>
<head>
    <title>Manejo de Eventos</title>
</head>
<body>
    <button id="myButton">Haz Clic Aquí</button>
    <script>
        var button = document.getElementById('myButton');
        button.addEventListener('click', function() {
            alert('¡Botón clickeado!');
        });
    </script>
</body>
</html>

3.2 Otros Tipos de Eventos​

<!DOCTYPE html>
<html>
<head>
    <title>Manejo de Eventos</title>
</head>
<body>
    <input type="text" id="myInput" placeholder="Escribe algo...">
    <script>
        var input = document.getElementById('myInput');
        input.addEventListener('keyup', function(event) {
            console.log('Tecla presionada: ' + event.key);
        });

        input.addEventListener('focus', function() {
            console.log('Input enfocado');
        });

        input.addEventListener('blur', function() {
            console.log('Input desenfocado');
        });
    </script>
</body>
</html>

4. Técnicas Avanzadas de Manipulación del DOM​

4.1 Uso de Document Fragment​

<!DOCTYPE html>
<html>
<head>
    <title>Document Fragment</title>
</head>
<body>
    <ul id="myList"></ul>
    <script>
        var fragment = document.createDocumentFragment();
        for (var i = 1; i <= 5; i++) {
            var li = document.createElement('li');
            li.textContent = 'Elemento ' + i;
            fragment.appendChild(li);
        }
        document.getElementById('myList').appendChild(fragment);
    </script>
</body>
</html>

4.2 Delegación de Eventos​

<!DOCTYPE html>
<html>
<head>
    <title>Delegación de Eventos</title>
</head>
<body>
    <ul id="parentList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <script>
        var list = document.getElementById('parentList');
        list.addEventListener('click', function(event) {
            if (event.target.tagName === 'LI') {
                alert('Item clickeado: ' + event.target.textContent);
            }
        });
    </script>
</body>
</html>

Estos ejemplos cubren los conceptos fundamentales del acceso, manipulación y manejo de eventos en el DOM, así como algunas técnicas avanzadas que ayudan a mejorar la eficiencia del código y la experiencia del usuario en aplicaciones web.