Docs
Module-17-DOM-Manipulation
10.1 DOM Basics
Overview
The Document Object Model (DOM) is a programming interface that represents HTML and XML documents as a tree structure. Each element, attribute, and piece of text becomes a node in this tree, allowing JavaScript to dynamically access and manipulate the document's content, structure, and styles.
The DOM Tree Structure
┌─────────────────────────────────────────────────────────────────┐
│ DOM TREE STRUCTURE │
├─────────────────────────────────────────────────────────────────┤
│ │
│ document │
│ │ │
│ <html> │
│ / \ │
│ <head> <body> │
│ │ │ │
│ <title> <div> │
│ │ / \ │
│ "Page" <h1> <p> │
│ │ │ │
│ "Hello" "World" │
│ │
│ Each box is a NODE: │
│ - Element nodes: <html>, <body>, <div>, etc. │
│ - Text nodes: "Page", "Hello", "World" │
│ - Attribute nodes: id, class, href, etc. │
│ - Comment nodes: <!-- comments --> │
│ │
└─────────────────────────────────────────────────────────────────┘
Node Types
| Type | nodeType | Description | Example |
|---|---|---|---|
| Element | 1 | HTML tags | <div>, <p> |
| Text | 3 | Text content | "Hello World" |
| Comment | 8 | HTML comments | <!-- note --> |
| Document | 9 | The document | document |
| DocumentFragment | 11 | Lightweight container | createDocumentFragment() |
const element = document.body;
console.log(element.nodeType); // 1 (Element)
console.log(element.nodeName); // "BODY"
console.log(element.nodeValue); // null (elements have no value)
const text = element.firstChild;
console.log(text.nodeType); // 3 (Text)
console.log(text.nodeValue); // The text content
Selecting Elements
Single Element Selection
┌────────────────────────────────────────────────────────────────┐
│ SINGLE ELEMENT SELECTORS │
├────────────────────────────────────────────────────────────────┤
│ │
│ getElementById('id') │
│ ├── Returns: Single element or null │
│ ├── Speed: Fastest │
│ └── Usage: document.getElementById('header') │
│ │
│ querySelector('selector') │
│ ├── Returns: First matching element or null │
│ ├── Speed: Moderate │
│ └── Usage: document.querySelector('.nav-item') │
│ element.querySelector('span') │
│ │
└────────────────────────────────────────────────────────────────┘
// By ID - fastest method
const header = document.getElementById('header');
// By CSS selector - most flexible
const firstButton = document.querySelector('button');
const navLink = document.querySelector('.nav-link');
const emailInput = document.querySelector('input[type="email"]');
const firstChild = document.querySelector('ul > li:first-child');
Multiple Element Selection
┌────────────────────────────────────────────────────────────────┐
│ MULTIPLE ELEMENT SELECTORS │
├────────────────────────────────────────────────────────────────┤
│ │
│ querySelectorAll('selector') │
│ ├── Returns: Static NodeList │
│ ├── Iterable: Yes (forEach, for...of) │
│ └── Live: No (doesn't update) │
│ │
│ getElementsByClassName('class') │
│ ├── Returns: Live HTMLCollection │
│ ├── Iterable: No (use Array.from) │
│ └── Live: Yes (updates automatically) │
│ │
│ getElementsByTagName('tag') │
│ ├── Returns: Live HTMLCollection │
│ ├── Iterable: No │
│ └── Live: Yes │
│ │
└────────────────────────────────────────────────────────────────┘
// Static NodeList - use when you want a snapshot
const items = document.querySelectorAll('.menu-item');
items.forEach((item) => console.log(item.textContent));
// Live HTMLCollection - updates when DOM changes
const buttons = document.getElementsByClassName('btn');
console.log(buttons.length); // Changes as buttons are added/removed
// Convert to array for array methods
const buttonsArray = Array.from(buttons);
buttonsArray.filter((btn) => btn.classList.contains('primary'));
Static vs Live Collections
const container = document.getElementById('container');
// Static - querySelectorAll
const staticList = container.querySelectorAll('p');
console.log(staticList.length); // e.g., 3
// Live - getElementsByTagName
const liveList = container.getElementsByTagName('p');
console.log(liveList.length); // e.g., 3
// Add a new paragraph
const newP = document.createElement('p');
container.appendChild(newP);
console.log(staticList.length); // Still 3 (static)
console.log(liveList.length); // Now 4 (live)
DOM Traversal
┌─────────────────────────────────────────────────────────────────┐
│ DOM TRAVERSAL │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ parentNode │ │
│ │parentElement│ │
│ └──────┬──────┘ │
│ │ │
│ previousSibling ◄─────────┼─────────► nextSibling │
│ previousElement │ nextElement │
│ Sibling │ Sibling │
│ ┌──────┴──────┐ │
│ │ element │ │
│ └──────┬──────┘ │
│ │ │
│ ┌─────────────┴─────────────┐ │
│ │ │ │
│ firstChild lastChild │
│ firstElementChild lastElementChild │
│ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ child child child │
│ │
│ children (HTMLCollection of element children) │
│ childNodes (NodeList of all child nodes) │
│ │
└─────────────────────────────────────────────────────────────────┘
Parent Navigation
const item = document.querySelector('.item');
// Parent element
const parent = item.parentElement; // <ul> or whatever contains it
const parentNode = item.parentNode; // Usually same, can be #document
// Go up multiple levels
const grandparent = item.parentElement.parentElement;
// Find closest ancestor matching selector
const container = item.closest('.container');
const form = item.closest('form'); // null if not in a form
Child Navigation
const list = document.querySelector('ul');
// Element children only (no text nodes)
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
const allItems = list.children; // HTMLCollection
// All nodes including text (whitespace)
const firstNode = list.firstChild; // Could be text node
const allNodes = list.childNodes; // NodeList
// Check if has children
const hasChildren = list.hasChildNodes();
const childCount = list.children.length;
Sibling Navigation
const middle = document.querySelector('.middle');
// Element siblings
const prev = middle.previousElementSibling;
const next = middle.nextElementSibling;
// All sibling nodes (including text)
const prevNode = middle.previousSibling;
const nextNode = middle.nextSibling;
// Get all siblings
function getSiblings(element) {
return Array.from(element.parentElement.children).filter(
(child) => child !== element
);
}
Common DOM Properties
Element Properties
| Property | Description | Example |
|---|---|---|
id | Element's ID | element.id = 'main' |
className | Class string | element.className = 'a b' |
classList | Class manipulation | element.classList.add('new') |
tagName | Tag name (uppercase) | element.tagName // "DIV" |
innerHTML | HTML content | element.innerHTML = '<b>Hi</b>' |
textContent | Text only | element.textContent = 'Hello' |
innerText | Visible text | element.innerText |
textContent vs innerHTML vs innerText
const div = document.createElement('div');
div.innerHTML = '<p>Hello <strong>World</strong></p>';
console.log(div.innerHTML); // '<p>Hello <strong>World</strong></p>'
console.log(div.textContent); // 'Hello World'
console.log(div.innerText); // 'Hello World' (respects CSS)
// Security: textContent is safer (no HTML parsing)
const userInput = '<script>alert("XSS")</script>';
div.textContent = userInput; // Safe - displays as text
div.innerHTML = userInput; // DANGER - could execute script
The classList API
const element = document.querySelector('.box');
// Add classes
element.classList.add('active');
element.classList.add('visible', 'highlight'); // Multiple
// Remove classes
element.classList.remove('hidden');
element.classList.remove('a', 'b', 'c'); // Multiple
// Toggle class
element.classList.toggle('active'); // Add or remove
element.classList.toggle('dark', isDarkMode); // Force add/remove
// Check for class
const isActive = element.classList.contains('active');
// Replace class
element.classList.replace('old-class', 'new-class');
// Iterate classes
element.classList.forEach((cls) => console.log(cls));
// Get class at index
const firstClass = element.classList.item(0);
Attributes
const link = document.querySelector('a');
// Get attribute
const href = link.getAttribute('href');
const target = link.getAttribute('target');
// Set attribute
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');
// Check if attribute exists
const hasTitle = link.hasAttribute('title');
// Remove attribute
link.removeAttribute('target');
// Data attributes
const card = document.querySelector('.card');
card.dataset.id = '123'; // Sets data-id="123"
const id = card.dataset.id; // Gets data-id value
card.dataset.userName = 'John'; // Sets data-user-name="John"
Document Properties and Methods
// Document references
document.documentElement; // <html>
document.head; // <head>
document.body; // <body>
document.title; // Page title
// Document information
document.URL; // Current URL
document.domain; // Domain name
document.referrer; // Previous page URL
// All forms, images, links
document.forms; // HTMLCollection of <form>
document.images; // HTMLCollection of <img>
document.links; // HTMLCollection of <a> with href
Performance Considerations
Selector Performance
┌────────────────────────────────────────────────────────────────┐
│ SELECTOR PERFORMANCE (Fastest to Slowest) │
├────────────────────────────────────────────────────────────────┤
│ │
│ 1. getElementById('id') ██████████████████ Fastest │
│ │
│ 2. getElementsByClassName('cls') ████████████████ Fast │
│ │
│ 3. getElementsByTagName('tag') ███████████████ Fast │
│ │
│ 4. querySelector('#id') ██████████████ Good │
│ │
│ 5. querySelector('.class') ████████████ Good │
│ │
│ 6. querySelectorAll('.items') ██████████ Medium │
│ │
│ 7. querySelector('complex > sel') ████████ Slower │
│ │
└────────────────────────────────────────────────────────────────┘
Best Practices
// ❌ Avoid repeated queries
for (let i = 0; i < 100; i++) {
document.querySelector('.item').style.color = 'red';
}
// ✅ Cache the reference
const item = document.querySelector('.item');
for (let i = 0; i < 100; i++) {
item.style.color = 'red';
}
// ❌ Avoid querying in loops
items.forEach(() => {
const container = document.getElementById('container');
// ...
});
// ✅ Query once outside loop
const container = document.getElementById('container');
items.forEach(() => {
// Use container
});
// ✅ Scope queries to parent elements
const form = document.getElementById('myForm');
const input = form.querySelector('input'); // Only searches within form
Key Takeaways
- •DOM is a tree - HTML becomes a hierarchical node structure
- •Use querySelector/querySelectorAll - Most flexible selection methods
- •Cache DOM references - Avoid repeated queries
- •getElementById is fastest - Use when selecting by ID
- •Static vs Live - querySelectorAll is static, getElementsBy* is live
- •Use textContent over innerHTML - Safer and faster for text
- •classList for classes - Modern API for class manipulation
- •Scope your queries - Search within parent elements when possible