JavaScript Web APIs

Updated: November 26, 2021

What is a Web API?

Web API: Application programming interface for the Web
Provides communication or interaction between software applications, and enables web sites and client applications to have access to certain data
We can make use of a large number of Web APIs available!
Typically used with JavaScript (not always the case)

I did some research about the following four interfaces since they are frequently used!

Implemented by any object that can receive events and may have listeners on them
Any target of events implements the three methods:
- EventTarget.addEventListener(), EventTarget.removeEventListener(): Registers and removes an event handler of a specific event type
- EventTarget.dispatchEvent(): sends an Event to the object, invoking the affected EventListeners in the appropriate order
An example of creating and triggering events by Mozilla

Node inherits from EventTarget
An abstract base class, the primary datatype for the entire Document Object Model
A generic name for any type of object in the DOM hierarchy
Many other DOM API objects are based upon Node
- Objects such as Document, Element, and DocumentFragment are its subclasses, which implement the functionality of Node.
- Every kind of DOM node is represented by an interface based on Node.
There is no such thing as a Node object!
A text node is a Node, but not an Element: see editing a TextNode object.

Element inherits from Node: Element “is-a” Node object
The most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit
- HTMLElement interface is the base interface of HTML elements
A specific type of node that can be directly specified in the HTML file with a tag
Defines properties and methods such as id, class, innerHTML, etc.

Document also inherits from Node: Document “is-a” Node object
Document interface for HTML documents also also inherits from the HTMLDocument interface
An interface that represents any web page loaded in the browser
Serves as an entry point into the DOM (Document Object Model) tree
DOM tree: A kind of tree whose nodes represent an HTML or XML document’s contents
For example, the following document

<html>
<head>
<title>My Document</title>
</head>
<body>
<h1>Header</h1>
<p>Paragraph</p>
</body>
</html>

has a DOM tree that looks like this:
A DOM tree preserves all whitespace!
Describes the common properties and methods for any kind of document (i.e. HTMLDocument implements Document)