Web APIs for JavaScript

As developers, we are usually very happy to let the ones who know better do the job (in this case, write the code), and simply use it afterwards. It is exactly what Web APIs are for.

They are a collection of many APIs specifically conceived to work in the browser and can be called using the JavaScript language. There are a lot of them, so for this article, I've decided to dive a little deeper in a selection of them.

Document Object Model (DOM)

A very usual thing to do in JavaScript is to manipulate the DOM. If you are like me, you might not have thought twice about doing something like document.querySelector(.class). Yet, this is something that is provided by the Web API Document Object Model, and is not simply part of the JavaScript language.

“ The Document Object Model (DOM) is an API for manipulating DOM trees of HTML and XML documents (among other tree-like documents). This API is at the root of the description of a page and serves as a base for scripting on the web. ”
MDN Web Doc

For example, if we deconstruct this line of code document.querySelector(.class):

document: it's an instance of the Document interface and acts as the entry point to the web page content. The Document interface is provided through the DOM API
querySelector(): it's an instance method which let us query the first element of the page content matching the selector

There are many other interfaces (Event, NodeList, Element, XMLDocument, etc. to cite a few) which let us manipulate the DOM. The full documentation can be found here.

Intersection Observer API

This API lets us know about the visibility of an element in the viewport. It's very helpful for:

animations
infinite scrolling
or even lazy loading an image

It allows us to configure a callback called whenever a target element intersects with the viewport. For the details about how to implement it, read the official Web MDN documentation.

Fetch API

This is another very common API we use whenever we want to fetch data from an outside resource. It only has one method: fetch().

fetch() takes an argument, the path to the resource we want to fetch, and returns a promise. It is asynchronous, preventing us to block the main thread whenever we need to fetch data. You can read more about it here.

Web Share API

On websites, we often want to be able to share a page, content or file to third parties (social medias, email, etc.). That is when we can use the Web Share API, which gives us two methods:

navigator.canShare() which validates if the data is shareable
navigator.share() which invokes the native sharing mechanisms of the operating system.

The full documentation is available here.

Many more APIs

The few APIs introduced above are a very limited subset of all Web APIs available. I find that they are the ones I use on a daily basis. But here are a couple more that I find interesting:

The Fullscreen API lets us display a specific element in fullscreen and then exit the fullscreen state when it is not needed anymore
The View Transition API lets us create nice transition when navigating from page to page.
The Screen Orientation API gives information about the orientation of the current device

A list of all available APIs can be found here. Sadly, some of them are only compatible with a few browsers. Make sure you check the compatibility before using them in your website.