Coding & Dummies | Episode 4

DOM
Eventos

DOM

Document Object Model
Basicamente es una representacion del estado actual de nuestro HTML en Javascript.

Seleccionar elementos
Atributos
Crear HTML
[Navegación y eliminación de elementos](#navegacion-y-eliminacion de-elementos)

Window

Representa al navegador, es decir, solo existe cuando se usa javascript en el frontend. Metodos como console.log() son en realidad implementados por el window. Para una lista de todos los metodos o propiedades: lista

Document

Tambien existe solo en el frontend, es la entrada al DOM, el primer elemento (HTMLElement) del mismo que contiene a todos los demas. Para leer todas las propiedades y metodos del document: lista

Seleccionar elementos

Existen muchas formas de seleccionar elementos, todos estos son metodos que se ejecutan en un elemento del DOM (HTMLElement), es decir, element.<Nombre del metodo> y que buscan dentro de sus hijos un elemento que cumpla con los requerimientos.

que devuelven un solo elemento:

getElementById(id)
querySelector(selectorCSS)

que devuelven una coleccion de elementos:

querySelectorAll(selectorCSS)
getElementsByClassName(className)
getElementsByName(name)
getElementsByTagName(tagName)

Atributos

Los atributos son todos los que agregamos en HTML como por ejemplo id o class, el DOM nos permite acceder a los mismos de la siguiente manera:

element.id
element.class

// o

element.getAttribute('id')
element.getAttribute('class')

Tambien existen elementos propios que podemos agregar de la siguiente manera en HTML para luego consumirlos en Javascript:

<div data-coding-dummies="Hola dummies">
  <!-- Contenido -->
</div>

const div = document.querySelector('div')
div.dataset.codingDummies // "Hola dummies"

Set transforma a camelCase cuando tenemos '-' en el nombre
Mas sobre nombres de variables

Crear HTML

const element = document.createElement(<tag name>)
document.body.appendChild(element)

En la primer sentencia creo un elemento <tag name> donde tag name es un string con el valor de algun tag, por ejemplo, div. Y en la segunda sentencia lo agrego al final del body.

Tambien se puede usar el metodo insertAdjacentElement(position, element) para agregar un elemento y elegir su posicion.

Posiciones (debe ser una de las siguientes):

beforebegin
afterbegin
beforeend // igual que append child
afterend

Como cambia segun la posicion:

<body>
  <!-- before begin -->
  <div>
    <!-- after begin -->
    <!-- contenido previo del div -->
    <!-- before end -->
  </div>
  <!-- after end -->
<body>

Otra forma de agregar elementos al DOM es mediante la propiedad innerHTML, pero nos deja vulnerables a ataques XXS en algunos casos, por ende hay que tener mucho cuidado al usarla.

document.body.innerHTML = "<h1>Hola Dummies</h1>"

Navegación y eliminación de elementos

parentElement | elemento padre
firstChild | primer hijo
nextElementSibling | el siguiente hermano
previousElementSibling | el hermano anterior

alt

Si en el anterior ejemplo suponemos que estos tres elementos son hijos directos del body:

const second = document.querySelector('#second')
const first = second.previousElementSibling // #first
second.previousElementSibling // #third
const body = second.parentElement // body
body.firstChild() // #first
first.previousElementSibling // null

Listeners

Un event listener es una funcion que va a ser llamada una vez que el evento que estamos escuchando se ejecute.

ej:

function listener() {
   console.log('click!!')
}

const evento = 'click'

const element = document.querySelector('button')

element.addEventListener(evento, listener)

donde event es un string que describe el evento, como click, probablemente el evento mas usado. Para todos los eventos: lista de eventos

y donde listener es una funcion que se ejecutara cuando se cumpla el evento event en el elemento al que le agregamos el event listener yq ue por defecto recibe un parametro event.

Targets

Target es una propiedad del objeto event que recibe cualquier funcion que sea un event listener, y que es una referencia a quien disparo el evento.

Modificando el ejemplo anterior:

function listener(e) {
   console.log(e.target) // imprime element
}

Current target es otra propiedad del objeto, es una referencia a quien tiene el event listener, en el ejemplo anterior es igual a target, pero, por ejemplo (lleno de malas practicas, solo ejemplo):

alt

const div = document.querySelector('div')
const button = document.querySelector('button')

const handleClick = evento => {
  console.log(e.currentTarget) // click en boton ? div : div
  console.log(e.target) // click en boton ? button : div
}

div.addEventListener('click', handleClick)

Procesamiento de eventos

Existen tres fases:

alt

Capture

Raramente usando en el codigo, es la primer fase, donde el evento viaja desde arriba hacia abajo, para capturar un evento en esta fase, se debe usar:

element.addEventListener(event, listener, { capture: true })

Target

Este es el momento ene el que un elemento dispara el evento, este sera el event.target

Bubbling

El evento vuelve a viajar hacia arriba, en el ejemplo anterior, el target era el boton y quien escuchaba el evento era el div, quien recibe el evento gracias a esta fase.

Propagation

En las tres fases de arriba se puede ver como el evento se propaga, inicialmente de arriba hacia abajo hasta que alguien dispara el evento y luego "flota" nuevamente hacia arriba.

Si en algun momento quisieramos detener esta propagacion, podemos usar una funcion que el evento tiene por defecto:

event.stopPropagation()

Si pusimos { capture: true } va a detener al evento para que no siga hacia abajo, si no, va a detener la fase bubbling.

Prevent default / eventos del form

El form por defecto tiene un evento que es submit, al igual que el <a> tiene el evento de navegar cuando se lo clickea.

Para evitar que se ejecute el evento por defecto, debemos asignarle un event listener al mismo evento y prevenir el evento por defecto:

form.addEventListener('submit', (evento) => {
   evento.preventDefault()
  // hacer lo que quieras con el form
})

Aparte de esto, un form tiene por defecto todos los inputs definidos dentro de este, donde la clave es el atributo name en el input.

ej:

<form>
  <input name="myInput" type="text" />
</form>

function onSubmit(event) {
   event.preventDefault()
  console.log(event.target.myInput) // el elemento del input
  console.log(event.target.myInput.value) // valor del input
}

Cases

camelCase
kebab-case
snake_case
PascalCase

XSS

Es cuando alguien puede correr javascript dentro de tu sitio y lo usa para hacer algun ataque, por ejemplo si una persona mediante algun input puede insertar html con javascript dentro, el cual se ejecuta al agregarse al DOM.