Day 26 of 30 of JavaScript

Hey reader👋 Hope you are doing well😊
In the last post we have talked about Event Loop. In this post we are going to discuss about DOM.
So let's get started🔥

Document Object Model (DOM)

First of all if you are thinking DOM is part of JavaScript language then let me correct you it is a web API that is used to modify our webpage.

DOM (Document Object Model) is the data representation of the objects that comprise the structure and contents of the document on the web. It is a programming interface for web docs.

In the above image you can see that it is a tree like structure where each element (like paragraphs, heading etc) are nodes.

Now when you know that DOM is a web API then why are we studying in JavaScript tutorial🤔.
The few reasons are -:

1. The DOM is an interface that allows JavaScript to interact with and manipulate HTML and CSS.

2. The DOM provides a way to handle events like clicks, form submissions, and keyboard input. This event-driven programming model is essential for creating responsive user interfaces.

3. The DOM allows developers to add, remove, and modify elements and attributes in the HTML document.

4. Many JavaScript frameworks and libraries, such as React, Angular, and Vue.js, rely on the DOM for rendering and updating the user interface.

5. Efficient DOM manipulation can significantly improve the performance of web applications.

We can do necessary DOM manipulations with the help of JavaScript.

DOM Tree

A DOM tree is tree like structure whose nodes represent an HTML or XML document's content. To understand it better let's look at an example -:

So here you can see that each HTML tag is represented by a node in DOM tree.
When a web browser parses an HTML document it builds a DOM tree and then uses it to display the document.

Fundamental Data Types

• Document

• Node

• Element

• Node List

• Attr

• Named Node Map
  These all are interfaces in which important objects are defined.

Document Interface

It represents any web page loaded in browser and serves as an entry point into web page's content (DOM tree).
Construtor -> Document().

Node

The Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. As this is an abstract class there is no plain Node object.

Element

In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element.

Node List

A NodeList is an array-like collection (list) of Node Objects.

Attr

In the HTML DOM, an Attr object represents an HTML attribute. An HTML attribute always belongs to an HTML element. For example class, id etc.

Named Node Map

A NamedNodeMap is an array-like unordered collection of an element's attributes. In other words a NamedNodeMap is a list of Attr objects.

So this was just an introduction of DOM. In the upcoming blogs we are going to read more about it. Till then stay connected and don't forget to follow me.
Thankyou🩵