Introduction to DOM

What is DOM & its elements in JavaScript?

Have you ever wondered how web pages are able to dynamically update content without having to reload the entire page? Or how JavaScript interacts with HTML and CSS to bring websites to life? The answer lies in a fundamental concept called the Document Object Model, or DOM for short.

DOM or Document Object Model is an API (Application programming interface) that defines a logical layout of content & how it’s accessed and manipulated. Using DOM, programmers can build, construct, add, modify, delete, or navigate elements or contents. Everything present on an HTML webpage can be edited using DOM.

DOM is not a programming language but just a way to access/modify data. Without DOM, JavaScript won’t have any model, layout of webpages, XML, or HTML documents. Magical right? Let me fill you in on how DOM works

How Does DOM Works?

When a web page is loaded in a browser, the browser creates a DOM representation of the page based on the HTML markup. This DOM tree consists of nodes, where each node corresponds to an HTML element, such as div tag, p tag, img tag, etc. These nodes are organized in a hierarchical manner, with the html element at the root of the tree. Great right? Let's look at the flowchart I got online to under better.

Structure of DOM

I am going to be using visuals for better understanding of DOM structure. The structure represent a tree like way of explaining what DOM is all about using various tags and elements. I hope this will help in getting more understanding about DOM.

The images above explain an hierarchy kind of structure when dealing with DOM. I got the images online as well.

Properties of DOM

Some common properties include:

innerHTML: Gets or sets the HTML content of a node.
textContent: Gets or sets the text content of a node and its descendants.
style: Allows access to CSS properties of an element for dynamic styling.
classList: Allows manipulation of the classes applied to an element.
parentNode: References the parent node of a given node.

Conclusion
DOM & JavaScript work hand –in-hand to form a perfect webpage. DOM uses hierarchical structure such as tree structure to meet up the requirements.
DOM is a powerful tool that allows developers to interact with and manipulate web pages dynamically.
There's a whole lot to learn and I'm still learning more about DOM. If you are still lost, YouTube is your friend.