FULL STACK

Comenzamos en unos
minutos
Javascript: Clase 5
Introducción al DOM
 ¿Se acuerdan del DOM?

academianumen.com
 DOM API
El objeto windows que vimos la clase pasada posee una API que nos permite interactuar
con los elementos del DOM.

console.log(window.document)

academianumen.com
 DOM API
Si quisiéramos acceder a cada parte del documento, simplemente utilizamos la notación
del punto de esta forma:

console.log(document.doctype)

console.log(document.documentElement)

console.log(document.head)

console.log(document.body)
academianumen.com
 Manejo del DOM

Para poder interactuar con el DOM, Javascript utiliza una serie de métodos que rastrean
selectores. Estos selectores pueden ser desde etiquetas HTML hasta valores de ciertos
atributos.
Recorramos estos selectores uno por uno.

academianumen.com
 Selectores: Por nombre de etiqueta
El primero de los selectores que veremos es el selector por nombre de etiqueta. Este nos
permite conectar Javascript a una o varias etiquetas de un mismo tipo.

<!-- index.html -->

<ul> console.log(document.getElementsByTagName('li'))

<li>Fuego</li>
<li>Tierra</li>
<li>Agua</li>
<li>Aire</li>
</ul>

academianumen.com
 Selectores: Por nombre de clase
Este selector nos permite conectar a Javascript con el DOM a través del valor que le
ingresemos al atributo class de determinada etiqueta.

<!-- index.html -->

console.log(document.getElementsByClassName("item"))
<ul>
<li class="item">Fuego</li>
<li class="item">Tierra</li>
<li class="item">Agua</li>
<li class="item">Aire</li>
</ul>

academianumen.com
 Selectores: Por nombre
Así como podemos conectarnos a través del atributo class, otra forma que nos provee
Javascript es conectarnos por medio del atributo name. Esto es especialmente importante
a la hora de manipular formularios.

<!-- index.html -->

<form>
<input type="text" name="name"> console.log(document.getElementsByName("name"))
<input type="number" name="phone"> console.log(document.getElementsByName("phone"))
<input type="email" name="email"> console.log(document.getElementsByName("email"))
</form>

academianumen.com
 Selectores: Por ID
Finalmente, y no menos importante, está la posibilidad de manipular el DOM por medio del
atributo ID o selector único.

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

console.log(document.getElementById("titulo"))

academianumen.com
 Selectores: Query Selector
Durante mucho tiempo se han usado los métodos para conectar por nombre, nombre de
clase y nombre de etiqueta. Sin embargo, en las últimas versiones de Javascript, han
aparecido dos nuevos métodos que reemplazan de manera más eficiente a estos.
Un de ellos es el querySelector(). Veamos que hace:

<section id="seccion">
<h2 class="titulo">Un Titulo</h2>
</section>

console.log(document.querySelector("h2"))
console.log(document.querySelector("#seccion"))
console.log(document.querySelector(".titulo"))

academianumen.com
 Selectores: Query Selector All
querySelectorAll() es similar a querySelector() con la diferencia que nos trae todos los
elementos del mismo un mismo tipo. Vamos...

<ul>
<li>Fuego</li> console.log(document.querySelectorAll("li"))

<li>Tierra</li>
<li>Agua</li>
<li>Aire</li>
</ul>

academianumen.com
 Métodos para atributos: get

El método getAttribute() nos devuelve el valor de un atributo. Veámoslo:

console.log(document.querySelector("ul").getAttribute("name"))

<ul name="lista">
<li>Fuego</li>
<li>Tierra</li>
<li>Agua</li>
<li>Aire</li>
</ul>

academianumen.com
 Métodos para atributos: set

El método setAttribute() nos permite agregar un atributo y su valor a una etiqueta.

Veámoslo:
<a href="#">Un enlace</a>

console.log(document.querySelector("a").setAttribute("target", "_blank"))

academianumen.com
 Texto y HTML
Javascript nos permite manipular el DOM a través de ciertas propiedades. textContent sirve
para agregar contenido a una etiqueta, innerHTML para insertar etiquetas con contenido a
una etiqueta y outerHTML para reemplazar una etiqueta por etiquetas con contenido.

<article id="articulo">
const $articulo = document.getElementById('articulo')

</article>

let texto = `
<p>
$articulo.textContent = texto
Lorem ipsum dolor <b>sit amet</b>
consectetur
$articulo.innerHTML = texto <mark>adipisicing elit</mark>.
Quisquam, nemo.
$articulo.outerHTML = texto </p>
`

academianumen.com
 Recorriendo el DOM (Traversing)
Javascript posee propiedades que nos permiten recorrer los elementos del DOM. Aquí
veremos las más importantes que son children y parentElement.

<section>
<ul id="estaciones"> var $estaciones = document.getElementById('estaciones')

<li>Verano</li>
<li>Otoño</li>
console.log($estaciones.children)
<li>Invierno</li>

console.log($estaciones.children[2])
<li>Primavera</li>
</ul>
console.log($estaciones.parentElement)
</section>

academianumen.com
 Creando Elementos del DOM
Otra funcionalidad que nos provee Javascript es la de crear Elements en el DOM. Para esto
disponemos de los métodos createElement() y appendChild(). Veamos como funciona:

const $cards = document.querySelector(".cards"),

<section class="cards"> $figure = document.createElement("figure"),
$img = document.createElement("img"),
</section> $figcaption = document.createElement("figcaption"),
$figcaptionText = document.createTextNode("Hola Mundo")

$img.setAttribute("src", $cards.appendChild($figure);
"http://pm1.narvii.com/6378/71077675a874957c3 $figure.appendChild($img);
8a660206fe3ca672b1569f4_00.jpg"); $figure.appendChild($figcaption);
$img.setAttribute("alt", "yoda");
$img.setAttribute("width", "150");
$figcaption.appendChild($figcaptionText);
academianumen.com
 Creando HTML dinamico
Javascript nos permite generar HTML de manera dinámica iterando sobre arreglos que
contengan información. Para esto usaremos alguno de los métodos callbacks antes vistos.

const estaciones = ["Verano", "Otoño", "Invierno",

"Primavera"],
$ul = document.createElement("ul")

document.write("<h3>Estaciones del Año</h3>");

document.body.appendChild($ul)

estaciones.forEach(el => {
const $li = document.createElement("li");
$li.textContent = el;
$ul.appendChild($li);
})

academianumen.com
 Creando Fragmentos
Un fragmento es “trozo” del DOM que puede contener nodos. La idea del uso de los
fragmentos es evitar que con cada cambio que se realice en el DOM, este se renderice
completamente. En su lugar, solo se renderiza el fragmento contenedor del nodo en
cuestión.
const estaciones = ["Verano", "Otoño", "Invierno",
"Primavera"],
$ul = document.createElement("ul"),
$fragment = document.createDocumentFragment();

estaciones.forEach(el => {
const $li = document.createElement("li");
$li.textContent = el;
$fragment.appendChild($li);
})

document.write("<h3>Estaciones del Año</h3>")

$ul.appendChild($fragment);

academianumen.com
document.body.appendChild($ul);
 Templates (parte 1)
Las etiquetas <template> nos permiten agregar contenido HTML que no se renderiza en el
DOM.
<!-- index.html -->
<section class="cards">
<template id="template-card">
<figure class="card">
<img>
<figcaption></figcaption>
</figure>
</template>
</section>

// Archivo JS
const $cards = document.querySelector(".cards")
$template = document.getElementById("template-
card").content,
academianumen.com $fragment = document.createDocumentFragment(),
 Templates (parte 2)
var cardContent = [
{
title: "Yoda",
img: "http://pm1.narvii.com/6378/71077675a874957c38a660206fe3ca672b1569f4_00.jpg",
},
{
title: "Luke",
img: "https://culturawarsie.files.wordpress.com/2018/11/2vlstesb6.jpg?w=816",
},
{
title: "Darth Vader",
img: "https://upload.wikimedia.org/wikipedia/commons/5/5b/Darth_Vader_%28starry_background%29.jpg",
},
{
title: "Han Solo",
img: "https://pm1.narvii.com/6214/ab62819f0f71b135b6ed497cf9cbd1f2d83d1f58_hq.jpg",
}
]

academianumen.com
 Templates (parte 3)
cardContent.forEach((el) => {
$template.querySelector("img").setAttribute("src", el.img);
$template.querySelector("img").setAttribute("alt", el.title);
$template.querySelector("img").setAttribute("width", "150")

$template.querySelector("figcaption").textContent = el.title;

let $clone = document.importNode($template, true);

$fragment.appendChild($clone);
});

$cards.appendChild($fragment);

academianumen.com
 Insertando Nodos
Para insertar nuevos nodos podemos usar el método appendChild() como vimos en
ejemplos anteriores. Pero si quisiéramos insertar el nodo en la posición previa a la de otro
nodo, podemos utilizar insertBefore()

/*selector*/.insertBefore(/*Referencia al contenedor*/, /*Referencia al nodo hijo */)

academianumen.com
 Reemplazando Nodos
Así como podemos insertar un método también podemos reemplazar uno existente. Para
ello disponemos del método replaceChild().

/*selector*/.replaceChild(/*Referencia al contenedor*/, /*selector.children[2] */)

academianumen.com
 Eliminando Nodos

Además de insertar y reemplazar, obviamente deberíamos poder eliminar un nodo existente.

Para ello Javascript nos brinda el metodo removeChild().

/*selector*/.removeChild(/*selector.children*/)

academianumen.com
 Clonando Nodos
Y como no podia faltar, en caso de necesitar replicar un nodo existente podemos utilizar el
método cloneNode().

/*selector*/.cloneNode(true)

Si le pasamos true como valor, clona la etiqueta que posee el selector junto con todo el
contenido que esta posea, es decir, incluyendo sus elementos y nodos hijos.
Si por el contrario le pasamos false, solo clonara la etiqueta que posee el selector, ignorando
su contenido.

academianumen.com