What is DOM in JavaScript

Do you recognize all the cool animations you see everywhere? The DOM is used to create each and every one of those animations.

Document Object Model Or “DOM” is an interface to web pages. It is essentially an API to the page, allowing programs to read and manipulate the page’s content ,structure, and styles. The DOM is basically a tool that describes the structure of an HTML pages. Additionally, it encourages user interaction with browsers.

An example to better understand —

Imagine you are watching TV. You want to switch the streaming show since you don’t like it. Additionally, you want to raise the loudness. There must be a means for you to communicate with your television in order to achieve that. And how do you go about doing that?

A remote — The remote connects you to your television and allows you to interact with it. Using the remote, you may make the TV dynamic and alive. Similarly, JavaScript uses the DOM to make the HTML page active and dynamic.

• All of the HTML elements and attributes on the page are modifiable by JavaScript.
• JavaScript has the ability to modify every CSS style on the page.
• JavaScript has the ability to delete HTML elements and attributes.
• New HTML properties and elements can be added with JavaScript.

Advantages of DOM

• The file is just read through once
• High navigation capabilities : This is the aim of the DOM design.
• Language and Platform independent.
• You may navigate it by going back and forth through the data.
• It is dynamic and modifiable.

The HTML DOM model is constructed as a tree of Objects:

The window object, which is the foundation of the browser, has the document object as its first node. The next node is the root element, or HTML element. The head tag and body tag further separate the HTML element. Meta tags and title tags are examples of the elements that are children of the head tag. The body also has child elements like link tags and header tags.

The representational tree that the browser create after it read your document.

Some brief about JavaScript DOM Selectors —

In order to be able to manipulate an element in the DOM, you have to select that particular element.

1. getElementById() — Here, Selection is dependent on the id name. Only the first matching element is returned by this selector.
2. getElementByClassName() — This method returns every element that falls under the given class.
3. getElementByTagName() — This function returns every element that corresponds to a given tag name.
4. querySelector() — This method returns the first element in the document that matches a particular CSS selector.
5. querySelectorAll() —It gives back all of the document’s elements that match the given CSS selector.

Different programming languages can be used to control the DOM.

Traversing the DOM — Basically, traversing involves moving through the DOM from top to bottom in order to access and modify a specific node’s or element’s parent or child.

A page may be styled using CSS, its functionality can be altered using JavaScript, and it is held together by the DOM by providing access to the elements we need to work on.