Advance JavaScript (DOM, BOM, Web API) / Document Object Model

Introduction to Document Object Model

DOM stands for Document Object Model. The web browser uses DOM to represent the HTML document internally. Additionally, it provides a set of functions and methods to modify the HTML document programmatically. These functions and methods are often called DOM Application Programming Interfaces or DOM API.

  • represents the HTML document as a tree structure

  • allows JavaScript to access, read, and change the page

  • updates the page dynamically without reloading

This diagram is like a family tree of an HTML document — it shows how the browser understands and structures your HTML page in memory.

✅ Types of Nodes

  • Document node → the whole page

  • Element nodes → tags (<div>, <p>)

  • Text nodes → text inside elements

  • Attribute nodes → element attributes (id, class)

🔗 Relationship Terms

Just like a family tree:

  • Parent → element above

  • Child → element inside another

  • Siblings → elements with the same parent

Example:

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

  • <ul> → parent

  • both <li> → children + siblings

🧠 Why DOM is Important?

Because it allows JavaScript to:

✅ change content

✅ change styles

✅ add/remove elements

✅ respond to user actions (events)

✅ build dynamic UI (forms, sliders, modals, etc.)

💡 Example — DOM in Action

HTML:

<h1 id="title">Hello</h1>
<button onclick="changeText()">Click Me</button>

JavaScript:

function changeText() {
  document.getElementById("title").textContent = "Welcome!";
}

✔️ When the button is clicked → DOM updates the text without reloading ✅

🏗️ DOM is Not:

🚫 Not a programming language

🚫 Not part of HTML itself

🚫 Not created by JavaScript — it is created by the browser

JavaScript just uses the DOM to control the page.