Los siguientes capítulos van a estar dedicados a las WEB APIs, y en especial a la API del DOM, que es la que trabaja con los elementos HTML.
API significa Aplication Programming Interface, o Interfaz de Programación de Aplicación. En un lenguaje de programación, una API es aquella serie de objetos y mecanismos que tiene el lenguaje implementado en ciertas áreas para poder interactuar con todo lo que tiene que ver con el navegador, como es el árbol de la estructura del documento HTML, lo que viene a ser el Document Object Model (DOM), como todo el control de la ventana del navegador, es decir, la barra de direcciones, el tamaño, el posicionamiento, el sistema operativo en el que está el usuario, la ubicación geográfica… que forman el BOM, el CSS Object Model o CSSOM…
A partir de aquí tenemos una cantidad infinita de WEB APIs que nos sirven casi para cualquier cosa, entre las que destacan:
- Eventos
- Foms
- AJAX – Fetch
- History
- Web Storage
- Geolocation
- Drag & Drop
- Indexed DB
- Canvas
- MatchMedia
Principalmente nos interesa el manejo de eventos, formularios, consumo de datos asíncronos con AJAX y Fetch, el historial, almacenamiento en la web, la ubicación, Indexed DB es una pequeña base de datos que se guarda en la web, Canva nos sirve para dibujar, MatchMedia controla las media queries de CSS pero en Javascript…
DOM (Document Object Model)
El DOM es como los navegadores representan el código HTML y XML para trabajarlo con Javascript. Esto es lo que vamos a ir viendo en los siguientes capítulos. Es importante saber que el DOM es una interfaz estandarizada. El DOM se queda únicamente en el control de los nodos.
CSSOM (CSS Object Model)
En el CSSOM entra todo lo que tiene que ver con el CSS.
BOM (Browser Object Model)
No se considera una API estándar, ya que cada navegador, internamente tiene diferentes formas de manejar ciertas cosas, sin embargo, desde los últimos años los navegadores van sacando cada vez las mismas características mas o menos al mismo tiempo, y soportándolas más o menos de la misma manera. La API del Browser son todas las acciones que podemos hacer para, por ejm, detectar la ubicación del usuario, detectar en que posición de nuestra pantalla está la ventana, cual es el ancho y el alto, el manejo del historial, de la barra de direcciones…
Nota: El DOM es la manipulación del HTML mediante Javascript, mientras que el CSSOM es la manipulación del CSS mediante Javascript. El BOM es la manipulación del browser mediante Javascript.
Aunque vamos a seguir manejando algunas cosas en la consola, cada vez más comenzaremos a usar el HTML.
Del objeto global window cuelga navigator, si mandamos navigator a la consola podemos ver muchos detalles, podemos detectar el idioma en el cual está el documento HTML, la plataforma, es decir, el sistema operativo, el User Agent, es decir, las características del navegador, la geolocalización, el historial, el puerto, el protocolo, el pathname, el localStorage (almacenamiento local), todo cuelga de nuestro objeto window. Incluso del objeto window cuelga document, que es el árbol del DOM.