Guía básica: Gestión del objeto DOM mediante JavaScript

Vamos a centrarnos hoy en revisar cuáles son las funciones básicas que podemos realizar en JavaScript para manipular el objeto DOM de una página web. En el desarrollo web, la interacción con los elementos de una página es fundamental para crear experiencias dinámicas e interactivas. Una de las herramientas más poderosas para lograr esto es el objeto DOM (Document Object Model), ya que puede ser utilizado para manipular y modificar elementos HTML desde JavaScript.

¿Qué es el DOM (Document Object Model)?

Pero, en primer lugar, ¿en qué consiste el objeto "Document Object Model"? Pues bien, el objeto DOM, amigo mío, es el elemento clave que desbloquea la puerta hacia el mundo de las páginas web. Imagina, por visualizarlo de algún modo, que se trata de una estructura de árbol que representa con precisión el contenido de una página. Cada elemento HTML, desde las humildes etiquetas hasta las agrupaciones divs, se convierte en un objeto en este modelo estructurado.

Y ahora viene lo más importante: ¿qué se puede hacer con tal modelo? Bueno, el DOM te otorga la habilidad de interactuar y modificar esos elementos con la ayuda de JavaScript. Puedes seleccionar, manipular y transformar los componentes de una página con relativa facilidad (siempre en función de tu destreza en el manejo del lenguaje JavaScript, obviamente).

Una vez que tienes un objeto del DOM en tus manos, puedes desatar su potencial. Cambiar atributos, manipular contenido textual o agregar y eliminar elementos son solo algunas de las actividades que puedes realizar. Básicamente, el objeto DOM es el compañero imprescindible de todo programador web. Con su ayuda, puedes crear páginas dinámicas, donde los elementos bailan al son de tus instrucciones. Las aplicaciones aumentan su interactividad y las comunicaciones con el usuario son más fluidas.

Gestión del objeto DOM mediante JavaScript

Una vez explicado lo anterior, a continuación me gustaría enumerar una serie de opciones básicas que tenemos a nuestra disposición a la hora de interactuar con el DOM. En líneas generales, podemos distinguir dos bloques de gestión:

✅ Acceso a elementos del DOM

✅ Manipulación de elementos del DOM

Acceso a elementos del DOM

En primer lugar, vamos a centrarnos en la forma de acceder al DOM. Para acceder a un elemento del DOM desde JavaScript, podemos utilizar métodos como:

* getElementById: Este método es el más básico, ya que permite acceder a un elemento del DOM utilizando su identificador único (ID). Por ejemplo:

👉 HTML

  
    <!-- Parrafo marcado con Id -->
    <p id="message">Mensaje DOM</p>

👉 JavaScript

  
    // Obtener elemento mediante Id
    document.getElementById('message').textContent = message;

* getElementsByClassName: Este método devuelve una lista de elementos que coinciden con una clase específica. Puedes acceder a ellos mediante su índice. Por ejemplo:

👉 HTML

 
    <!-- Asociar elemento a una clase -->
    <a  class="clase-boton">Boton DOM</a>

👉 JavaScript

 
    // Obtener elementos de una clase
    var elementos = document.getElementsByClassName("clase-boton");
    var primerElemento = elementos[0];
 

* getElementsByTagName: Este método devuelve una lista de elementos que coinciden con un nombre de etiqueta específico, como "div" o "p". También se puede acceder a ellos mediante su índice. Por ejemplo:

👉 JavaScript

 
    // Obtener elementos que tengan la etiqueta <div>
    var elementos = document.getElementsByTagName("div");
    var primerElemento = elementos[0];
 

* querySelector: Este método permite seleccionar un elemento del DOM utilizando selectores CSS. Devuelve el primer elemento que cumple con el selector especificado. Por ejemplo:

👉 HTML

 
    <!-- Div con su Id -->
    <div id="boton">

👉 JavaScript

 
    // Obtener el primer elemento marcado con el selector CSS #boton
    // Este selector hace referencia al elemento "boton"
    var elemento = document.querySelector("#boton");

* querySelectorAll: Este método también utiliza selectores CSS, pero devuelve una lista de todos los elementos que cumplen con el selector especificado. Puedes acceder a ellos mediante su índice. Por ejemplo:

👉 HTML

 
     <!-- Asociar elemento a una clase -->
     <a  class="clase-boton">Boton DOM</a>

👉 JavaScript

 
    // Obtencion de elementos asociados al selector CSS .clase-boton
    // Este selector hace referencia a la clase "clase-boton"
    var elementos = document.querySelectorAll(".clase-boton");
    var primerElemento = elementos[0];
 

Como acabamos de ver, estos métodos de acceso al DOM nos permiten seleccionar elementos específicos basados en su identificador, clase o etiqueta.

Manipulación de elementos del DOM

Visto lo anterior, pasamos al tema de gestión de elementos. Una vez que hemos seleccionado un elemento del DOM, podemos realizar diversas acciones sobre él. Las operaciones básicas podrían dividirse en los siguientes bloques principales:

>>> Modificación del contenido de texto
>>> Modificación de atributos
>>> Modificación de estilos
>>> Adición y eliminación de elementos
>>> Agregar y eliminar clases
>>> Detección de eventos

1. Modificación del contenido de texto

Para modificar el contenido de texto de un determinado elemento, podemos utilizar alguna de las propiedades siguientes.

* Propiedad innerHTML: Puedes cambiar el contenido HTML de un elemento asignando un nuevo valor a la propiedad innerHTML. Por ejemplo:

👉 HTML

         <!-- Div con su Id -->
    <div id="boton">
         <!-- Contenido HTML del elemento -->
    </div>
 

👉 JavaScript

 
    // Modificar el contenido de un elemento del DOM
    // Cambia su contenido actual por el HTML que le pasemos 
    var elemento = document.getElementById("boton");
    elemento.innerHTML = "<p>Nuevo contenido</p>";
 

* Propiedad textContent: Si solo quieres modificar el texto dentro de un elemento sin interpretarlo como HTML, puedes utilizar la propiedad textContent. Por ejemplo:

👉 HTML

  
    <!-- Parrafo marcado con Id -->
    <p id="message">Mensaje DOM</p>

👉 JavaScript

 
    // Modificar el contenido de texto de un elemento
    var elemento = document.getElementById("message");
    elemento.textContent = "Nuevo contenido";
 

* Nodos de texto: Puedes crear un nodo de texto utilizando el constructor Text y luego agregarlo como hijo de un elemento. Por ejemplo:

👉 JavaScript

 
    // Agregar nodo de texto hijo a un elemento del DOM
    var elemento = document.getElementById("message");
    var nuevoTexto = document.createTextNode(" - Nuevo contenido");
    elemento.appendChild(nuevoTexto);
 

2. Modificación de atributos

Para modificar los atributos de un determinado elemento, podemos utilizar alguna de las propiedades siguientes.

* Método setAttribute: Puedes cambiar el valor de un atributo específico utilizando el método setAttribute. Por ejemplo:

👉 JavaScript

 
    // Modificar atributo de un elemento del DOM
    var elemento = document.getElementById("miElemento");
    elemento.setAttribute("src", "nueva-imagen.jpg");
 

* Propiedades del elemento: Algunos atributos tienen propiedades equivalentes en el objeto del elemento, por lo que puedes modificar directamente esas propiedades. Por ejemplo:

👉 JavaScript

 
   // Modificar atributo a traves de las propiedades del elemento
    var elemento = document.getElementById("miElemento");
    elemento.src = "nueva-imagen.jpg";
    elemento.value = "Nuevo valor";
 

3. Modificación de estilos

Para modificar los estilos de un determinado elemento, podemos utilizar alguna de las propiedades siguientes.

* Propiedad style.backgroundColor: Esta propiedad permite cambiar el color de fondo de un elemento. Por ejemplo:

👉 JavaScript

 
    var elemento = document.getElementById("elemConEstilo");
    elemento.style.backgroundColor = "red";

* Propiedad style.color: Con esta propiedad, podemos modificar el color del texto dentro de un elemento. Por ejemplo:

👉 JavaScript

 
    elemento.style.color = "blue";
 

* Propiedad elemento.style.fontSize: Permite cambiar el tamaño de fuente de un elemento. Puede ser especificado en píxeles, puntos, porcentajes, entre otros. Por ejemplo:

👉 JavaScript

 
    elemento.style.fontSize = "16px";
 

* Propiedad style.fontWeight: se utiliza para especificar el grosor o peso de la fuente de un elemento del DOM. Esta propiedad se puede aplicar a elementos de texto y permite controlar la apariencia visual de la fuente en términos de su grosor (de más delgado a más grueso). Por ejemplo:

👉 JavaScript

 
    // Establece un valor numérico personalizado
    elemento.style.fontWeight = "500";

* Propiedad style.fontFamily: Esta propiedad nos permite especificar la familia de fuentes que se utilizará para el texto dentro de un elemento. Puede aceptar nombres de fuentes específicas o una lista de nombres de fuentes en orden de preferencia. Por ejemplo:

👉 JavaScript

 
    elemento.style.fontFamily = "Arial, sans-serif";
 

* Propiedad style.width y Propiedad style.height: Estas propiedades permiten ajustar el ancho y alto de un elemento respectivamente. Por ejemplo:

👉 JavaScript

 
    elemento.style.width = "200px";
    elemento.style.height = "100px";

* Propiedad style.margin: Nos permite ajustar los márgenes de un elemento. Podemos especificar márgenes individuales (marginTop, marginBottom, marginLeft, marginRight) o usar la propiedad margin para establecer todos los márgenes al mismo valor. Por ejemplo:

👉 JavaScript

 
    elemento.style.margin = "10px";
    elemento.style.marginTop = "10px";
    elemento.style.marginBottom = "10px";
    elemento.style.maringLeft = "10px";
    elemento.style.marginRight = "10px";
 

* Propiedad style.padding: Esta propiedad nos permite ajustar el relleno interno de un elemento. Al igual que con los márgenes, podemos especificar valores individuales (paddingTop, paddingBottom, paddingLeft, paddingRight) o utilizar la propiedad padding para establecer todos los valores de relleno al mismo tiempo. Por ejemplo:

👉 JavaScript

 
    elemento.style.padding = "20px";
    elemento.style.paddingTop = "20px";
    elemento.style.paddingBottom = "20px";
    elemento.style.paddingLeft = "20px";
    elemento.style.paddingRight = "20px";
 

* Propiedad style.display: Con esta propiedad, podemos controlar si un elemento es visible o no. Por ejemplo, para ocultar un elemento, podemos hacer lo siguiente:

👉 JavaScript

 
    elemento.style.display = "none";
 

* Propiedad sytle.visibility: se utiliza para controlar la visibilidad de un elemento del DOM. Permite mostrar u ocultar un elemento en la página web de manera dinámica. A diferencia de la propiedad display, aquí no se libera el espacio ocupado por el elemento. Por ejemplo:

👉 JavaScript

 
    // Oculta el elemento sin liberar el espacio ocupado
    elemento.style.visibility = "hidden";

* Propiedad style.border: Esta propiedad nos permite establecer el estilo, grosor y color del borde de un elemento. Podemos especificar estos valores en una cadena separada por espacios. Por ejemplo:

👉 JavaScript

 
    elemento.style.border = "2px solid red";
 

* Propiedad style.textAlign: Esta propiedad nos permite alinear el contenido de texto dentro de un elemento. Puede aceptar valores como "left", "center" o "right". Por ejemplo:

👉 JavaScript

 
    elemento.style.textAlign = "center";
 

4. Adición y Eliminación de elementos

Para crear, añadir y eliminar elementos desde el lado JavaScript de nuestra aplicación, podemos utilizar alguna de las propiedades siguientes.

* Método createElement: Puedes utilizar el método createElement para crear un nuevo elemento HTML. Luego, puedes configurar sus atributos y contenido antes de añadirlo al DOM. Por ejemplo:

👉 JavaScript

 
    // Crear nuevo elemento HTML
    var nuevoElemento = document.createElement("div");
    nuevoElemento.id = "nuevoDiv";
    nuevoElemento.textContent = "Nuevo elemento";
 

* Método appendChild: Puedes utilizar el método appendChild para añadir un elemento como hijo de otro elemento existente. Por ejemplo:

👉 JavaScript

 
    // Añadir nuevo elemento como hijo de un elemento ya existente en el DOM
    var contenedor = document.getElementById("contenedor");
    contenedor.appendChild(nuevoElemento);
 

* Método insertBefore: Puedes utilizar el método insertBefore para insertar un elemento antes de otro elemento existente. Por ejemplo:

👉 JavaScript

 
    // Insertar un nuevo elemento antes de otro elemento ya existente
    var elementoDom = document.getElementById("elementoDom");
    var contenedor = elementoDom.parentNode;
    contenedor.insertBefore(nuevoElemento, elementoDom);
 

* Método innerHTML: Puedes utilizar la propiedad innerHTML para crear elementos y estructuras HTML más complejas. Por ejemplo:

👉 JavaScript

 
    // Insertar estructura HTML en un elemento
    var contenedor = document.getElementById("contenedor");
    contenedor.innerHTML = "<div id='nuevoDiv'>Nuevo elemento</div>";
 

* Método createDocumentFragment: Puedes utilizar createDocumentFragment para crear un fragmento de documento. Esto te permite agregar varios elementos sin afectar directamente al DOM principal, lo que puede mejorar el rendimiento. Luego, puedes añadir el fragmento al DOM en un solo paso. Por ejemplo:

👉 JavaScript

 
    // Crear fragmento de documento
    var fragmento = document.createDocumentFragment();
    var nuevoElemento1 = document.createElement("div");
    nuevoElemento1.textContent = "Elemento 1";
    var nuevoElemento2 = document.createElement("div");
    nuevoElemento2.textContent = "Elemento 2";
    fragmento.appendChild(nuevoElemento1);
    fragmento.appendChild(nuevoElemento2);

    var contenedor = document.getElementById("contenedor");
    contenedor.appendChild(fragmento);
 

5. Agregar y Eliminar clases

Para agregar y eliminar clases del DOM desde el lado JavaScript de nuestra aplicación, podemos utilizar alguna de las propiedades siguientes.

* Método classList.add: La propiedad classList te permite acceder y manipular las clases de un elemento. Puedes utilizar el método add agregar clases. Por ejemplo:

👉 JavaScript

 
    // Agregar clase
    var elemento = document.getElementById("miElemento");
    elemento.classList.add("nuevaClase"); // Agregar clase
 

* Método classList.remove: La propiedad classList te permite acceder y manipular las clases de un elemento. Puedes utilizar el método remove para eliminar clases. Por ejemplo:

👉 JavaScript

 
    // Eliminar clase
    var elemento = document.getElementById("miElemento");
    elemento.classList.remove("viejaClase"); // Eliminar clase
 

* Propiedad className: La propiedad className te permite acceder y modificar la lista de clases de un elemento como una cadena de texto. Puedes asignar directamente una nueva cadena de clases para reemplazar las existentes. Sin embargo, ten en cuenta que esta propiedad sobrescribirá todas las clases, no solo una en particular. Por ejemplo:

👉 JavaScript

     
    // Modificar clase asociada a un elemento del DOM
    var elemento = document.getElementById("miElemento");
    elemento.className = "nuevaClase";
 

* Método classList.toggle: El método toggle de la propiedad classList te permite alternar la presencia de una clase en un elemento. Si la clase está presente, se eliminará; si no está presente, se agregará. Esto es útil cuando deseas alternar la visualización o el comportamiento basado en una clase. Por ejemplo:

👉 JavaScript

 
    // Alternar la presencia de una clase en un elemento
    var elemento = document.getElementById("miElemento");
    elemento.classList.toggle("miClase"); // Agregar o eliminar la clase "miClase"
 

6. Detección de eventos

Para la gestión de eventos desencadenados por las acciones de los usuarios, podemos hacer uso de alguna de las siguientes técnicas.

* Método addEventListener: Puedes utilizar el método addEventListener para escuchar eventos específicos en un elemento y asociarles una función de manejo (callback). Por ejemplo:

👉 HTML

 
    <!-- Boton sobre el que vamos a capturar el evento -->
    <button id="ver-revision" type="boton">---VER REVISION---</button>

👉 JavaScript

        // Listener de evento de clic sobre un elemento del DOM
    const button=document.getElementById('ver-revision');
    elemento.addEventListener("click", function(event) {
      // Código para manejar el evento de clic
      console.log('mi bonito click');
    });
 

* Atributo onclick: Puedes asignar directamente una función de manejo a un evento utilizando el atributo on[evento] en el elemento (atributo onclik y análogos). Por ejemplo:

👉 JavaScript

 
    // Gestion de evento
    var elemento = document.getElementById("miElemento");    
    elemento.onclick = function(event) {
        // Código para manejar el evento de clic
    };

* Delegación de eventos: Puedes utilizar la técnica de delegación para gestionar eventos en elementos secundarios dentro de un elemento principal. En lugar de asignar gestores a cada elemento secundario, asignas un gestor al elemento principal y verificas el objetivo del evento. Por ejemplo:

👉 JavaScript

 
    // Gestion de eventos de elementos secundarios
    var contenedor = document.getElementById("contenedor");
    contenedor.addEventListener("click", function(event) {
      if (event.target.tagName === "BUTTON") {
        // Código para gestionar el evento de clic en un botón dentro del contenedor
      }
    });
 

🔄 Por supuesto, aparte de lo que adabamos de indicar, también podemos gestionar eventos mediante el uso de librerías y frameworks. Hay herramientas que proporcionan sus propias formas de escuchar y manejar eventos de manera más simplificada y eficiente. Por ejemplo, jQuery, React o Vue.js.

Según acabamos de ver en los 6 apartados anteriores, desde Javascript tenemos multitud de métodos y atributos que nos van a permitir manipular los elementos del DOM de la forma más conveniente para nuestra aplicación.

Conclusión

Como habéis podido ir comprobando a lo largo del post, el Document Object Model (DOM) es una representación estructurada de un documento HTML o XML que permite acceder y manipular los elementos de una página web desde JavaScript. Estamos ante una potente herramienta que brinda la capacidad de interactuar con los elementos de una página, modificar su contenido, estilo y comportamiento dinámicamente.

Eso sí, antes de terminar, una última advertencia. En este gran modelo del DOM, cada navegador tiene sus peculiaridades. Así que mantén tus ojos bien abiertos y asegúrate de que tu código funcione en los navegadores predeterminados.

En resumen, el objeto DOM es el director de orquesta que infunde vida a las páginas web. Podemos imaginar que tenemos a nuestra disposición una interconexión entre el código y los elementos, donde tendremos la posibilidad de diseñar y transformar su apariencia y comportamiento. Así que, querido amigo, optimiza tus aplicaciones con el empleo del objeto DOM y permite que el usuario admire tu estilo en la web.

Pues nada, eso era todo lo que tenía que comentaros en relación con el objeto DOM. Espero que ahora os quede más claro la forma en la que podemos proceder a su manipulación desde JavaScript. En cualquier caso, aquí abajo podéis dejarme cualquier duda que os surja...

Saludos.

Buscar este blog

Universo Java