Document Object Model (DOM) - What it is, how it works, structure and properties

We interact with webpages almost daily and sometimes you may wonder, how does this exactly work? It's like magic but there is a lot of stuffs that goes on behind the scene. One of the 'many stuffs' is the Document Object Model, also known as DOM.

What is the DOM?
The framework of a webpage is called DOM. When you open a webpage in your browser, the browser reads the HTML and creates a model of the page, which is the DOM. This model allows programs and scripts to interact with the webpage dynamically.

How does DOM work?
The DOM has a tree-like structure. At the top is the root element, usually ``, followed by `` and ``, and then all the other elements nested within them. Every component turns into a node in the tree, and nodes can have parents or children. Whether you use a form or a button to interact with a webpage, background scripts use the Document Object Model (DOM) to access and modify items on the page. Elements and their properties, styles, and contents are all modifiable.

The Structure of the DOM
1. Root Element (``): This is the top-level element that contains all other elements on the page.
2. Head (``):This section contains meta-information about the document, such as its title, links to stylesheets, and scripts.
3. Body (``): The main content of the webpage resides here.
4. Elements: Everything inside the `` is made up of elements. Each element represents a different part of the webpage, like paragraphs, headings, images, and so on.
5. Attributes: Elements can have attributes like id, class, src, href, etc., which provide additional information about them.
6. Text Nodes: These represent the text content within elements, such as the text inside paragraphs or headings.

The DOM Properties
1. Node: Represents a single node in the DOM tree. It could be an element, attribute, or text node.
2. Element: Represents an element in the DOM. It allows access to its properties and methods.
3. Attribute: Represents an attribute of an element and provides methods to get or set its value.
4. Document: Represents the entire HTML document. It serves as an entry point to the DOM tree and provides methods to navigate and manipulate it.
5. Event: Represents an event triggered by user interaction or other actions. Scripts can listen for these events and respond accordingly.

Understanding the DOM is essential for web development because it enables dynamic and interactive web experiences. By manipulating the DOM, developers can create responsive and user-friendly websites that adapt to user input and behavior.