Manipulación del DOM

Cuando iniciamos en el mundo del desarrollo con tecnologías web necesariamente nos encontramos con el lenguaje de programación JavaScript que es el que corre por excelencia en todos los navegadores, sin embargo, para poder crear contenido en javascript e integrarlo a nuestra web debemos conocer un poco sobre el DOM, Document Object Model.

DOM?(Document Object Model): No es más que un árbol de nodos en el cual está representado cada una de las etiquetas HTML que nosotros colocamos en nuestro proyecto.

CSSOM(CSS Object Model): Es un conjunto de APIs que permite manipular CSS desde JavaScript. Así como el DOM (Document Object Model) es para HTML, el CSSOM (CSS Object Model) es para CSS. Permite leer y modificar el estilo de CSS de forma dinámica.

Para llegar al DOM y CSSON ocurre un proceso que se llama El Camino Crítico de Renderización(Critical Rendering Path) es la secuencia de pasos que el navegador realiza para convertir el HTML, CSS y JavaScript en píxeles en la pantalla.

Básicamente tenemos 4 formas de leer nodos con Javascript

• parent.getElementById(‘id’) => nos permite obtener un elemento a través de su id.
• parent.getElementsByClassName(‘class’) => obtiene un array con todos los elementos hijos que tengan esa clase, ojo “getElementByClassName” no existe, es decir no podremos obtener solo 1 elemento con esa clase.
• parent.getElementsByTagName(‘div’) => con este método obtenemos una lista o “array list” con todos los elementos que tengan esa etiqueta, ejemplo todos los divs. Al igual que con el método anterior no hay posibilidad de usarlo en singular, siempre tendremos que usar getElements
• parent.querySelector() => nos permite buscar de 3 formas, con id, clase o tagName. A diferencia de los 2 anteriores este nos devuelve 1 solo elemento, el primero que contenga el valor que se le paso. Id => (‘#id’), class => (‘.class’), tagName (‘div’)
• parent.querySelectorAll() => este método retorna una array list con todos los elementos que tengan ese selector (id, class o tagName)
• Casi siempre el elemento “padre o parent” es document. ya que estamos haciendo referencia a todo el DOM, todo el documento y esto en ciertos casos nos permite evitar errores.
  ejemplo = const button = document.querySelector(‘#button)

La diferencia entre NodeList y Array, es que el NodeList carece de métodos que si están disponibles en los Arrays, pero podemos pasar esto fácilmente usando el operador de propagación.

const nodeListAsArray = [...nodeList]

Es recomendable que cada vez que tengamos un NodeList lo pasemos a Array ya que los motores de javascript como el motor V8 de google están más optimizados para Arrays que para NodeList.

Al decir “crear nodos” nos referimos a crear elementos dentro de nuestro DOM. Para ello podemos hacer uso de:

const myTag = document.createElement("h1")const texto = document.createTextNode("¡Hola, Mundo!")

Ahora los agregamos al DOM, para ello, JavaScript nos provee de estas formas:

// Obtenemos el elemento padre // Creamos el nodo a insertar // Creamosel texto del nodo // Insertamos el texto al nodo // Inserto el nodo al padreconst texto = document.createTextNode("Hola!") 
h3.appendChild(h3) 
parentElement.appendChild(h3) const h3 = document.createElement("h3") const parentElement = document.querySelector("selector")// Obtengo el elemento padre // Agrego al elemento padreparentElement.append("agrego un texto", document.createElement("div")) const parentElement = document.querySelector("selector")// Obtengo el elemento padre // Creo un elemento // Obtengo la referencia del elemento del que quiero insertar antes: // ¡Lo insertamosconst referencia = document.querySelector("selector") 
parentElement.insertBefore(titulo, referencia) const titulo = document.createElement("h1") const parentElement = document.querySelector("selector")

1. beforebegin: Lo inserta antes del nodo
2. afterbegin: Lo inserta después del nodo
3. beforeend: Lo inserta antes de donde finaliza el nodo
4. afterend: Lo inserta después de donde finaliza el nodo

// Obtengo el elemento padre // Creo un elemento
const nodo = document.createElement("span") parentElement.insertAdjacentElement("beforebegin", nodo) const parentElement = document.querySelector("selector")

• node.outerHTML: Para leer HTML para leer HTML
• node.innerHTML: Para escribir HTML

Sin embargo, tienen un problema de seguridad 👀☝️

hack: Cuando en el inspector de elementos seleccionamos un elemento y en la consola escribes $0, este te devolverá el elemento tal como si lo hubieses seleccionado con document.querySelector().

El problema con estas formas de inserciones es que permiten la inserción XSS, es decir, código maligno, y cualquier usuario programador malicioso podría meter scripts molestos. Siempre sanitiza (remover caracteres especiales) de los inputs de tus usuarios.

padre.removeChild(nodoAEliminar)

2. Remove: Es la evolución de remove child. No está soportado en internet explorer.

nodoAEliminar.remove()

3. Replace Child: Nos permite reemplazar un nodo

padre.replaceChild(nuevoNodo, aRemplazar)

Podemos eliminar nodos con diferentes métodos que nos provee el DOM como ser removeChild, el cual necesita la referencia del padre a eliminar y del nodo que se eliminara, remove el cual se encarga de eliminar el nodo solo con la referencia deseada a borrar y finalmente replaceChild que nos ayuda reemplazar un elemento con las referencias del padre, el nuevo nodo y el elemento a reemplazar.

¡Espero que este artículo haya sido útil! Si te ha gustado el Post o crees que hay algo pueda hacer de otra forma, no dudes en dejarlo en los comentarios!. Puedes estar en contacto conmigo en mis cuentas de Twitter, facebook y LinkedIn.☺ Puedes encontrar mis otros artículos de desarrollo aquí.