¿Qué una API?
Para mdn web docs y w3schools, una interfaz de programación para aplicaciones (API en inglés) es un código base reelaborado de tal manera que sea menos complicado construir nuevas funciones. Una API no es otro lenguaje de programación. Pero sí está basada en un lenguaje específico que ya 'masticó' la sintaxis más complicada y facilitar la creación de proyectos.
Como símil, piensa en una API como un destornillador manual al que se le ha añadido mejoras y accesorios que facilitan la velocidad del trabajo.
Una API es más compleja en su contenido que una librería o un framework. Cada API puede incluir funciones, métodos, invocación de valores, gestión de permisos y seguridades.
¿Qué es la API DOM de Javascript?
El DOM (Modelo de objeto de documento en inglés) usa el contenido de un sitio web como un símil del árbol; es decir, con ramificaciones de jerarquías. Reconoce los elementos HTML –llamados también nodos–, los accede y los manipula. Para el DOM, casi todo elemento de un sitio web es un objeto de JS, además de eso, el DOM define:
- Las propiedades de todos los elementos HTML
- Los métodos de acceso a todos los elementos HTML
- Los eventos para todos los elementos HTML
- Donde la interface del DOM reúne a los métodos –acciones que los alteran– y las propiedades –valores que contienen los elementos–.
- Elemento padre > elemento hijo > elemento hermano
- html > body tiene a > h1 tiene a > p tiene a > texto
- html > body tiene a > div tiene a > img tiene a > foto
Así mismo, una API puede ser accedida por otros lenguajes. Python –un lenguaje de programación– también puede acceder mediante DOM a elementos ramificados de un sitio web.
Para Flanagan, Toda la ramificación de elementos contenida en un sitio web tiene, digamos, un gran jefe: el Global Object. Cada nueva propiedad es visible y puede ser manipulada por los otros scripts en el mismo Global Object (puesto que este es único para todo el navegador). El Global Object materializado es la actual ventana del browser desde donde lees este párrafo. Y todas sus propiedades están agrupadas bajo la palabra clave window.
ELEMENTOS Y FUNCIONES DE LA API DOM: El BOM
Windows/browser object model (BOM)
Para Svekis y Putten[5] el BOM contiene objetos, propiedades, funciones y variables globales útiles –como las dimensiones, locación o el historial de sitios visitados– para representar y mostrar una ventana del navegador –browser–. Cada versión del navegador variará esos elementos.
El detalle de los elementos y objetos de la ventana de navegación se hallan expuestos en todo navegador web actualizado. El método para mostrar eso es el siguiente: puntero del mouse sobre cualquier página web + click derecho + Inspect Element.
OJO: Si tienes una palabra en el campo de filtro -barra arriba- el resultado de cualquier código será 'undefined', por lo tanto, mantén ese campo 'fiter' limpio. Habiendo tenido eso en cuenta, elegimos en el menú superior la palabra 'console' e ingresamos el siguiente código:
En Consola de Inspector
// EN CONSOLA INSPECTOR
console.dir(window);
/* LUEGO, SE MOSTRARÁ DESDE EL OBJETO WINDOW UNA LISTA DE
PROPIEDADES Y VALORES DE CADA ELEMENTO HTML Y MÁS OBJETOS
DE UNA WEB DETERMINADA */
> Window
0: Window {window: Window,
self: Window,
location: Location,
closed: false,
frames: Window, …}
$
:
(...se mostrarán todos los elementos de la página)
Así mismo, podemos acceder desde una sola línea a la cantidad de sitios web accedidos, la ciudad desde donde estamos accediendo, o el ya caduco usedJSHeapSize, que es la medición de bits de memoria activa asignada al consumir JS desde un sitio web. El objeto más actualizado de una API para medir desempeño web es performance. measureUserAgentSpecificMemory() –aún en evaluación–.
En Consola de Inspector
window.history.length;
// MUESTRA
50
window.ciudad;
// MUESTRA
Guayaquil
window.performance.memory.usedJSHeapSize;
// MUESTRA
10000000
Si deseamos establecer el usedJSHeapSize en megabytes, desde la propia consola del inspector dividiremos la cantidad de bytes del usedJSHeapSize para una potencia de 1000 elevado a la 2:
En Consola de Inspector
// Bytes a megabytes: bytes / 1000 elevado a la dos
console.log(`${
performance.memory.usedJSHeapSize /
Math.pow(1000, 2)}
MB`);
// MUESTRA
10 MB
OBJETO NAVIGATOR
Para Svekis y Putten[5] el objeto windows contiene entre otros objetos, uno que almacena datos en detalle del navegador al que se está accediendo en tiempo real:
En Consola de Inspector
window.navigator
// MUESTRA
Navigator {vendorSub: '',
productSub: '20030107',
vendor: 'Google Inc.',
maxTouchPoints: 0,
scheduling: Scheduling, …}
appCodeName: "Mozilla"
appName: "Netscape" appVersion:
(...)
Hasta aquí tenemos que el gran objeto madre es WINDOW, del cual 'nacen' subobjetos como NAVIGATOR, PERFORMANCE, entre otros; y en donde cada subobjeto es accedido mediante un punto:
OBJETO_MADRE . subobjeto . propiedad
DOM
Tal como en el BOM, los elementos del objeto del DOM se acceden al invocarlo. El DOM contiene todos y cada uno de los elementos visibles de un sitio web:
En Consola de Inspector
console.dir(document)
// SE MUESTRA
#document
location
:
Location {ancestorOrigins: DOMStringList,
href: 'file:///xx/xxxxx/xxx_disco/Web_xxx/xx,
origin: 'file://', protocol: 'file:', host: '', …}
URL
(...)