The hidden treasure of the web!
What is the DOM ?
DOM Manipulation
DOM Elements
DOM Events
# What is the DOM ?
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?
# 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?
The DOM represents a webpage as a tree structure where:
These nodes can be accessed, modified, added, or removed using JavaScript.
# What is HTML?
Without DOM
With DOM ✨
# Essential Extensions
# VSC Interface Overview
const header = document.getElementById('header');
console.log(header.textContent); // Outputs: "Welcome to the DOM"
JavaScript provides several ways to select and work with elements in the DOM.
Selects an element by its unique id.
# VSC Interface Overview
const descriptions = document.getElementsByClassName('description');
console.log(descriptions[0].textContent); // "Learn DOM manipulation step by step."
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
const header = document.querySelector('#header');
console.log(header); // "Learn DOM manipulation step by step."
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
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => console.log(p.textContent));
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
const body = header.parentNode;
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
const nextElement = header.nextElementSibling;
3. Sibling Nodes
Navigate between elements on the same level.
# Attributes
# VSC Interface Overview
header.textContent = "Welcome to Advanced DOM Manipulation!";
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
const newElement = document.createElement('button');
newElement.textContent = "Click Me!";
document.body.appendChild(newElement);
document.body.removeChild(newElement);
2. Remove an Element
# VSC Interface Overview
header.classList.add('highlight');
header.classList.remove('highlight');
2. Remove a Class
header.classList.toggle('highlight');
3. Toggle a Class
# What is HTML?
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:
Imagine ringing a doorbell (the event). JavaScript is the person inside who hears the bell and decides what to do next (the event handler).
# VSC Interface Overview
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert('Button clicked!');
});
Steps:
'click'
).element.addEventListener('event', callbackFunction);
# VSC Interface Overview
const image = document.querySelector('img');
image.addEventListener('mouseover', () => {
console.log('Mouse hovered over the image!');
});
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
document.addEventListener('keydown', (event) => {
console.log(`Key pressed: ${event.key}`);
});
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
const inputField = document.querySelector('input');
inputField.addEventListener('input', () => {
console.log('Input value changed!');
});
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
window.addEventListener('scroll', () => {
console.log('You are scrolling!');
});
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
const inputField = document.querySelector('input');
inputField.addEventListener('input', () => {
console.log('Input value changed!');
});
Properties of the Event Object:
type
: The type of event (e.g., 'click'
, 'keydown'
).target
: The element that triggered the event.key
: The key pressed during a keyboard event.clientX
/ clientY
: The x and y coordinates of the mouse.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
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
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.