🖥️

JavaScript DOM Manipulation Overview

Jul 10, 2025

Overview

This lecture is a comprehensive introduction and practical guide to JavaScript DOM (Document Object Model) manipulation, covering fundamental concepts, node selection, traversal, modification, and event handling, culminating in practical projects from beginner to advanced.

Course Introduction & Prerequisites

  • The course teaches JavaScript DOM manipulation for modifying website elements.
  • Prerequisites: basic HTML, CSS, and JavaScript knowledge; recommended tools are a browser and code editor.
  • The course is in two main parts: core DOM concepts and hands-on projects.

Understanding the DOM

  • The DOM (Document Object Model) is a tree-like structure representing HTML elements as nodes.
  • Nodes can be elements, attributes, text, line breaks, or comments.
  • Relationships: Nodes have parent, child, and sibling relationships.
  • The document object is part of the window object (global browser context).

Selecting DOM Elements

  • Five main selection methods:
    • getElementById – selects by unique id, returns an element.
    • getElementsByClassName – selects by class, returns an HTMLCollection.
    • getElementsByTagName – selects by tag, returns an HTMLCollection.
    • querySelector – selects the first element matching a CSS selector.
    • querySelectorAll – selects all matching elements as a NodeList.

Styling and Modifying Elements

  • Use .style property to apply inline CSS to selected elements (camelCase for CSS properties).
  • Loop through collections to style multiple elements.
  • Use createElement to create new elements; insert using append or appendChild.
  • Use .innerText, .textContent, and .innerHTML to read or set node content.
  • Use .setAttribute, .getAttribute, .removeAttribute to modify attributes.
  • Use .classList.add, .classList.remove, .classList.contains, and .classList.toggle to manipulate classes.
  • .remove() deletes an element from the DOM.

DOM Traversal

  • Access parent nodes with .parentNode (any node) and .parentElement (element nodes only).
  • Access child nodes with .childNodes (includes text nodes/whitespace) and .children (element nodes only).
  • Use .firstChild, .lastChild, or .firstElementChild, .lastElementChild to access specific children.
  • Sibling navigation with .previousSibling, .nextSibling (any node) and .previousElementSibling, .nextElementSibling (element nodes).

Event Handling

  • Two main ways to add events: inline HTML on attributes (e.g. onclick) and .addEventListener() in JS.
  • .addEventListener() allows multiple handlers and more flexibility.
  • Examples: click, mouseover, etc. can be attached to elements for interactivity.
  • Toggle element visibility or classes on events for simple UI interactions.

Event Propagation and Delegation

  • Event propagation: Events travel through three phases—capturing, target, and bubbling.
  • Use the stopPropagation() method to halt event flow in propagation.
  • preventDefault() stops default browser behavior for specific elements (e.g. links).
  • Event delegation: Attach event listeners to parent nodes to handle events from current and future child nodes efficiently.

Example Projects Overview

  • Quote Generator: Uses randomization, DOM selection, and event listeners to display quotes.
  • Modal: Shows/hides a modal window with buttons and background overlay using events and CSS.
  • Accordion: Expands or collapses content using class toggling and event listeners in a loop.
  • Stopwatch: Implements start, pause, reset using intervals, state management, and DOM updates.
  • To-Do List: Adds, checks, and deletes tasks dynamically using event listeners, DOM creation, and delegation.

Key Terms & Definitions

  • DOM (Document Object Model) — Tree structure of objects representing HTML elements on a page.
  • Node — Any single point in the DOM tree (element, text, attribute, etc.).
  • HTMLCollection/NodeList — Array-like objects containing DOM elements.
  • Event Listener — JS function that runs in response to a user action or browser event.
  • Event Propagation — The process of event movement through capturing, target, and bubbling phases.
  • Event Delegation — Using a parent element to handle events on its children, including dynamic ones.

Action Items / Next Steps

  • Review DOM selection and manipulation methods with small code examples.
  • Complete the five guided projects to practice concepts.
  • Brush up on HTML, CSS, and JavaScript basics if needed before starting the projects.

Full transcript