What is the Document Object Model (DOM)?

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

Key Point: The DOM represents a document as a tree of objects where each node is an object representing part of the document. JavaScript can manipulate this tree to change the document.

DOM Tree Structure

The DOM represents an HTML document as a tree structure where each node is an object:

document
html
head
title

meta

body
div
h1

button

div
input

Accessing DOM Elements

Common Methods to Access Elements

// Access element by ID
let element = document.getElementById('message');

// Access elements by class name (returns HTMLCollection)
let elements = document.getElementsByClassName('my-class');

// Access elements by tag name (returns HTMLCollection)
let paragraphs = document.getElementsByTagName('p');

// Access elements by CSS selector (returns NodeList)
let items = document.querySelectorAll('.item');
let firstItem = document.querySelector('.item');

Modifying DOM Elements

Changing Content and Attributes

// Change text content
element.textContent = 'New text content';

// Change HTML content
element.innerHTML = '<strong>Bold text</strong>';

// Change attribute
element.setAttribute('class', 'new-class');

// Change style
element.style.color = 'red';
element.style.fontSize = '20px';

// Add/remove classes
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('visible');

DOM Manipulation Example

Interactive DOM Manipulation

Original Message




Creating and Removing Elements

Adding and Removing DOM Elements

// Create new element
let newElement = document.createElement('div');
newElement.textContent = 'Newly created element';
newElement.classList.add('new-div');

// Add to document
document.body.appendChild(newElement);

// Insert at specific position
let parent = document.getElementById('container');
let referenceElement = document.getElementById('reference');
parent.insertBefore(newElement, referenceElement);

// Remove element
let elementToRemove = document.getElementById('remove-me');
elementToRemove.parentNode.removeChild(elementToRemove);

// Modern way to remove
elementToRemove.remove();

DOM Events

Handling User Interactions

// Add event listener
let button = document.getElementById('my-button');
button.addEventListener('click', function(event) {
    console.log('Button clicked!');
    // Handle click event
});

// Common events
element.addEventListener('mouseover', handleMouseOver);
element.addEventListener('mouseout', handleMouseOut);
element.addEventListener('keydown', handleKeyPress);
element.addEventListener('submit', handleFormSubmit);

// Remove event listener
element.removeEventListener('click', handleClick);

DOM Traversal

Navigating the DOM Tree

// Access parent element
let parent = element.parentNode;

// Access child elements
let firstChild = element.firstChild;
let lastChild = element.lastChild;
let children = element.children;

// Access sibling elements
let nextSibling = element.nextSibling;
let previousSibling = element.previousSibling;

// More specific methods
let nextElement = element.nextElementSibling;
let previousElement = element.previousElementSibling;

Practice Questions

Question 1: What is the DOM?

Answer: The Document Object Model (DOM) is a programming interface for web documents. It represents the page structure as a tree of objects that can be manipulated with JavaScript.

Question 2: What is a DOM tree?

Answer: A DOM tree is a hierarchical representation of an HTML document where each HTML element is a node in the tree with parent-child relationships between elements.

Question 3: What is DOM manipulation?

Answer: DOM manipulation refers to programmatically accessing, modifying, adding, or removing elements from the DOM tree using JavaScript.

Question 4: What is DOM traversal?

Answer: DOM traversal refers to navigating through the DOM tree to access specific elements based on their relationships (parent, child, sibling).

Best Practices

  • Cache DOM references to avoid unnecessary queries
  • Use event delegation for dynamic elements
  • Batch DOM changes to minimize reflows
  • Use efficient selectors (ID is fastest)
  • Detach elements before making multiple changes
  • Use modern methods like remove() and append()