Manipulacion del DOM

Last updated Aug 6, 2023 Edit Source

• Programming
• Frontend
• Javascript

La manipulacion del DOM ocurre cuando utilizamos un lenguaje de programacion para interactuar de forma dinamica con un documento de HTML mediante el WEB API que ofrecen los navegadores.

Utilizando JavaScript existen muchas formas de manipularlo. Aqui algunas de ellas.

Hay una forma especial de seleccionar todo el documento

Es un elemento especial del objeto document que sirve para seleccionar todo el documento HTML.

Te permite seleccionar el head del HTML

Te permite seleccionar el body del HTML

Primeramente debemos obtener el objeto del documento html, y posteriormente llamar al metodo especial querySelector().

En el parametro del metodo querySelector debemos colocar un selector de la misma forma que lo hacemos en CSS. Un .nombre para clases un #nombre para los IDs, etc etc.

1

document.querySelector('.text'); // Seleccion del primer elemento con el nombre de clase 'text', por ejemplo, <p class='text'>Hola mi nombre es Jaime Ayala</p>

Recordemos que se maneja en estructura de arbol, por tanto, debemos especificar que parte del objeto con clase ’texto’ queremos, en este caso, veamos su contenido textual:

1

console.log(document.querySelector('.text').textContent); // Hola mi nombre es Jaime Ayala

Aparte de poder leerla, tambien podemos sobreescribirla como si fuera una variable:

1

document.querySelector('.text').textContent = 'Hola me llamo Jaime'; // Actualizacion del elemento con la clase 'text'

Como sabemos ahora, los elementos de un objeto no solo son propiedades, si no que tambien pueden ser metodos!. Por eso, tras seleccionar una etiqueta del documento podemos agregarle cosas como un escuchador de eventos para reaccionar a lo que hace el usuario.

Tiene las mismas funciones y propiedades que querySelector solo que, en vez de seleccionar al primero, selecciona todos los elementos con el selector especificado y devuelve un NodeList (que funciona como un Arrays en JavaScript) con ellos dentro.

Recibe un id de un elemento del documento y lo devuelve. Tiene que ser un id especificamente

Recibe una etiqueta y te devuelve un HTMLCollection con todos los elementos que sean de esa etiqueta.

Un HTML Collection es afectada en tiempo real por cambios en el DOM

Recibe una clase y devuelve un HTMLCollection con todos los elementos que contengan ese nombre de clase.

Sirve para insertar html antes, dentro, antes de terminar y despues de la etiqueta de cierre de un elemento html, de esta forma, podemos agregar de manera dinamica elementos al DOM.

1
2
3

const htmlElement = '<div class='hola'>hola</div>';

document.querySelector('.div1').insertAdjacentHtml('afterbegin', htmlElement);

Recibe el nombre de una etiqueta y retorna el elemento que peude ser agregado al DOM en cualquier punto.

La ventaja esque podemos modificar e ir agregando elementos conforme nos vaya pareciendo. Agregar clases, agregar otros elementos, agregar HTML, agregar estilos y todo lo que se puede modificar de un elemento HTML

Agrega un elemento HTML al inicio de la etiqueta (tras solo realizarla)

Agrega un elemento HTML como ultimo elemento de un contenedor

Se puede aplicar con un elemento HTML y sirve para realizar una shallow y deep copy de un elemento. Necesario debido a la inmutabilidad de los elementos.

Inserta un elemento HTML antes de otro elemento HTML sobre el que se especifica el elemento

Inserta un elemento HTML despues de otro elemento HTML sobre el que se especifica el elemento

Sirve para remover un elemento del DOM de HTML. Lo borra completamente

Para poder asignar los estilos tenemos que tener seleccionado un elemento utilizando cualquiera de los selectores disponibles.

Tambien podemos cambiar los estilos de cualquier elemento de forma dinamica, esto se hace accediendo a la propiedad .style. Una vez hecho esto solo nos queda especificar una propiedad de CSS por cambiar:

1

document.querySelector('.texto').style.color = '00fffff'; // Cambia la letra a color amarillo

Otra forma (y la mas utilizada) de modificiar los estilos de una pagina web es agregar, remover y modificar las clases de un elemento, de esta forma, podemos agregar y remover un grupo de caracteristicas del elemento que busquemos.

Para esto, cada elemento del documento cuenta con un objeto especial llamado classList que sirve para referirse al atributo de clases de la etiqueta HTML.

1

document.querySelector('.button').classList.add('hidden'); // Selecciona el elemento con la clase 'boton', selecciona su lista de clases y agrega la clase 'hidden'

En este caso, si en el archivo CSS existen propiedades para la clase ‘hidden’ se aplicaran al elemento de forma dinamica.

Es una funcion integrada que sirve para obtener los estilos computados de un elemento

1
2

const element = document.querySelector('#btn');
getComputedStyle(element).style;

Tambien es posible cambiar las variables CSS que son definidas en un archivo es estilos.

1
2
3

:root {
	--color-primary: red;
}

Para hacerlo, debemos acceder al documento root y cambiar esa propiedad. En JavaScript se haria utilizando la funcion setProperty.

1

document.documentElement.style.setProperty('--color-primary', 'green');

Para cambiar los atributos de una etiqueta de HTML, primero se necesita elegirla utilizando cualquiera de los selectores.

Estos se encuentran definidos como propiedades de cualquier elemento HTML, por tanto, pueden ser accedidas utilizando la sintaxis del .

1
2
3
4

const element = document.querySelector('#element');
element.id // id proeprty
element.className // class property
element.designer // undefined

Sin embargo, esto solo nos permite leer las propiedades que son esperadas de un elemento, por tanto, todos los atributos que no sean respectivos a un elemento no funcionaran de esta forma.

Esta sintaxis nos permite sobreescribir los valores de los atributos.

1

element.id = 'newId';

Existe un metodo especial de cualquier elemento HTML que nos sirve para obtener un atributo aun cuando este no es parte estandar de los elementos definidos para esa etiqueta en particular.

1

element.getAttribute('designer'); // Jaime

Como es logico, el metodo setAttribute nos permite colocar valores y atributos a un elemento

1

element.setAttribute('company', 'Name');

Esta propiedad solo es aplicable para los data attributes que se pueden definir en un documento HTML.

1
2
3

<div class="container" data-variable-mov="3.33">

</div>

1

const element = document.querySelector('.container').dataset.dataVariableMov // 3.33

Un evento señaliza la ocurrencia de algo en el UI, el ejemplo mas comun es una interaccion con el usuario

Un EventListener nos sirve para escuchar un elemento y hacer algo con el. No cambia la ocurrencia de un evento, solo cambia la respuesta que tiene el codigo respecto a el.

Veamos un boton que al ser presionado actualiza el valor de nuestra etiqueta texto mediante el metodo .addEventListener:

1
2
3

document.querySelector('.button').addEventListener('click', () =>
	document.querySelector('.text').textContent = 'Presionado!';
)

El primer parametro de este metodo es el tipo de evento al que esta escuchando y el segundo la expresion funcional (funcion anonima) que ejecutara cuando sea detectado. En este caso utilice una arrow function.

Es posible obtener informacion detallada sobre el evento en forma de un objeto, esto se hace poniendo un parametro dentro de la expresion funcional del eventListener:

1
2
3

document.querySelector('.button').addEventListener('click', (event) =>
	console.log(event);
)

Una de las funcionalidades mas basicas es interactuar con el usuario mediante el teclado, en una pagina web, se puede hacer mediante un eventListener.

Al tratarse del teclado, se debe declarar como un event global. Es decir, que ocurriran sin importar en que parte o momento de la pagina nos encontremos porque se encuentra embebido dentro del documento.

Veamos un ejemplo:

1
2
3

document.addEventListener('keydown', (event) => {
	console.log(event);
})

Existe una propiedad especial para cada uno de los eventos disponibles en un elemento de HTML. Este recibe la sintaxis especial ‘onX’ donde X es el nombre del evento, ejemplos:

1
2

element.onClick = //...
element.onMouseEnter = //...

Es una forma legacy de setear un evento, solo permite a una funcion ejecutarse por propiedad

Sirve para remover un event listener de ocurrir. Nos sirve para remover un comportamiento basado en otro evento.

Es una tecnica que sirve para viajar en el DOM de forma dinamica basado en los elementos de una pagina web.

Esta funcion tambien puede ser ejecutada sobre un elemento (Nodo) para buscar dentro de sus hijos

Te sirve para visualizar una lista de nodos (elementos) que estan contenidos dentro de otro elemento.

Cumple la misma funcion que childNodes pero esta te devuelve un HTMLCollection (mutable), es decir que todos los cambios realizados a estos elementos mantendran la lista actualizada en tiempo real.

Esta solo funciona para hijos directos, no a ningun anidado

Sirve para obtener el padre inmediato del elemento

Sirve para obtener tambien el padre in mediato del elemento

Sirve para buscar un elemento entre los padres de un elemento

Es una API que sirve para que el codigo reaccione a los cambios cuando un contenedor o elemento intercepte con otro ocon el viewport

Esta API sigue el paradigma orientado a objetos. Por tanto, debemos instanciar un nuevo IntersectionObserver

1
2

const observer = new IntersectionObserver();
observer.observe(element)

Mediante el metodo observe podemos especificar al elemento que tiene que observar

Al constructor se le puede pasar una funcion de callback y unas opciones.

Las opciones disponibles son:

• root. Elemento con el que se debe interseptar (Puede ser null, esto significa que va a interceptar el viewport)
• threshold. Cuanto % del elemento debe estar dentro del root para que se active la callback function.

Se trigerea por el documento cuando el HTML es completamente cargado, es decir, descargado y convertido en el dom tree.

Se trigerea por el window no solo cuando el HTML carga sino cuando carga trodan las imagenes, los scripts, y todos los elementos de la pagina.

Se trigerea por ewl window tambien y representa al evento que ocurre cuando el usuario esta a punto de dejar la pagina.

" estas seguro que quieres dejar la pagina?"

Para integrar un script de JS tenemos multiples opciones. Ponerla en el head o en el body. Adicionalmente tenemos dos etiquetas especiales las cuales modifican el comportamiento que este tiene

• Async se utiliza para grandes scripts
• Defer se utiliza casi siempre, para cargar de forma asincrona un script y ejecutarlo hasta que se termine de descargar
• Forma normal para soportar navegadores viejos