The original web browser ran on NeXT computers and showed Tim Berners-Lee's revolutionary vision
It had many features of current web browsers - but with one amazing difference
Built-in editing capability! You could modify web pages directly from inside the browser
This was the first web editing functionality - decades before modern developer tools
Source: CERN - "A short history of the Web"
💡 Connection to Today: DOM manipulation fulfills Tim Berners-Lee's original vision of an interactive, editable web. What we're learning today is the foundation that makes the modern web dynamic and user-controlled!
🤔 Reflection Question: How would the web be different today if editing capabilities had remained a standard browser feature from the beginning?
In 1993, the Mosaic web browser was revolutionary - it was the first application to download images and text together
It laid everything out in the same document, like a printed magazine page - this seems obvious now, but it was groundbreaking!
Mosaic was the spark that popularized the web - making it accessible to everyday users
The Mosaic browser quickly spawned Netscape Navigator, from which Mozilla Firefox is descended
Source: "A Short History of the Web – Full Stack Web Development"
💡 Connection to Today: DOM manipulation evolved from Mosaic's static document display to dynamic, interactive content. The methods we're learning allow us to change those "magazine pages" in real-time based on user interaction!
🤔 Reflection Question: How did Mosaic's ability to display images alongside text transform user expectations for the web? What parallels do you see with modern web capabilities?
Removing Elements 🗑️
Cleaning Up the DOM
// Modern way - remove itself
element.remove();
// Classic way - parent removes child
parent.removeChild(element);
// Arrow function version
button.addEventListener("click", () => {
console.log("Clicked!");
});
Common Event Types 🎪
What Can You Listen For?
Mouse Events
click
dblclick
mouseenter
mouseleave
mousedown
mouseup
mousemove
Keyboard Events
keydown
keyup
keypress
Form Events
input
change
submit
focus
blur
Callback Functions 📞
Functions as Arguments
// Anonymous function (inline)
button.addEventListener("click", function() {
console.log("Clicked!");
});
// Arrow function
button.addEventListener("click", () => {
console.log("Clicked!");
});
// Named function (reusable!)
function handleClick() {
console.log("Button was clicked!");
}
button.addEventListener("click", handleClick);
// With event object
button.addEventListener("click", (e) => {
console.log(e.target); // The clicked element
e.target.style.background = "blue";
});
The Event Object 📦
Information About What Happened
button.addEventListener("click", function(e) { // e is the event object
console.log(e.type); // "click"
console.log(e.target); // Element that was clicked
console.log(e.currentTarget); // Element with listener
console.log(e.clientX); // Mouse X position
console.log(e.clientY); // Mouse Y position
console.log(e.timeStamp); // When it happened
});
// Select ALL buttons
const buttons = document.querySelectorAll("button");
// Add listener to EACH button
buttons.forEach((button) => {
button.addEventListener("click", () => {
alert(`You clicked ${button.textContent}`);
button.classList.toggle("clicked");
});
});
// Or use the event target to identify which one
buttons.forEach((button) => {
button.addEventListener("click", (e) => {
console.log(`Clicked: ${e.target.textContent}`);
});
});
Event Bubbling 🫧
Events Travel Up the Tree
When an event happens on an element, it "bubbles up" to its parents!
In 1995, Netscape Navigator began to support dynamic content on web pages through JavaScript and Java Applets
Before this, web pages were completely static - you could only read them, not interact with them
Duke, the Java mascot, changed everything! A popular animation showed Duke slowly tumbling across web pages
This simple animation blew everyone away - it proved that web pages could be alive and interactive!
Source: "A Short History of the Web – Full Stack Web Development"
💡 Connection to Today: DOM manipulation is the foundation of ALL web interactivity today. Every animation, every button click, every dynamic update you see on modern websites - it all traces back to these pioneering experiments in 1995. You're learning the technology that powers the interactive web!
🤔 Reflection Question: Imagine showing a 1995 web developer a modern interactive web application (like Google Maps or Netflix). What do you think would surprise them most about how far DOM manipulation has evolved?
// Validate input
if (size > 0 && size <= 100) {
container.innerHTML = "";
createGrid(size);
} else {
alert("Please enter a number between 1 and 100");
}
});
Bonus Challenges 🏆
Level Up Your Project!
🌈 Random Colors
const randomColor = () => {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgb(${r}, ${g}, ${b})`;
};