The hidden treasure of the web!

{ Discovering the DOM }

1

What is the DOM ?

3

DOM Manipulation

Summary

2

DOM Elements

4

DOM Events

#  What is the DOM ?

1.  What is the DOM ?

Document Object Model

The Javascript DOM (Document Object Model) is an interface that allows developers to manipulate the content, structure, and style of a website. It's a structured representation of an HTML document that can be manipulated 

#  What is HTML?
#  What is HTML?

This is how your browser sees the web. Welcome to the DOMatrix! 

#  What is HTML?

The DOM is the bridge between your HTML (structure of a webpage) and the interactivity  provided by JavaScript.

it’s a programming interface that transforms a web page into an object model that the browser can understand.

#  What is HTML?

DOM Representation

The DOM represents a webpage as a tree structure where:

 

  • The ROOT: is the HTML document.
  • Nodes: HTML element (<div>, <p>...).
  • Leaves : Text and attributes (id, class...).

 

These nodes can be accessed, modified, added, or removed using JavaScript.

#  What is HTML?

VS

Without DOM

With DOM ✨

Why is the DOM Important?

  • Without the DOM, your webpage is just a static photo 📷.
  • The DOM allows your page to:
    • React to user input (clicks, typing, etc.).
    • Dynamically change its content.
# Essential Extensions

2. DOM Elements

# VSC Interface Overview

Accessing Elements in the DOM

const header = document.getElementById('header');
console.log(header.textContent); // Outputs: "Welcome to the DOM"
  • Selecting Elements​

JavaScript provides several ways to select and work with elements in the DOM.

  1. getElementById(id)

Selects an element by its unique id.

# VSC Interface Overview

Accessing Elements in the DOM

const descriptions = document.getElementsByClassName('description');
console.log(descriptions[0].textContent); // "Learn DOM manipulation step by step."
  • Selecting Elements​

JavaScript provides several ways to select and work with elements in the DOM.

2. getElementsByClassName(className)  

Selects all elements with a specific class name.

# VSC Interface Overview

Accessing Elements in the DOM

const header = document.querySelector('#header');
console.log(header); // "Learn DOM manipulation step by step."
  • Selecting Elements​

JavaScript provides several ways to select and work with elements in the DOM.

3. querySelector(selector)  

Selects the first element that matches a CSS selector.

# VSC Interface Overview

Accessing Elements in the DOM

const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => console.log(p.textContent));
  • Selecting Elements​

JavaScript provides several ways to select and work with elements in the DOM.

4. querySelectorAll(selector)  

Selects all elements matching a CSS selector.

# VSC Interface Overview

Accessing Elements in the DOM

const body = header.parentNode;
  • Traversing the DOM

1. Parent Node

Access the parent of an element.

const children = body.childNodes;

2. Child Nodes​

Access all child nodes of an element.

# VSC Interface Overview

Accessing Elements in the DOM

const nextElement = header.nextElementSibling;
  • Traversing the DOM

3. Sibling Nodes

Navigate between elements on the same level.

  1. # Attributes​

3. DOM Manipulation

# VSC Interface Overview

Modifying the DOM

header.textContent = "Welcome to Advanced DOM Manipulation!";
  • Changing Content
  1. textContent

Modifies only the text inside an element (inner text) .

header.innerHTML = "<span>Welcome to <strong>DOM</strong>!</span>";

2. innerHTML

Modifies the HTML content inside an element (inner HTML).

# VSC Interface Overview

Modifying the DOM

const newElement = document.createElement('button');
newElement.textContent = "Click Me!";
document.body.appendChild(newElement);
  • Adding and Removing Elements
  1. Create an Element
document.body.removeChild(newElement);

2. Remove an Element

# VSC Interface Overview

Modifying the DOM

header.classList.add('highlight');
  • Adding and Removing Classes
  1. Add a Class
header.classList.remove('highlight');

2. Remove a Class

header.classList.toggle('highlight');

3. Toggle a Class

4. DOM Events

#  What is HTML?

Events in the DOM

Events are actions that occur when a user interacts with a webpage (e.g., clicks, keystrokes, mouse movements), which JavaScript can "listen to" and respond to.

 

Examples of Events:

  1. Clicking a button.
  2. Typing in a form field.
  3. Scrolling the page.
  4. Moving the mouse over an image.

Imagine ringing a doorbell (the event). JavaScript is the person inside who hears the bell and decides what to do next (the event handler).

Real-World Analogy !

# VSC Interface Overview

Adding Event Listeners

const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('Button clicked!');
});

Steps:

  1. Select the element.
  2. Specify the event type (e.g., 'click').
  3. Define the function to run when the event occurs.
element.addEventListener('event', callbackFunction);
# VSC Interface Overview

Types of DOM Events

const image = document.querySelector('img');
image.addEventListener('mouseover', () => {
  console.log('Mouse hovered over the image!');
});

1. Mouse Event

  • click: When the user clicks on an element.
  • dblclick: Double-clicking an element.
  • mouseover: Hovering over an element.
  • mouseout: Moving the mouse away from an element.
  • mousedown: When the mouse button is pressed down.
  • mouseup: When the mouse button is released.
# VSC Interface Overview

Types of DOM Events

document.addEventListener('keydown', (event) => {
  console.log(`Key pressed: ${event.key}`);
});

2. Keyboard Events

  • keydown: When a key is pressed.
  • keyup: When a key is released.
  • keypress (deprecated): When a key is pressed down (excluding special keys).

The event object gives details about the key, like event.key (e.g., 'Enter') and event.code (e.g., 'KeyA').

# VSC Interface Overview

Types of DOM Events

const inputField = document.querySelector('input');
inputField.addEventListener('input', () => {
  console.log('Input value changed!');
});

3. Form Events

  • submit: When a form is submitted.
  • input: When the user types in an input field.
  • change: When the value of an input, select, or textarea changes.
  • focus / blur: When an element gains or loses focus.
# VSC Interface Overview

Types of DOM Events

window.addEventListener('scroll', () => {
  console.log('You are scrolling!');
});

4. Window Events

  • load: When the entire page (including images and styles) has loaded.
  • resize: When the browser window is resized.
  • scroll: When the user scrolls the page.
# VSC Interface Overview

The Event Object

const inputField = document.querySelector('input');
inputField.addEventListener('input', () => {
  console.log('Input value changed!');
});

Properties of the Event Object:

  1. type: The type of event (e.g., 'click', 'keydown').
  2. target: The element that triggered the event.
  3. key: The key pressed during a keyboard event.
  4. clientX / clientY: The x and y coordinates of the mouse.
  5. defaultPrevented: Whether the default action was prevented.

Whenever an event occurs, JavaScript creates an Event Object that provides details about the event.

# VSC Interface Overview

Preventing Default Behavior

form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('Form submission prevented!');
});

Example: Preventing Form Submission

Sometimes, you want to stop the browser's default action for an event.

# VSC Interface Overview

Advanced: Event Delegation

document.querySelector('ul').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log(`You clicked on: ${event.target.textContent}`);
  }
});

Instead of adding listeners to multiple elements, add one listener to a parent element and use the target property.

Discovering

the DOM​

Dom Manipulation

By Fatima BENAZZOU

Made with Slides.com

Dom Manipulation

  • 183

More from Fatima BENAZZOU