🎯 Learning Objectives

By the end of this lecture, students will be able to:

• Understand what the DOM really is
• Visualize how the browser turns HTML into objects
• Select elements using different DOM methods
• Modify text, HTML, and CSS styles
• Work with attributes (src, id, class, etc.)
• Create, insert, and delete elements dynamically
• Understand and use events to respond to user actions

#️⃣ 1. What is the DOM (Document Object Model)?

When a browser loads a webpage:

1. It reads the HTML file.
2. It converts each HTML tag into a JavaScript object.
3. It organizes these objects in a tree-like structure called the DOM Tree.

🌳 DOM Tree Visualization

For this HTML:

<body>
  <h1>Welcome</h1>
  <p>Hello world</p>
  <button>Click me</button>
</body>

The DOM becomes:

document
│
└── body
     ├── h1
     ├── p
     └── button