APIs del DOM

Francisco Garay — Sun, 27 Nov 2022 19:10:09 +0000

Estas son algunas de las APIs más utilizadas que ya vienen integradas en JavaScript.

Fetch

Fetch es una evolución de XMLHttpRequest. Las peticiones AJAX permitieron en su tiempo hacer peticiones asíncronas al servidor sin tener que detener la carga de la página. Hoy en día se utiliza la función fetch para esto.

const getPokemons = async () => {
  return const pokemons = await fetch('https://pokeapi.co/api/v2/pokemon?limit=50')
}

IntersectionObserver

Sirve para observar elementos y si cruzan un umbral que nosotros definimos nos lo va a notificar para tomar acción. El umbral se define por el porcentaje que tiene intersección con el viewport, con la parte visible de nuestra página.

const observer = new IntersectionObserver(callback, options)

Le pasamos un callback para que se ejecute cuando el límite o el umbral(threshold) sea cruzado en una u otra dirección.

VisibilityChange

El visibilityChange forma parte del API del DOM llamado Page Visibility y nos deja saber si el elemento es visible, pude ser usado para ejecutar una acción cuando cambiamos de pestaña. Así podemos ahorrar batería y mejorar la UX.
La API de visibilidad de página ofrece eventos que puedes escuchar para saber cuando un documento se convierte en visible o en oculto.

document.addEventListener('visibilitychange', callback)

Cuando el usuario minimiza la ventana o cambia de pestaña, la API manda un evento de visibilitychange para que los listeners sepan que el estado de la página ha cambiado.

VisibilityState
Para saber el estado de visibilidad actual del documento utilizamos VisibilityState este estado se nos indica a través de una cadena de texto.

//El contenido de la pagina esta visible para el usuario
document.visibilityState === 'visible'
//El contenido de la pagina no es visible para el usuario ya sea por que esta en otra pestaña o ventana
document.visibilityState === 'hidden'
//El contenido de la pagina se esta procesando y no es visible por el usuario
document.visibilityState === 'prerender'

Si quieres conocer más APIs y funcionalidades que disponemos a la hora de desarrollar un sitio web visita el siguiente enlace.

DEV Community: Francisco Garay

APIs del DOM

Fetch

IntersectionObserver

VisibilityChange