7. DOM

A very important and widely used feature is the ability to manipulate HTML, also called the DOM, however we need: create new tags, modify existing ones, delete, change text, attributes, add styles... and almost any element you can think of.

Currently there is a change of strategy for rendering a dynamic page. Traditionally, HTML was generated on the backend and the frontend was only responsible for modifying tags in response to some event. Nowadays the tendency is to gather all the information from the backend, through an API using Fetch in JSON format, and render the HTML on the frontend with some rendering framework (Vue, React, Angular...). Its advantages are numerous, but going deeper into that approach is not the goal of this lesson.

{: .advice } On the web you'll find a popular library called JQuery. It has fallen out of use because the latest versions of the JavaScript standard already provide more than enough tools to achieve the same results, so avoid adding it to your project.

Let's focus on everything JavaScript offers us.

Capturing an element

A selector with one match

This will probably be the option you use the most. With document.querySelector(), you'll capture a single element, and it will return an HTMLElement. An object that represents the tag. As if it were a CSS selector, you must indicate in its input parameter which element you want to obtain.

<h1 id="titulo">Curriculum vitae</h1>

const titulo = document.querySelector("#titulo");

console.log(titulo);
// <h1 id="titulo">Curriculum vitae</h1>

By id

Not recommended! Use document.querySelector() instead.

You can also capture an element solely by its id.

<h1 id="titulo">Curriculum vitae</h1>

const titulo = document.getElementById("titulo");

console.log(titulo);
// <h1 id="titulo">Curriculum vitae</h1>

Capturing several elements

We have different ways of capturing an element of the DOM.

A selector with several matches

With document.querySelectorAll() you can capture several elements at once. It will return a list. You must also use a selector, like CSS, to indicate which group of tags you're looking for.

<p class="contacto">Direcciones</p>
<p class="contacto">Teléfono</p>

const contactos  = document.querySelectorAll(".contacto");

console.log(contactos);
// [<p class="contacto">Direcciones</p>, <p class="contacto">Teléfono</p>]

By tag

Not recommended! Use document.querySelector() instead.

<p>Experiencia</p>
<p>Actitudes</p>
<p>Habilidades</p>

const parrafos = document.getElementsByTagName("p");

console.log(parrafos);
// [<p>Experiencia</p>, <p>Actitudes</p>, <p>Habilidades</p>]

By class

Not recommended! Use document.querySelectorAll() instead.

<h1 id="titulo">Curriculum vitae</h1>
<p>Experiencia</p>
<p>Actitudes</p>
<p>Habilidades</p>
<p class="contacto">Direcciones</p>
<p class="contacto">Teléfono</p>
<a href="http://papelera.com/" id="enlace">Ya le llamaremos</a>

const contactos = document.getElementsByClassName("contacto");

console.log(contactos);
// [<p class="contacto">Direcciones</p>, <p class="contacto">Teléfono</p>]

Styles

Now that we know how to capture DOM elements, let's manage their styles.

Read

Starting from the following HTML and CSS.

#titulo {
  color: orange;
}

<h1 id="titulo">Curriculum vitae</h1>

We capture the tag, not the CSS, from which we'll get the information, and we work with style followed by the style we're looking for.

const DOMTitulo = document.querySelector("#titulo");
const colorTitulo = DOMTitulo.style.color;

console.log(colorTitulo);
// orange

Add or overwrite

We continue with the same strategy.

#titulo {
  color: orange;
}

<h1 id="titulo">Curriculum vitae</h1>

This time we overwrite the element's style by assigning a new value.

const DOMTitulo = document.querySelector("#titulo");
titulo.style.color = "white";

console.log(titulo.style.color);
// white

console.log(titulo);
// <h1 id="titulo" style="color: white">Curriculum vitae</h1>

As you can see, it has created the style attribute with the new property. It does this so that the style we applied can't be overridden by the CSS cascade.

Delete

You can only remove styles added by JavaScript. To do so, you just need to assign null as the value.

#titulo {
  color: orange;
}

<h1 id="titulo">Curriculum vitae</h1>

const titulo = document.querySelector("#titulo");
titulo.style.color = "white";
titulo.style.color = null;

console.log(titulo.style.color);
// orange

console.log(titulo);
// <h1 id="titulo" style="">Curriculum vitae</h1>

Attributes

Read

<a href="http://dominio.com/" id="enlace">Otra página</a>

const miHref = document.querySelector("#enlace").getAttribute("href");

console.log(miHref);
// "http://dominio.com/"

Modify

<a href="http://dominio.com/" id="enlace">Otra página</a>

const enlace = document.querySelector("#enlace");
enlace.setAttribute("href", "http://falso.com/");

console.log(enlace.getAttribute("href"))
// "http://falso.com/"

Delete

<a href="http://dominio.com/" id="enlace" target="_blank">Otra página</a>

const enlace = document.querySelector("#enlace");
enlace.removeAttribute("target");

console.log(enlace)
// <a href="http://dominio.com/" id="enlace">Otra página</a>

Classes

classList: Read

<article id="mi-articulo" class="container center">

const miArticulo = document.querySelector("#mi-articulo");

console.log(miArticulo.classList);
// ["container", "center"]

add: Add

<article id="mi-articulo" class="container center">

const miArticulo = document.querySelector("#mi-articulo");
miArticulo.classList.add("hide");

console.log(miArticulo.classList);
// ["container", "center", "hide"]

remove: Remove

<article id="mi-articulo" class="container center">

const miArticulo = document.querySelector("#mi-articulo");
miArticulo.classList.remove("container");

console.log(miArticulo.classList);
// ["center"]

toggle: Toggle

If the class exists, it removes it. If it doesn't exist, it adds it.

<article id="mi-articulo" class="container center">

const miArticulo = document.querySelector("#mi-articulo");
miArticulo.classList.toggle("container");
miArticulo.classList.toggle("hide");

console.log(miArticulo.classList);
// ["center", "hide"]

DOM

Create

Let's generate a new tag, one that doesn't yet exist in the HTML.

We start from the following code.

<div id="articulo"></div>

1) We create the tag and store it in a variable to manage it.

const titulo = document.createElement("h1");

2) We modify it. In this case I'll add some content.

titulo.textContent = "Mi título";

3) I'll add it to another existing part of the DOM.

document.querySelector("#articulo").appendChild(titulo);

The result.

<div id="articulo">
  <h1>Mi título</h1>
</div>

Delete

We can use the reference we saved when creating it, with removeChild().

const titulo = document.createElement("h1");

document.querySelector("#articulo").removeChild(titulo);

Or capture the element directly and then delete it with remove().

document.querySelector("h1").remove();

Templates

When you need to generate a large block of HTML that carries a certain amount of complexity, you can simplify your life by creating a template that you'll then clone for use in your iterations.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Document</title>
    </head>
    <body>

        <nav id="nav">
            <ul id="nav__ul"></ul>
        </nav>

        <!-- Templates -->
        <template id="enlace">
            <li>
                <a href=""></a>
            </li>
        </template>

        <script>

         // Variables
         const misEnlaces = ["inicio", "nosotros", "contacto"];
         const navUl = document.querySelector("#nav__ul");
         // I capture the template content
         const templateLi = document.querySelector("template#enlace").content.firstElementChild;

         misEnlaces.forEach(function(enlace) {
             // I clone the template
             const nuevoLi = templateLi.cloneNode(true);
             // I customize the information
             nuevoLi.querySelector("a").textContent = enlace;
             nuevoLi.querySelector("a").setAttribute("href", "".concat(enlace, ".html"));
             // I add it to my <ul>
             navUl.appendChild(nuevoLi);
         });

        </script>
    </body>
</html>

The generated result would look like this.

<nav id="nav">
    <ul id="nav__ul">
        <li>
            <a href="inicio.html">inicio</a>
        </li>
        <li>
            <a href="nosotros.html">nosotros</a>
        </li>
        <li>
            <a href="contacto.html">contacto</a>
        </li>
    </ul>
</nav>

cloneNode(true) clones the object along with all its children, while cloneNode() clones only the parent object.

Cloning objects

Be careful with references! Why can we store a DOM element in a constant and still modify its content? Because in JavaScript, references to the object are stored, as if it were a C pointer. In other words, you store the address where it lives in memory. This leads to the following situations.

const persona1 = { edad: 42 };
const persona2 = persona1;
persona1 === persona2; // true, same reference

const persona3 = { edad: 42 };
persona1 === persona3; // false, different reference, even though the data is the same

Solution: always clone. You can use structuredClone(objecto) if it's an object or JSON. In the case of captured DOM elements, use cloneNode(), as we saw earlier.

const persona4 = structuredClone(persona1);
persona1 === persona4; // false

{: .advice } Avoid using the JSON.parse(JSON.stringify(objecto)) technique to clone objects, since it converts the objects to a string. For example, it will turn a new Date(123) value into "1970-01-01T00:00:00.123Z".

Parsing text into HTML

The insertAdjacentHTML function lets you convert text into DOM elements.

For example:

<p id="mi-p"></p>

const miP = document.querySelector("#mi-p");
miP.insertAdjacentHTML("beforeend", "<span>Texto</span>");

The result would be:

<p id="mi-p">
    <span>Texto</span>
</p>

It's not a quick replacement for everything we've seen so far. First, you lose the references to the created elements, so you won't be able to modify them. And second, it's not safe, because it can be an XSS attack vector (code injection). So use it with caution, and if possible, avoid it.

The first parameter of insertAdjacentHTML can be:

• beforebegin: Before the element.
• afterbegin: Inside the element, before its first child.
• beforeend: Inside the element, after its last child.
• afterend: After the element.

While the second parameter is the text you want to convert into DOM elements.

Don't confuse insertAdjacentHTML with innerHTML. The former adds HTML elements, while the latter overwrites the entire content of the element. For example, if you use innerHTML to add a new field to a form, you'll lose the values already entered by the user.

const portafolio = [
    {
    nombre: 'Gafas el tuerto',
    anyo: 2021,
    categoria: 'Web',
    imagen: 'foto.jpg',
    descripcion: 'Una e-commerce para la venta de monoculos baratos.'
    },
    {
    nombre: 'Ropa sucia',
    anyo: 2019,
    categoria: 'APP',
    imagen: 'foto2.jpg',
    descripcion: 'Red social de solteros que viven solos.'
    }
...
]

const baraja = [
  1, 2, 3, 4, 5, 6, 7, 0.5, 0.5, 0.5
  1, 2, 3, 4, 5, 6, 7, 0.5, 0.5, 0.5
  1, 2, 3, 4, 5, 6, 7, 0.5, 0.5, 0.5
  1, 2, 3, 4, 5, 6, 7, 0.5, 0.5, 0.5
];
let mano = [];