Clase 18 - DOM

No hubo consultas sobre listas y objetos, pasamos a ver DOM.

Documentación de referencia:

DOM

Vimos distintas operaciones que podemos realizar conectando con el Modelo de Objetos del Documento (DOM, por sus siglas en inglés). Referencia en MDN

Buscar Elementos

Para buscar y seleccionar elementos dentro del DOM podemos usar document.querySelector() y document.querySelectorAll().

// buscar elementos dentro del documento
document.querySelector(); // nos devuelve el primer elemento
document.querySelectorAll(); // nos devuelve una lista de elementos

let primerParrafo = document.querySelector('p');
let todosLosParrafos = document.querySelectorAll('p');

// podemos usar selectores de CSS con todas las condiciones que necesitemos
let elementoConCondiciones = document.querySelector('div#id > p.clase');

Como alternativa, podemos usar otros métodos para buscar elementos específicos.

document.getElementById('id');
document.getElementsByClassName('clase');
document.getElementsByTagName('tag');
document.getElementsByName('nombre');

Las búsquedas funcionan para encontrar elementos dentro de otros elementos.

<!-- Estructura en HTML -->
<div class="padre">
	<p class="hijo">Elemento Hijo</p>
</div>

// podemos buscar un elemento inicial
let elementoPadre = document.querySelector('div.padre');

// y luego buscamos el elemento hijo sólo dentro del elemento padre
let elementoHijo = elementoPadre.querySelector('p.hijo');

Crear Elementos

let nuevoElemento = document.createElement('etiqueta');

// por ejemplo para crear un párrafo
let nuevoParrafo = document.createElement('p');
nuevoParrafo.innerText = "Este es el contenido del nuevo párrafo.";

Para conocer todos los atributos (además del innerText que usamos en el ejemplo) y métodos que se pueden usar en el nuevo elemento, se puede consultar la documentación de element en MDN.

Mostrar Elementos

Luego de crear elementos, tenemos que decidir en que parte del arbol del DOM los vamos a mostrar. Para eso podemos agregar nuestro nuevo elemento como un hijo de otro elemento ya existente en el DOM. Para esto podemos usar .append() y .prepend().

// agregar como primer hijo
elementoPadre.append(elemetoHijo);

// agregar como último hijo
elementoPadre.prepend(elementoHijo);

Clonar Elementos

Una forma más rápida de crear elementos nuevos es hacerlo a partir de otros elementos ya existentes en el DOM. Para esto podemos usar .cloneNode().

Si le pasamos como parámetro el valor true, esto hace una clonación profunda (es decir, copia todos los elementos internos también), de otra manera se hace una clonación superficial donde sólo se copia el elemento más externo.

<!-- Estructura en HTML -->
<div class="padre">
	<p class="hijo">Elemento Hijo</p>
</div>

let elementoPadre = document.querySelector('div.padre');

// hacemos una *clonacion superficial* de elementoPadre en nuevoElemento
let nuevoElemento = elementoPadre.cloneNode();

// hacemos una *clonación profunda* de elementoPadre (y todo su contenido) en nuevoElemento
let nuevoElemento = elementoPadre.cloneNode(true);

Eliminar Elementos

let elementoPadre = document.querySelector('div.padre');
elementoPadre.remove();

Eventos

Otra funcionalidad que vimos fue la de conectar eventos con nuestro código.

Se puede hacer directo desde HTML:

<!-- Evento desde HTML -->
<button onclick="miFuncion()">
	Hacer Algo
</button>

<script>
	// se define el handler de evento desde JS
	function miFuncion() {
		console.log("Hice Algo!")
	}
</script>

O también se puede hacer desde el DOM

<!-- No se asocia desde HTML -->
<button>
	Hacer Algo
</button>

<script>
	// se define el handler de evento desde JS
	function miFuncion() {
		console.log("Hice Algo!")
	}

	// y también se asocia el evento al elemento desde JS
	document.querySelector('button').addEventListener('click', miFuncion);
</script>

Referencia de addEventListener(): https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener