DOM (Document Object Model)

DOM (Document Object Model): A system for interacting with web documents that represents the structure of a webpage as a tree of objects. Each element, attribute, and piece of text is an object that can be accessed and manipulated through code. The DOM allows developers to dynamically modify content, structure, and style, creating interactive and responsive websites. It acts as a bridge between the static content of a webpage and the dynamic actions that can be performed through JavaScript, enabling real-time updates to the page without requiring a full reload. Key Functions of the DOM: Tree Structure: The DOM (Document Object Model) is like a family tree for a web page. When a web page loads, the browser reads the HTML and turns it into a structured tree of elements. Each part of the page—like headings, paragraphs, buttons, and images—is a node. Element Access & Retrieval: The DOM serves as a digital map, allowing developers to pinpoint specific parts of a webpage through methods like querySelector() or getElementById(). These methods act like a "search engine" for elements within the HTML structure. Dynamic Content Updates: With the DOM, content is not fixed—it can be transformed in real-time. Using properties such as innerHTML and textContent, developers can instantly change what’s displayed on the page, whether it’s altering text, images, or other elements. 4.** Flexible Structure Modification:** The DOM provides flexibility in altering the structure of a webpage. Developers can create, remove, or reorganize elements using functions like appendChild(), removeChild(), and replaceChild(), allowing the page's layout to adapt to new requirements. Event Management & Interaction: A core feature of the DOM is its ability to connect user actions with webpage reactions. By attaching event listeners through methods like addEventListener(), developers can make the page interactive—triggering changes based on clicks, keystrokes, or hover actions. Real-time Style Changes: The appearance of elements on the page is fluid in the DOM. Developers can adjust an element's styling on-the-fly using the style property, allowing for dynamic changes like color shifts, size alterations, or visibility toggling. DOM Navigation & Traversal: Traversing the DOM structure is like navigating a tree. Using properties like parentNode and nextSibling, developers can move between related elements and interact with various parts of the document in a hierarchical way. Element Creation on Demand: The DOM empowers developers to create new HTML elements dynamically, making web pages adaptable. By using createElement(), developers can generate elements (such as divs, buttons, or sections) and then seamlessly inject them into the document. Attribute Control: The DOM allows precise control over an element's attributes. Whether it’s updating a link’s href or modifying an image’s src, methods like getAttribute() and setAttribute() give developers the ability to change an element's core properties. Example Consider this HTML: DOM-Play Hello The textual representation of DOM tree will look like this: This structure is how a simple HTML page is represented in the DOM. The DOM tree helps browsers understand the structure of the page so it can be rendered correctly for users. Summary The Document node is the top-level container. html contains everything. Inside html, there are two child elements: head and body. The head contains a tag and a tag. The body contains a div with a class of "main", and inside that, there is a heading tag with the text "Hello". The graphical diagram of the DOM structure is shown below: This visually represents how the DOM is structured like a tree, with each element as a node connected to its parent. Here, , , , , and are element node. The “DOM-Play” and “Hello” are text node inside and respectively. charset="UTF-8" is an attribute of and class="main" is an attribute of . Summary Each node represents an element in the HTML document. A text node contains only textual content which does not have any child nodes or attributes. An attribute is a property of an element node that provides additional information about the element. It is not considered as a child node of an element. The tree structure shows how elements are nested inside each other. JavaScript can access and manipulate any node to change the page dynamically.

 lang="en">

     charset="UTF-8">
    


     class="main">
        
Hello
    

The textual representation of DOM tree will look like this:

This structure is how a simple HTML page is represented in the DOM. The DOM tree helps browsers understand the structure of the page so it can be rendered correctly for users.

Summary

• The Document node is the top-level container.
• html contains everything.
• Inside html, there are two child elements: head and body.
  • The head contains a tag and a