🌳 What is DOM?

DOM stands for Document Object Model.

In simple words:

DOM is a way for JavaScript to see, access, and change HTML

It allows JavaScript to:

🧠 Important DOM Tree Terms

Term Meaning Example
Root Top of the DOM tree document
Parent Element above another element <div> is parent of <p>
Child Element inside another element <p> inside <div>
Sibling Elements at the same level (same parent) Two <p> inside same <div>
Node Every part of DOM (element, text, comment) Any <p>, text node, or comment

🌐 What is HTML DOM API?

HTML DOM API is a set of methods and properties that JavaScript uses to interact with HTML pages.

It allows JavaScript to:

Example – Access and Change HTML using DOM API

HTML:

<p id="demo">Hello DOM</p>
<button onclick="changeText()">Click Me</button>

JavaScript:

function changeText() {
  let para = document.getElementById("demo");
  para.innerHTML = "DOM API Worked!";
  para.style.color = "blue";
}

🧠 What is an HTML Element?

In HTML, every tag is called an element.

Examples:

<p>Hello</p>   ← Paragraph element
<h1>Title</h1>   ← Heading element
<button>Click</button>   ← Button element

✅ Each element consists of a tag and its content.

✅ JavaScript can use the DOM to access these elements and change their content, style, or attributes.

✅ DOM Main Selectors (Beginner List)

Selector What it Does Example / Notes
getElementById() Selects a single element by its unique ID document.getElementById("demo") → only one element
getElementsByClassName() Selects all elements with a specific class document.getElementsByClassName("box") → list of elements
getElementsByTagName() Selects all elements with a specific tag document.getElementsByTagName("p") → all paragraphs
querySelector() Selects the first element matching a CSS selector document.querySelector(".box") → first element
querySelectorAll() Selects all elements matching a CSS selector document.querySelectorAll(".box") → all elements