#3 JavaScript Crash Course - API | DOM

0.0

0.0 out of 5 stars (based on 0 reviews)

Excellent0%

Very good0%

Average0%

Poor0%

Terrible0%

Created by Imran Sayed Last updated February, 2020 English

« Previous tutorial Next tutorial »

APIs

The functionality built on top of the client-side JavaScript language, called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.

APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself

In simple words, API is a messenger that takes your request to the system and tells it what to do and the delivers what you requested for.

Types of APIs

Third Party APIs
Browser APIs

a. Third Party APIs

Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:

The Twitter API allows you to do things like displaying your latest tweets on your website.
The Google Maps API and OpenStreetMap API allows you to embed custom maps into your website, and other such functionality.

b. Browser APIs

Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:

The DOM (Document Object Model) API allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc.
The Geolocation API retrieves geographical information. This is how Google Maps is able to find your location and plot it on a map.
The Canvas and WebGL APIs allow you to create animated 2D and 3D graphics
Audio and Video APIs like HTMLMediaElement and WebRTC allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else’s computer.

DOM API

The Document Object Model (DOM) is an API that represents a document with a logical tree.
DOM is the API or layer between the source code and what we see in the browser itself.

Document – is document in form of HTML file or web page when displayed.
Object – Every document element e.g. HTML like <head></head> <body></body>, <p></p> , <h2></h2> is an object.
Model – describes how these Objects are represented in a tree fashion.

Uses of DOM:

DOM connects web pages to scripts or programming languages by representing the structure of a document like HTML representing a web page—in memory.
DOM is used to interact with web pages , to add , delete or change the structure, style or content of the document.

HTML describes the structure of a web page
For browser the HTML is only a piece of text. It does not understand it by default.
To make any sense of the HTML, browsers first have to convert it into a format they understand. This format is called DOM
In order to convert the data from one format to another, browsers engines have a special piece of code called parser
There are two types of parser : HTML parser and CSS parser.
The browser engines use HTML parser to convert HTML into DOM, which is a tree like representation of the HTML tags, in form of objects.
Each HTML tag is represented by a node of the tree called a DOM node.
The browser builds up the DOM bit by bit. As soon as the first chunks of code come in, it starts parsing the HTML, adding nodes to the tree structure.
The DOM has two roles:
1. represent the HTML document in form of Objects.
2. acting as an interface connecting the page to the outside world, like JavaScript

Nodes

A document, consists of a hierarchical tree of nodes.
A node is a fundamental record representing a single object within the document .
Everything we can change in the document are nodes.
There are two types of nodes:

Element Node – For Example the entire tags (including text inside of it) are the element nodes e.g <p>Lorem</p>
Text Node – The text inside of the tags is the text node e.g. ‘Lorem’ inside of <p>Lorem</p> is text node .

Element and Text nodes are two separate nodes in the DOM.
These nodes have their specific number:

Document – 9 ( Entire Document itself)
Document type – 10 ( < ! DOCTYPE html> )
Element -1 (<html> , <head>,<title>. <body>, <p>, tag etc)
Text -3 ( text inside the above tags )
Comments – 8
Document Fragments – 11

How does the process work :

When we load a webpage in a browser :

The browser takes the HTML document sent from the server and converts it into DOM ( tree of objects )
Then Any javascript( or any other language) we would have written interacts with the DOM as an API for the HTML