Document Object Model (DOM)

🔵 1

Why the DOM Matters

Concept	Description
HTML	Structure and content.
BOM	Browser Object Model (`window`).
DOM	Document Object Model (`document`).

window └── document └── html elements

window represents the browser tab itself (history, location, alerts...); document — one property of window — represents the page content, and is what the DOM tree is built from.

🟣 2

HTML Refresher & Browser Object Model

<!DOCTYPE html>
<html>
 <head><title>Tab</title></head>
 <body>
   <p>Hello Web!</p>
 </body>
</html>

Parent elements contain child elements; attributes configure an element.

<a href="https://google.com">Here's a link!</a>

window Object

window.history.go(-1);

›(no output — navigates back one page)

console.dir(navigator);

ResultPrints an expandable Navigator object in DevTools showing browser details (userAgent, platform, language, etc.). Contents vary by browser/device, so there's no single fixed output to memorize.

console.log(location.href);

›https://yourdomain.com/current-page.html

(The actual string is whatever URL is loaded in the tab at the time this runs.)

location.href = "https://google.com";

ResultNavigates the current tab to google.com. Also an action, not a printed value.

🟢 3

DOM Tree

document └── html ├── head │ └── title └── body ├── h1 └── div ├── p └── a

console.dir(document);
document.documentElement;
document.head;
document.body;

Expression	Refers to
`console.dir(document)`	Prints the whole DOM tree, expandable, in DevTools.
`document.documentElement`	The <html> element.
`document.head`	The <head> element.
`document.body`	The <body> element.

🟠 4

Selecting Elements

getElementById()

const ele = document.getElementById("one");

Resultele now references the single element on the page whose id="one" — or null if no such element exists.

innerText vs innerHTML

msg.innerText = "Updated text";
msg.innerHTML = "<strong>Updated</strong>";

💡 Use innerText for plain text. Use innerHTML only when HTML rendering is genuinely required — and never insert untrusted user input with innerHTML (it can execute injected scripts, a classic XSS vulnerability).

Other Selection Methods

document.getElementsByTagName("div");
document.getElementsByClassName("ele");
document.querySelector(".ele");
document.querySelectorAll(".myEle");

Method	Returns
`getElementsByTagName()`	Live collection of all matching tags
`getElementsByClassName()`	Live collection of all matching class
`querySelector()`	First element matching any CSS selector
`querySelectorAll()`	Static list of all elements matching any CSS selector

🩷 5

Manipulating Elements

Changing Style

title.style.color = "red";
title.style.backgroundColor = "yellow";

ResultThe element referenced by title immediately turns red text on a yellow background — style changes apply live, no page reload needed.

classList

item.classList.add("highlight");
item.classList.remove("highlight");
item.classList.toggle("highlight");

Method	Effect
`add()`	Adds the class if not already present
`remove()`	Removes the class if present
`toggle()`	Adds it if absent, removes it if present

Attributes

el.getAttribute("data-row");
el.setAttribute("data-row", "5");

Friends Table Example

function getData(el){
 let row = el.getAttribute("data-row");
 let name = el.getAttribute("data-name");
 message.innerHTML = `${name} is in row ${row}`;
}

Sample interactionClicking a table row with data-row="5" data-name="Priya" sets the message element's HTML to: Priya is in row 5

🔷 6

Event Handling

Using this (inline handler)

<button onclick="message(this)">Button</button>

addEventListener()

const btns = document.querySelectorAll("button");
function output(){
 console.log(this.textContent);
}
btns.forEach(btn => {
 btn.addEventListener("click", output);
});

Sample interactionClicking a button labeled "Save" logs: Save — because inside output(), this refers to the button that was clicked.

💡 addEventListener() is preferred over inline onclick because it separates HTML from JavaScript and allows multiple handlers on the same element.

⚪ 7

Creating Elements Dynamically

var li = document.createElement("li");
li.appendChild(document.createTextNode(text));
document.getElementById("sList").appendChild(li);

ResultA brand-new <li>text</li> is created in memory and inserted as the last child of the element with id sList — instantly visible on the page.

Pattern: Read input → Create element → Append element.

🔴 8

Putting Everything Together — Accordion

.myText{ display: none; }
.myText.active{ display: block; }

menus.forEach(el => {
 el.addEventListener("click", () => {
   openText.forEach(e => e.classList.remove("active"));
   el.nextElementSibling.classList.toggle("active");
 });
});

ResultClicking a menu heading closes every other open panel (remove("active") on all of them), then opens or closes this heading's own panel (toggle("active") on nextElementSibling) — the classic accordion behavior where only one section is open at a time.

Concepts Used

querySelectorAll()
addEventListener()
classList.toggle()
DOM Traversal — nextElementSibling

📋 Summary

Chapter Summary

DOM represents HTML as objects
document is the root of the DOM
Select via ID, class, tag, or CSS selectors
innerText vs innerHTML
classList for styling
addEventListener() for events
createElement / createTextNode / appendChild