¿Qué es el DOM y como usarlo cómo un profesional?

Javascript Js

Como en la vida de cualquier aspirante a desarrollador web junior, también llegará un punto en el que te encontrarás con términos que pueden confundirte un poco. Algunos de estos, sin embargo, son fundamentales para tu estudio. ¿Alguna vez has oído hablar del DOM?
¿Será un acrónimo? ¿Una abreviación? ¿Para qué será?
¡Sin miedo! ¡Descubrámoslo juntos y veamos cómo manipularlo mejor con la ayuda del lenguaje JavaScript, en este artículo!

¿Qué es el DOM?

Queriendo dar una definición, podríamos decir que el DOM es la forma en que se estructura toda página web, definida como estándar oficial por el World Wide Web Consortium (W3C), como sugiere Wikipedia "de tal manera que sea neutral". tanto por el lenguaje como por la plataforma".
El DOM determina el contenido de la página y cómo cada elemento del contenido se relaciona con los otros elementos.

Nuestra primera intuición fue correcta: DOM es, de hecho, un acrónimo que significa:

Document: la página web misma;
Object: los elementos en la página web, y su contenido;
Model: un conjunto de instrucciones

En resumen, el DOM es un modelo para alcanzar y actualizar dinámicamente el contenido, la estructura y el estilo de un documento.
El DOM a menudo se representa como un árbol.

Cada objeto DOM está jerárquicamente debajo de otro objeto y cada objeto puede tener varios hijos, pero solo un padre que, si se elimina, también llevará a sus hijos con él.
La estructura de árbol para representarlo está precisamente indicada para mostrar la relación entre objetos padres e hijos, como si de un verdadero árbol genealógico se tratase: en la metáfora, en la parte superior tendríamos a los abuelos, más abajo a los padres y hermanos, y por último, hijos, sus hermanos y primos.
De manera similar, el nodo raíz, el nodo en la parte superior del árbol, de una página web sería el elemento HTML. A continuación, podemos encontrar los elementos de la cabeza y el cuerpo. Los elementos secundarios del cuerpo serían los elementos de encabezado, principal y pie de página. Debajo del elemento de encabezado, podemos encontrar elementos img, nav y h1, y así sucesivamente.

Aclaradas las definiciones, veamos, ahora, cómo podemos usar el DOM en la práctica. En nuestro blog, a menudo hemos mencionado el aprendizaje de JavaScript como tema, recomendándolo una y otra vez. Recapitulemos, sin embargo, con un breve dicurso, ¡cuáles son las ventajas de este fantástico lenguaje de programación!

Programación en Javascript: las ventajas

La programación Javascript trae consigo numerosas ventajas. Veamos por qué Learning Javascript puede resultar una carta ganadora, desempolvando algunas de sus ventajas:

La sintaxis extremadamente simple también ayuda y anima a los aspirantes a desarrolladores web a iniciarse en el mundo de la programación informática empezando por el lenguaje Javascript;
Es un lenguaje de programación “full stack”, declinable para mútiples propósitos y apto tanto para aquellos que aspiran a convertirse en un back end developer, como para aquellos que prefieren profundizar en el mundo del desarrollo front end;
Está, actualmente, entre los lenguajes de programación más requeridos en el mundo laboral.
Las perspectivas salariales de un desarrollador full-stack que domina JavaScript son realmentes notables: un incentivo sustancial para tu aprendizaje.

No es de extrañar, por tanto, que JavaScript sea uno de los lenguajes de programación más utilizados en la actualidad.

¡Pero eso no es todo! ¡Nuestro amigo JavaScript también es extremadamente útil para manipular el DOM y usarlo como un profesional!

Manipular el DOM con el lenguaje JavaScript

¡Bueno! Ahora que hemos hecho las aclaraciones necesarias sobre el lenguaje JavaScript y el DOM, veamos cómo cambiar este último.

En este artículo veremos cómo:

Seleccionar un elemento del DOM
Modificar el “style” de un elemento
Modificar las clases de un elemento
Modificar el contenido de un elemento
Crear un elemento html y añadirlo en el DOM
Eliminar un elemento html
Añadir un evento al DOM

Para hacer todas estas cosas usaremos el objeto "documento" presente dentro de cada navegador que nos da acceso al árbol html.

Seleccionar un elemento del DOM

Para seleccionar uno o más elementos, encontrarás muchos métodos en línea:

getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getElementsByTagNameNS()

Sin embargo, todos los métodos anteriores son métodos antiguos que ya no se usan en JavaScript moderno y se han reemplazado por los siguientes:

querySelector()
querySelectorAll()

Ambos métodos aceptan un selector CSS como parámetro que se usará para seleccionar los elementos dentro del html. Veamos algunos ejemplos:

<h1 id="title">Javascript DOM manipulation</h1>

<script>

let title = document.querySelector('#title');

console.log(title); 

// <h1 id="title">Javascript DOM manipulation</h1>

</script>

En este ejemplo, hemos seleccionado el título (h1) a través del selector por ID; prestamos atención a la forma en que escribimos los selectores porque estos son case sensitive y esto significa que "title" es diferente de "Title".

Con el método querySelector(), por lo tanto, pudimos seleccionar solo un elemento del DOM. En caso de que haya más elementos con el mismo selector dentro del DOM, este método seleccionará solo el primero que encuentre; para seleccionar más necesitamos usar el método querySelectorAll().

<p>Javascript DOM manipulation</p>

<p>Javascript DOM manipulation</p>

<p>Javascript DOM manipulation</p>


<script>

    let paragraphs = document.querySelectorAll('p');

    console.log(paragraphs); // NodeList(3) [p, p, p]

</script>

El método querySelectorAll(), a diferencia del anterior, nos devuelve un NodeList que es un objeto DOM similar a un array de Javascript.

Modificar el “style” de un elemento

Una vez seleccionado un elemento, tenemos la posibilidad de cambiar el stile.

<h1 id="title">Javascript DOM manipulation</h1>

<script>

    let title = document.querySelector('#title');
    title.style.color = 'yellow';
    title.style.backgroundColor = 'black'

    console.log(title);

    // <h1 id="title" style="color: yellow; background-color: black;">Javascript DOM manipulation</h1>

</script>

Cada elemento capturado en el DOM tendrá la propiedad “style”, que nos dará acceso a todas las propriedades CSS que podemos modificar.

La única peculiaridad a la que debemos prestar atención es que en el lenguaje CSS las propiedades compuestas por varias palabras se escriben en kebab-case (como background-color): esto en JavaScript no es posible porque el símbolo "-" se considera como el operador matemático menos. Entonces tendremos que escribir las propiedades CSS en camelCase, esto quiere decir que:

background-color se convertirá backgroundColor
font-size se convertirá fontSize
border-width se convertirá borderWidth

Para modificar el estilo de varios elementos seleccionados con querySelectorAll() no podremos simplemente acceder a la propiedad de estilo ya que querySelectorAll no devuelve un único elemento sino una NodeList de elementos, por lo que tendremos que utilizar un ciclo forEach.

<p>Javascript DOM manipulation</p>

<p>Javascript DOM manipulation</p>

<p>Javascript DOM manipulation</p>

<script>

    let paragraphs = document.querySelectorAll('p');

    paragraphs.forEach((paragraph) => {
        paragraph.style.color = 'yellow';
        paragraph.style.backgroundColor = 'black'
    })

    console.log(paragraphs); // [p , p, p]

</script>

Modificar las clases de un elemento

Ahora intentemos modificar las clases de un elemento.
Para ello podemos utilizar 4 métodos:

add()
remove()
toggle()
replace()

Una vez seleccionado un elemento, podemos acceder a la propiedad classList y utilizar los métodos antes mencionados.

   <style>

        .btn-aulab {
            color: #212529;
            background-color: #ffed4a;
            border-color: #ffed4a;
            border-radius: 0px;
            padding: 10px 20px;
        }

    </style>

<button id="btnTest">Cliccami</button>

<script>

    let btnTest = document.querySelector("#btnTest");

    btnTest.classList.add("btn-aulab");

    // Tambien podemos pasar mas parametros al metodo add()

    btnTest.classList.add("btn","btn-aulab");

</script>

Con el método add() podemos agregar al botón la clase “btn-aulab” la cual modificará nuestro botón con sus propiedades.

La característica de este método es que si una clase ya está presente, no se agregará por segunda vez.

<button id="btnTest" class="btn-aulab">Cliccami</button>

<script>

    let btnTest = document.querySelector("#btnTest");

    btnTest.classList.remove("btn-aulab");

</script>

Con el método remove() eliminamos una o más clases del elemento

<button id="btnTest" class="btn-aulab">Haz clic</button>   

<script>

    let btnTest = document.querySelector("#btnTest");

    btnTest.classList.toggle("btn-aulab");

</script>

El método toggle() tiene una doble funcionalidad: de hecho, añadirá una clase si esta no está presente o la quitará si esta está presente.

<button id="btnTest" class="btn-brutto">Haz clic</button>   

<script>

    let btnTest = document.querySelector("#btnTest");

    btnTest.classList.replace("btn'brutto","btn-aulab");

</script>

Finalmente, el método replace() reemplaza una clase con una nueva clase, si y solo si la primera está presente dentro del elemento.

Modificar el contenido de un elemento

Para cambiar el contenido de un elemento HTML, necesitamos cambiar una propiedad dentro de un elemento DOM o innerHTML.
Esta propiedad nos permite insertar dentro de un elemento DOM no solo texto simple sino, incluso, código html que se representará como html a pesar de que ahora estamos "hablando" con la máquina en Javascript y no en HTML.

<h1 id="title">Benvenidos a este articulo</h1>

<script>

    let title = document.querySelector('#title');
    title.innerHTML = 'Javascript <strong>DOM</strong> manipulation';
    console.log(title);

    // <h1 id="title">Javascript <strong>DOM</strong> manipulation</h1>

</script>

Crear un elemento html y añadirlo en el DOM

¡Perfecto! Si has llegado hasta aquí, solo tenemos que fusionar todos los puntos anteriores y crear un elemento de forma dinámica con Javascript para añadirlo al DOM.

Como primer paso necesitamos crear un elemento html con el lenguaje Javascript.

<script>

    let button = document.createElement('button');

    console.log(button); // <button></button>

</script>

Una vez creado un elemento, solo tenemos que modificarlo con las clases que queramos y el contenido.

<script>

    let button = document.createElement('button');

    button.classList.add('btn-aulab');

    button.innerHTML = `

        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
        </svg>

        Like
    `;

    console.log(button); // <button class="btn-aulab"></button>

</script>

Terminado de estilizar el botón, solo debemos agregarlo al DOM con el método appendChild(); éste, sin embargo, para funcionar necesita un elemento al que "colgarse".

<div id="btnWrapper"></div>

<script>

    let button = document.createElement('button');

    button.classList.add('btn-aulab');

    button.innerHTML = `

        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
        </svg>

        Like
    `;

    let btnWrapper = document.querySelector('#btnWrapper');

    btnWrapper.appendChild(button);

</script>

Hemos creado un <div> que contendrá nuestro botón creado con el lenguaje JavaScript.

Eliminar un elemento html

Por último, veamos el método para eliminar un elemento html del DOM.

Para hacerlo utilizaremos el método removeChild()

<h1 id="title">Benvenidos a este articulo</h1>

<script>

    let title = document.querySelector('#title');

    title.parentNode.removeChild(title);

</script>

Como podemos notar, hemos utilizado el método removeChild en la propiedad parentNode.

Este último selecciona el padre del elemento en cuestión, porque el método removeChild debe usarse en el padre del elemento que queremos eliminar del DOM.

Añadir un evento al DOM

¿Qué son los eventos HTML?

Los eventos HTML son "cosas" que les suceden a los elementos HTML, como hacer clic en un botón, la emisión de datos en un input, desplazar el mouse o mover el mouse.
Esencialmente, todo lo que sucede en el navegador es un evento de captura de JavaScript.
Cuando ocurre un evento, como los descritos anteriormente, puede escribir un código JavaScript, llamado "escucha de eventos", que se ejecutará.
Estos detectores de eventos son funciones de programación JavaScript. Por lo tanto, cuando ocurre un evento en un elemento, se realiza la función de escucha.

Para agregar un detector de eventos a un elemento o a cualquier objeto DOM, usaremos el método addEventListener().

<h1 id="title">Benvenidos a este articulo</h1>

<button id="changeColorButton">Cambia color</button>

<script>

    let title = document.querySelector('#title');
    let changeColorButton = document.querySelector('#changeColorButton');

    changeColorButton.addEventListener('click', () => {

        let r = Math.floor(Math.random() * 255);
        let g = Math.floor(Math.random() * 255);
        let b = Math.floor(Math.random() * 255);

        title.style.color = `rgb(${r}, ${g}, ${b})`;
    })

</script>

En este fragmento de código, hemos agregado un detector de eventos al botón con id "changeColorButton" que, al hacer clic, generará tres números aleatorios que usaremos para crear un color aleatorio.

¡Bien! Ahora tienes lo básico para editar el DOM y crear efectos asombrosos; ¿Listo para experimentar con tu creatividad?

Conviértete en Desarrollador weben 6 meses

Descubre el bootcamp de programación Hackademy

Programa Completo