Back to Topics

Basics of JavaScript — Part 2

DOM Manipulation Fundamentals

Selecting elements, nodes, events, and patterns
Part 1: JS Basics

Introduction to the Document Object Model (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.

What is the DOM?

  • Tree-like representation of HTML document
  • Each HTML element is a node in the tree
  • JavaScript can access and modify these nodes
  • Changes are reflected immediately in the browser

DOM Tree Structure:

  • Document: Root of the tree
  • Element nodes: HTML tags
  • Text nodes: Text content
  • Attribute nodes: Element attributes
DOM Tree Visualization:
HTML Structure:
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <p>Paragraph text</p>
  </body>
</html>
DOM Tree Structure:
document
html
head
title
"Page Title"
body
h1
"Main Heading"
p
"Paragraph text"

Interactive DOM Playground

Try out DOM manipulation in real-time! Click the buttons below to see how different DOM methods work.

Demo Title

This is a demo paragraph.

  • Item 1
  • Item 2
Console Output:
Click a button to see DOM manipulation in action!

Selecting Elements

Before you can manipulate DOM elements, you need to select them. JavaScript provides several methods to select elements from the DOM.

Selection Methods:

getElementById()

Selects a single element by its unique ID attribute. Fast and efficient for targeting specific elements.

document.getElementById('myElement')
querySelector()

Selects the first element matching a CSS selector. Very flexible and powerful.

document.querySelector('.myClass')
querySelectorAll()

Selects all elements matching a CSS selector. Returns a NodeList collection.

document.querySelectorAll('div.item')
getElementsByClassName()

Selects elements by class name. Returns a live HTMLCollection that updates automatically.

document.getElementsByClassName('myClass')
Demo HTML Structure:

Main Title

This is a description paragraph.

Another description paragraph.

  • List item 1
  • List item 2
  • List item 3

Working with DOM Nodes

Once you've selected elements, you can manipulate them by changing their content, attributes, and structure.

Node Manipulation Methods:

Creating and Adding:
  • createElement() - Create new element
  • createTextNode() - Create text node
  • appendChild() - Add child element
  • insertBefore() - Insert before element
Removing and Replacing:
  • removeChild() - Remove child element
  • replaceChild() - Replace element
  • remove() - Remove element (modern)
  • cloneNode() - Clone element
Dynamic Content Area:

Original content

Updating Element Content & Attributes

You can modify the content and attributes of DOM elements to create dynamic web pages.

Content Modification:

  • innerHTML - Get/set HTML content
  • textContent - Get/set text content
  • innerText - Get/set visible text
  • getAttribute() - Get attribute value
  • setAttribute() - Set attribute value
  • removeAttribute() - Remove attribute
Content Update Demo:

Original Heading

Original paragraph content.

Demo Image

Introduction to Events

Events are actions that happen in the browser, such as clicking a button, moving the mouse, or pressing a key. JavaScript can respond to these events.

Event Concepts:

  • Event: Something that happens in the browser
  • Event Handler: Function that responds to an event
  • Event Object: Contains information about the event
  • Event Target: Element that triggered the event
  • Event Bubbling: Events propagate up the DOM tree
  • Event Capturing: Events propagate down the DOM tree

Different Types of Events

There are many different types of events that can occur in a web browser. Here are the most common categories:

Mouse Events

Handle user interactions with mouse clicks, movements, and hover states.

click, dblclick, mousedown, mouseup, mouseover, mouseout
Keyboard Events

Respond to keyboard input and key combinations for interactive experiences.

keydown, keyup, keypress
Form Events

Handle form submissions, input changes, and focus states for user input validation.

submit, change, input, focus, blur
Window Events

Monitor browser window changes like loading, resizing, and scrolling.

load, resize, scroll, beforeunload

Interactive Event Playground

Experience different event types in real-time! Interact with the elements below and watch the events fire.

Mouse Events
Keyboard Events
Form Events
Controls
Event Log:

Event Binding and Event Listeners

There are several ways to bind events to elements in JavaScript. The most modern and flexible approach is using event listeners.

Methods of Event Binding:

HTML Attributes:
<button onclick="myFunction()">
  Click me
</button>
DOM Properties:
element.onclick = function() {
  // Handle click
};
Event Listeners:
element.addEventListener(
  'click', 
  function() {
    // Handle click
  }
);
Event Listener Demo:

Event Delegation

Event delegation is a technique where you attach a single event listener to a parent element to handle events for multiple child elements, including those added dynamically.

Benefits of Event Delegation:

  • Better performance with many elements
  • Works with dynamically added elements
  • Reduces memory usage
  • Simplifies event management
Event Delegation Demo:
Previous: Unit 1 - Basic JavaScript