DOM Introduction

📄 What is the DOM?

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content.

Tree-like structure of nodes and objects
Platform and language-neutral interface
Allows JavaScript to interact with HTML
Dynamic content modification

DOM Tree Visualization:

Document (Root)
├── html
│   ├── head
│   │   ├── title
│   └── body
│       └── div#container
│           ├── h1#main-heading
│           ├── p.description
│           ├── ul#list
│           │   ├── li.item
│           │   ├── li.item
│           │   └── li.item
│           └── button#demo-button

Sample HTML Structure:

🔍 Accessing DOM Elements

JavaScript provides several methods to select and access elements in the DOM. Each method returns different types of collections or single elements.

JavaScript Editor

// Accessing DOM Elements
console.log("=== ACCESSING DOM ELEMENTS ===");

// By ID (returns single element)
const heading = document.getElementById('main-heading');
console.log("Element by ID:", heading);
console.log("Heading text:", heading.textContent);

// By Class Name (returns HTMLCollection)
const items = document.getElementsByClassName('item');
console.log("\nElements by class name:", items);
console.log("Number of items:", items.length);
console.log("First item:", items[0].textContent);

// By Tag Name (returns HTMLCollection)
const paragraphs = document.getElementsByTagName('p');
console.log("\nParagraphs:", paragraphs);
console.log("First paragraph:", paragraphs[0].textContent);

// Query Selector (CSS selector - returns first match)
const firstItem = document.querySelector('.item');
console.log("\nFirst .item:", firstItem.textContent);

// Query Selector All (returns NodeList)
const allItems = document.querySelectorAll('.item');
console.log("\nAll .items:", allItems);
allItems.forEach((item, index) => {
  console.log(`Item ${index + 1}: ${item.textContent}`);
});

Selection Methods:

getElementById() - Returns single element
getElementsByClassName() - Returns HTMLCollection
getElementsByTagName() - Returns HTMLCollection
querySelector() - Returns first matching element
querySelectorAll() - Returns NodeList

Key Differences:

HTMLCollection: Live collection, array-like
NodeList: Static collection (usually), has forEach
querySelector accepts CSS selectors
ID selectors are fastest

🏷️ Element Properties & Attributes

DOM elements have properties and attributes that describe their state and characteristics. Properties are JavaScript object properties, while attributes are HTML attributes.

JavaScript Editor

// Element Properties and Attributes
console.log("=== ELEMENT PROPERTIES ===");

const container = document.getElementById('container');
const demoButton = document.getElementById('demo-button');

console.log("Container element:", container);
console.log("Tag name:", container.tagName);
console.log("ID:", container.id);
console.log("Class name:", container.className);
console.log("Has child nodes?", container.hasChildNodes());
console.log("Number of children:", container.children.length);

console.log("\n=== ATTRIBUTES ===");
// Getting attributes
console.log("Button ID:", demoButton.getAttribute('id'));
console.log("Button text:", demoButton.textContent);

// Setting attributes
demoButton.setAttribute('title', 'Click this button');
console.log("Button title:", demoButton.getAttribute('title'));

// Checking attributes
console.log("Has id attribute?", demoButton.hasAttribute('id'));
console.log("Has class attribute?", demoButton.hasAttribute('class'));

console.log("\n=== INNER PROPERTIES ===");
const list = document.getElementById('list');
console.log("Inner HTML:", list.innerHTML);
console.log("\nText content:", list.textContent);
console.log("\nOuter HTML (first 100 chars):", list.outerHTML.substring(0, 100) + "...");

Common Properties:

id - Element ID
className - CSS class
tagName - Tag name
textContent - Text inside
innerHTML - HTML content

Attribute Methods:

getAttribute() - Get attribute value
setAttribute() - Set attribute value
hasAttribute() - Check if exists
removeAttribute() - Remove attribute

Important Notes:

innerHTML parses HTML
textContent is plain text
Use classList for classes
Attributes are strings

🌳 Navigating the DOM Tree

You can navigate through the DOM tree using parent, child, and sibling relationships. This allows you to move from one element to related elements.

JavaScript Editor

// Navigating the DOM Tree
console.log("=== TRAVERSING DOM ===");

const container = document.getElementById('container');

console.log("\n=== PARENT NODE ===");
const heading = document.getElementById('main-heading');
console.log("Heading parent:", heading.parentNode.id);
console.log("Heading parent element:", heading.parentElement.tagName);

console.log("\n=== CHILD NODES ===");
console.log("Container children:", container.children);
console.log("First child:", container.firstElementChild.tagName);
console.log("Last child:", container.lastElementChild.tagName);
console.log("Child count:", container.childElementCount);

console.log("\n=== SIBLING NODES ===");
const firstPara = document.querySelector('p');
console.log("Paragraph element:", firstPara.tagName);
console.log("Next sibling:", firstPara.nextElementSibling.tagName);
console.log("Previous sibling:", firstPara.previousElementSibling.tagName);

console.log("\n=== NODE INFORMATION ===");
console.log("Node type (container):", container.nodeType);  // 1 = ELEMENT_NODE
console.log("Node name (container):", container.nodeName);
console.log("Node value (container):", container.nodeValue);

// Text node example
const textNode = heading.firstChild;
console.log("\nText node type:", textNode.nodeType);  // 3 = TEXT_NODE
console.log("Text node name:", textNode.nodeName);
console.log("Text node value:", textNode.nodeValue);

Parent Navigation:

parentNode - Parent node
parentElement - Parent element

Child Navigation:

children - Child elements
firstChild - First child node
firstElementChild - First child element
childNodes - All child nodes

Sibling Navigation:

nextSibling - Next sibling node
nextElementSibling - Next element
previousSibling - Previous node
previousElementSibling - Previous element

✨ Interactive DOM Manipulation

Now let's see DOM manipulation in action! This example creates, modifies, and removes elements dynamically.

JavaScript Editor

// Interactive DOM Manipulation
console.log("=== INTERACTIVE DOM ===");

// Create new element
const newDiv = document.createElement('div');
newDiv.id = 'new-element';
newDiv.className = 'highlight';
newDiv.textContent = 'This is a dynamically created element!';
newDiv.style.backgroundColor = '#e3f2fd';
newDiv.style.padding = '10px';
newDiv.style.border = '2px solid #2196f3';
newDiv.style.margin = '10px 0';

// Add to container
const container = document.getElementById('container');
container.appendChild(newDiv);
console.log("New element added!");

// Modify existing element
const heading = document.getElementById('main-heading');
heading.textContent = 'DOM Tutorial - Updated!';
heading.style.color = '#2196f3';
heading.style.textDecoration = 'underline';
console.log("Heading updated!");

// Add class to elements
const items = document.querySelectorAll('.item');
items.forEach((item, index) => {
  item.classList.add('highlight-item');
  item.textContent = `Updated Item ${index + 1}`;
});
console.log("Items updated!");

// Create and insert element
const newButton = document.createElement('button');
newButton.textContent = 'New Button';
newButton.className = 'btn';
newButton.onclick = function() {
  alert('New button clicked!');
};

// Insert before the list
const list = document.getElementById('list');
container.insertBefore(newButton, list);
console.log("New button inserted!");

// Remove element
const infoDiv = document.querySelector('.info');
if (infoDiv) {
  container.removeChild(infoDiv);
  console.log("Info div removed!");
}

console.log("\nCurrent container children:");
Array.from(container.children).forEach((child, index) => {
  console.log(`${index + 1}. ${child.tagName} - ${child.id || child.className}`);
});

💪 Practice Exercises:

Create a function that adds a new list item
Make a toggle function that shows/hides elements
Create a counter that increments when button is clicked
Build a simple to-do list with add/remove functionality

📋 DOM Quick Reference

Node Types:

1 - ELEMENT_NODE
3 - TEXT_NODE
8 - COMMENT_NODE
9 - DOCUMENT_NODE

Creation Methods:

createElement() - Create element
createTextNode() - Create text node
createDocumentFragment() - Lightweight container

Insertion Methods:

appendChild() - Add to end
insertBefore() - Insert before reference
replaceChild() - Replace element
cloneNode() - Clone element

← Math in JavaScript DOM Manipulation →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

DOM Introduction

📄 What is the DOM?

DOM Tree Visualization:

Sample HTML Structure:

🔍 Accessing DOM Elements

Selection Methods:

Key Differences:

🏷️ Element Properties & Attributes

Common Properties:

Attribute Methods:

Important Notes:

🌳 Navigating the DOM Tree

Parent Navigation:

Child Navigation:

Sibling Navigation:

✨ Interactive DOM Manipulation

💪 Practice Exercises:

📋 DOM Quick Reference

Node Types:

Creation Methods:

Insertion Methods:

Follow Us

Our Tools

Our Company

Special Tools