Cómo manipular el DOM en Vanilla JavaScript

Así que ha aprendido las variables, las estructuras de selección y los bucles. Ahora es el momento de aprender sobre la manipulación DOM y comenzar a hacer algunos proyectos de JavaScript interesantes.

En este tutorial, aprenderemos cómo manipular el DOM con JavaScript vanilla. Sin más preámbulos, saltemos de lleno.

1. Primero lo primero

Antes de sumergirnos en la codificación, aprendamos qué es realmente el Dom:

El Modelo de objetos de documento (DOM) es una interfaz de programación para documentos HTML y XML. Representa la página para que los programas puedan cambiar la estructura, el estilo y el contenido del documento. El DOM representa el documento como nodos y objetos. De esa forma, los lenguajes de programación pueden conectarse a la página. Fuente

Básicamente, cuando un navegador carga una página, crea un modelo de objeto de esa página y lo imprime en la pantalla. El modelo de objeto se representa en una estructura de datos de árbol, cada nodo es un objeto con propiedades y métodos, y el nodo superior es el objeto del documento.

Se puede utilizar un lenguaje de programación para acceder y modificar este modelo de objetos, y esta acción se denomina manipulación DOM. Y lo haremos con JavaScript porque JS es increíble.

2. El tutorial real

Para el tutorial, necesitaremos dos archivos, uno index.html y otro manipulation.js.

  DOM Manipulation 

DOM manipulation

Tutorial

Sibling

Medium Tutorial

Out of the div

Ahí tenemos nuestro archivo HTML y, como puede ver, tenemos un div con la identificación de la división. Dentro de eso tenemos un elemento h1, y en la misma línea, entenderás por qué más adelante, tenemos dos elementos p y la etiqueta de cierre div. Finalmente tenemos un elemento p con una clase de texto.

2.1. Accediendo a los elementos

Podemos acceder a un solo elemento oa varios elementos.

2.1.1. Accediendo a un solo elemento

Para acceder a un solo elemento, veremos dos métodos: getElementByID y querySelector.

// the method below selects the element with the id ofheadlet id = document.getElementById('head');
// the code below selects the first p element inside the first divlet q = document.querySelector('div p');
/* Extra code */// this changes the color to redid.style.color = 'red';// give a font size of 30pxq.style.fontSize = '30px';

Ahora hemos accedido a dos elementos, el elemento h1 con el id de head y el primer elemento p dentro del div.

getElementById toma como argumento un id, y querySelector toma como argumento un selector CSS y devuelve el primer elemento que coincide con el selector. Como puede ver, asigné el resultado de los métodos a variables y luego agregué algunos estilos al final.

2.1.2. Accediendo a múltiples elementos

Al acceder a varios elementos, se devuelve una lista de nodos. No es una matriz, pero funciona como una. Por lo tanto, puede recorrerlo y usar la propiedad length para obtener el tamaño de la lista de nodos. Si desea obtener un elemento específico, puede usar la notación de matriz o el método del elemento. Los verá en el código.

Para acceder a múltiples elementos vamos a utilizar tres métodos: getElementsByClassName, getElementsByTagName y querySelectorAll.

// gets every element with the class of textlet className = document.getElementsByClassName('text');
// prints the node listconsole.log(className);
/* prints the third element from the node list using array notation */console.log(className[2]);
/* prints the third element from the node list using the item function */console.log(className.item(2));
let tagName = document.getElementsByTagName('p');let selector = document.querySelectorAll('div p');

El código parece explicarse por sí mismo, pero lo explicaré de todos modos porque soy un buen tipo. :)

Primero, usamos getElementsByClassName que toma un nombre de clase como argumento. Devuelve una lista de nodos con cada elemento que tiene texto como clase. Luego imprimimos la lista de nodos en la consola. También imprimimos el tercer elemento de la lista usando la notación de matriz y el método del elemento .

En segundo lugar, seleccionamos cada elemento p usando el método getElementsByTagName que toma un nombre de etiqueta como argumento y devuelve una lista de nodos de ese elemento.

Finalmente, usamos el método querySelectorAll , que toma como argumento un selector CSS. En este caso, toma div p, por lo que devolverá una lista de nodos de p elementos dentro de un div.

Como ejercicio de práctica, imprima todos los elementos de tagName y la lista de nodos selectores y averigüe su tamaño.

2.2. Atravesando el DOM

Hasta ahora hemos encontrado una forma de acceder a elementos específicos. ¿Qué sucede si queremos acceder a un elemento junto a un elemento al que ya hemos accedido, o acceder al nodo padre de un elemento accedido anteriormente? Las propiedades firstChild, lastChild, parentNode, nextSibling y previousSibling pueden hacer este trabajo por nosotros.

firstChild se usa para obtener el primer elemento hijo de un nodo. lastChild , como adivinó, obtiene el último elemento secundario de un nodo. parentNode esse utiliza para acceder a un nodo padre de un elemento. nextSibling nos obtiene el elemento al lado del elemento ya accedido, y previousSibling nos obtiene el elemento anterior al elemento ya accedido.

// gets first child of the element with the id of divisionlet fChild = document.getElementById('division').firstChild;console.log(fChild);
// gets the last element from element with the id of divisionlet lChild = document.querySelector('#division').lastChild;
// gets the parent node of the element with the id divisionlet parent = document.querySElector('#division').parentNode;console.log(parent);
// selects the element with the id of middlelet middle = document.getElementById('middle');// prints ond the console the next sibling of middleconsole.log(middle.nextSibling);

El código anterior primero obtiene el elemento firstChild del elemento con el ID de división y luego lo imprime en la consola. Luego obtiene el elemento lastChild del mismo elemento con el ID de división. Luego obtiene el parentNode del elemento con el id de división y lo imprime en la consola. Finalmente, selecciona el elemento con el id del medio e imprime su nodo nextSibling .

Most browsers treat white spaces between elements as text nodes, which makes these properties work differently in different browsers.

2.3. Get and Updating element content

2.3.1. Setting and getting text Content

We can get or set the text content of elements. To achieve this task we are going to use two properties: nodeValue and textContent.

nodeValue is used to set or get the text content of a text node. textContent is used to set or get the text of a containing element.

// get text with nodeValuelet nodeValue = document.getElementById('middle').firstChild.nodeValue;console.log(nodeValue);
// set text with nodeValuedocument.getElementById('middle').firstChild.nodeValue = "nodeValue text";
// get text with textContentlet textContent = document.querySelectorAll('.text')[1].textContent;console.log(textContent);
// set text with textContentdocument.querySelectorAll('.text')[1].textContent = 'new textContent set';

Did you notice the difference between nodeValue and textContent?

If you look carefully at the code above, you will see that for us to get or set the text with nodeValue, we first had to select the text node. First, we got the element with the middle id, then we got its firstChild which is the text node, then we got the nodeValue which returned the word Tutorial.

Now with textContent, there is no need to select the text node, we just got the element and then we got its textContent, either to set and get the text.

2.3.2. Adding and Removing HTML content

You can add and remove HTML content in the DOM. For that, we are going to look at three methods and one property.

Let’s start with the innerHTML property because it is the easiest way of adding and removing HTML content. innerHTML can either be used to get or set HTML content. But be careful when using innerHTML to set HTML content, because it removes the HTML content that is inside the element and adds the new one.

document.getElementById('division').innerHTML =`
      
  • Angular
  • Vue
  • React
`;

If you run the code, you will notice that everything else in the div with the id of division will disappear, and the list will be added.

We can use the methods: createElement(), createTextNode(), and appendChild() to solve this problem.

createElement is used to create a new HTML element. creatTextNode used to create a text node, and appendChild is used to append a new element into a parent element.

//first we create a new p element using the creatElementlet newElement = document.createElement('p');/* then we create a new text node and append the text node to the element created*/let text = document.createTextNode('Text Added!');newElement.appendChild(text);
/* then we append the new element with the text node into the div with the id division.*/document.getElementById('division').appendChild(newElement);

There is also a method called removeChild used to remove HTML elements.

// first we get the element we want to removelet toBeRemoved = document.getElementById('head');// then we get the parent node, using the parentNOde propertylet parent = toBeRemoved.parentNode;/* then we use the removeChild method, with the element to be removed as a parameter.*/parent.removeChild(toBeRemoved);

So first we get the element that we want to remove, and then we get its parent node. Then we called the method removeChild to remove the element.

2.4. Attribute node

Now we know how to handle elements, so let’s learn how to handle the attributes of these elements. There are some methods like GetAttribute, setAttribute, hasAttribute, removeAttribute, and some properties like className and id.

getAttribute as its name may suggest, it is used to get an attribute. Like the class name, the id name, the href of a link or any other HTML attribute.

setAttribute is used to set a new attribute to an element. It takes two arguments, first the attribute and second the name of the attribute.

hasAttribute used to check if an attribute exists, takes an attribute as an argument.

removeAttribute used to remove an attribute, it takes an attribute as an argument.

Id this property is used to set or get the id of an element.

ClassName is used to set or get the class of an element.

// selects the first divlet d = document.querySelector('div');// checks if it has an id attribute, returns true/falseconsole.log('checks id: '+d.hasAttribute('id'));// set a new class attributed.setAttribute('class','newClass');// returns the class nameconsole.log(d.className);

I know I am a good dude, but that code is just self-explanatory.

Conclusion

That is it! We have learned so many concepts, but there is more to learn about DOM manipulation. What we have covered here gives you a good foundation.

Go ahead and practice, and create something new to cement this new knowledge.

Good day, good coding.