DOM Fundamentals

Lesson content

🎯 Goal By the end of this lesson, you'll understand: What is the DOM? Why is the DOM important? DOM Tree Structure Selecting Elements Modifying Elements Creating & Removing Elements Event Handling Real-world examples Interview questions What is DOM? DOM stands for Document Object Model . It is a programming interface that represents an HTML page as a tree of objects . JavaScript uses the DOM to: Read HTML Change HTML Change CSS Handle Events Add or Remove Elements Simple Definition: The DOM is a JavaScript representation of an HTML document that allows you to interact with web page elements. Why Do We Need DOM? Without the DOM: HTML would be static. Buttons wouldn't work. Forms couldn't be validated. Content couldn't change dynamically. The DOM makes web pages interactive. Real-Life Example 🏠 Imagine a house. House │ ├── Living Room │ ├── Kitchen │ └── Bedroom Each room is like an HTML element. JavaScript can: Open a room Change furniture Add a new room Remove a room The house is like the DOM Tree. HTML Example <!DOCTYPE html> <html> <head> <title> DOM </title> </head> <body> <h1> Hello </h1> <p> Welcome </p> </body> </html> DOM Tree Document │ ▼ <html> │ ┌──┴────────────┐ ▼ ▼ <head> <body> │ │ ▼ ├───────┐ <title> ▼ ▼ <h1> <p> Accessing the Document console . log( document ); Output HTML Document Object Selecting Elements By ID HTML <h1 id = "title" > Hello </h1> JavaScript const title = document . getElementById( "title" ); console . log( title ); By Class const items = document . getElementsByClassName( "item" ); By Tag Name const paragraphs = document . getElementsByTagName( "p" ); querySelector() Returns the first matching element . const heading = document . querySelector( "h1" ); querySelectorAll() Returns all matching elements . const buttons = document . querySelectorAll( "button" ); Selecting Methods Comparison Method Returns getElementById() One element getElementsByClassName() HTMLCollection getElementsByTagName() HTMLCollection querySelector() First matching element querySelectorAll() NodeList Reading Content HTML <p id = "msg" > Hello </p> JavaScript const msg = document . getElementById( "msg" ); console . log( msg . textContent); Output Hello Changing Content msg . textContent = "Welcome" ; Result <p> Welcome </p> Changing HTML msg . innerHTML = "<strong>Hello</strong>" ; Output <strong> Hello </strong> Changing CSS msg . style . color = "blue" ; msg . style . fontSize = "24px" ; Changing Attributes HTML <img id = "logo" > JavaScript const logo = document . getElementById( "logo" ); logo . setAttribute( "src" , "logo.png" ); Getting Attributes console . log( logo . getAttribute( "src" ) ); Output logo.png Creating Elements const p = document . createElement( "p" ); p . textContent = "New Paragraph" ; Appending Elements document . body . appendChild( p ); Result <body> <p> New Paragraph </p> </body> Removing Elements p . remove(); Event Handling HTML <button id = "btn" > Click </button> JavaScript const btn = document . getElementById( "btn" ); btn . addEventListener( "click" , () => { alert ( "Button Clicked" ); } ); Complete DOM Flow HTML Page │ ▼ Browser Creates DOM │ ▼ JavaScript Accesses DOM │ ▼ Read / Update Elements │ ▼ User Sees Changes Common DOM Properties Property Purpose textContent Read or change text innerHTML Read or change HTML style Change CSS value Input value className Get or set class id Get or set ID Common DOM Methods Method Purpose getElementById() Find by ID querySelector() First matching element querySelectorAll() All matching elements createElement() Create element appendChild() Add child remove() Remove element setAttribute() Set attribute getAttribute() Get attribute addEventListener() Listen for events Real-Life Example 🛒 Shopping Website User Clicks "Add to Cart" │ ▼ JavaScript Event │ ▼ DOM Updates Cart Count │ ▼ User Sees New Count Interview Question What is DOM? Answer The DOM (Document Object Model) is a tree-like representation of an HTML document that allows JavaScript to access and modify web page elements. Which method selects an element by ID? Answer document . getElementById( "id" ); What is the difference between querySelector() and querySelectorAll() ? Answer querySelector() returns the first matching element . querySelectorAll() returns a NodeList of all matching elements . What does createElement() do? Answer It creates a new HTML element in memory that can later be added to the DOM. Which method listens for user events? Answer addEventListener () Best Practices ✅ Use querySelector() or querySelectorAll() for flexible CSS selector support. ✅ Prefer textContent when inserting plain text. ✅ Use createElement() instead of building HTML strings when possible. ✅ Remove unused event listeners if they are no longer needed. ✅ Keep DOM updates efficient by minimizing unnecessary changes. ❌ Avoid using innerHTML with untrusted user input because it can introduce Cross-Site Scripting (XSS) vulnerabilities. ❌ Avoid repeatedly querying the same element inside loops if you can cache the reference. Key Points ✅ DOM stands for Document Object Model. ✅ The browser converts HTML into a DOM tree. ✅ JavaScript uses the DOM to read and modify web pages. ✅ Elements can be selected, created, updated, and removed. ✅ Events allow web pages to respond to user actions. ✅ DOM manipulation is the foundation of interactive websites. 🧠 Easy Formula HTML Page │ ▼ Browser │ ▼ DOM Tree │ ▼ JavaScript │ ▼ Read Elements │ ▼ Modify Elements │ ▼ Updated Web Page DOM = HTML as Objects getElementById() = Find Element querySelector() = First Match createElement() = Create Element appendChild() = Add Element remove() = Remove Element addEventListener() = Handle Events Remember: 🌳 DOM = Tree representation of an HTML page 🔍 Select elements using getElementById() or querySelector() ✏️ Modify content with textContent or innerHTML ➕ Create elements with createElement() 🖱️ Respond to user actions with addEventListener() 🚀 The DOM is what makes web pages dynamic and interactive.