Let’s begin with Lecture 34 of the HTML5 & CSS3 series. Introduction to the DOM – Manipulating HTML with JavaScript. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand what the DOM (Document Object Model) is
- Be able to select , create , and modify HTML elements using JavaScript
- Know how to change content , attributes , and styles
- Build a dynamic webpage that updates in real time
- Make your website interactive by responding to user actions!
📚 What Is the DOM?
The DOM stands for Document Object Model .
Think of it like this:
If your website was a tree, then the DOM is its branches and leaves — it lets JavaScript reach into your HTML and change things live!
When a browser reads your HTML file, it builds a tree-like structure called the DOM.
JavaScript can access and change this structure — which means you can update your page without reloading it!
🔍 How to Select Elements in the DOM
Use these methods to grab HTML elements and store them in variables:
| METHOD | DESCRIPTION |
|---|---|
document.getElementById("id") | Get element by ID |
document.querySelector("selector") | Get first matching element |
document.querySelectorAll("selector") | Get all matching elements as a list |
document.getElementsByClassName("class") | Get elements by class name |
document.getElementsByTagName("tag") | Get elements by tag name |
Example:
let heading = document.getElementById("title");
let button = document.querySelector(".btn");
let paragraphs = document.querySelectorAll("p");✏️ How to Change Content
Once you select an element, you can change its content or attributes:
| ACTION | CODE |
|---|---|
| Change text | element.textContent = "New Text"; |
| Change HTML | element.innerHTML = "<b>New HTML</b>"; |
| Change attribute | element.setAttribute("src", "new-image.jpg"); |
| Get attribute | let src = element.getAttribute("src"); |
| Change style | element.style.color = "red"; |
💻 Try This: Build a Dynamic Message Changer
Let’s build a simple app where clicking a button changes the heading and background color.
Step 1: Create a New File
In your VS Code project folder (MyFirstWebsite), create a new file named:
dom-message-changer.htmlStep 2: Add This Code
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 40px;
transition: background-color 0.5s ease;
}
h1 {
transition: color 0.3s ease;
}
.btn {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1 id="mainHeading">Hello, World!</h1>
<button class="btn" onclick="changeMessage()">Change Message</button>
<script>
function changeMessage() {
// Select the heading
let heading = document.getElementById("mainHeading");
// Change text
heading.textContent = "You're learning DOM! 🎉";
// Change color
heading.style.color = "#e74c3c";
// Change background
document.body.style.backgroundColor = "#ecf0f1";
}
</script>
</body>
</html>Step 3: Run with Live Server
Right-click the code → Show All Commands → Launch Live Server
🎉 You’ve built a dynamic message changer — now clicking the button updates the heading and background instantly!
💡 Bonus: Add a New Paragraph Dynamically
Let’s make a button that adds a new paragraph when clicked.
Add HTML:
<h2>Add a New Message</h2>
<input type="text" id="newMessage" placeholder="Type something cool">
<button class="btn" onclick="addParagraph()">Add Message</button>
<div id="messageContainer"></div>Add JavaScript:
function addParagraph() {
let input = document.getElementById("newMessage");
let value = input.value;
if (value.trim() !== "") {
// Create a new paragraph element
let p = document.createElement("p");
p.textContent = value;
// Style it
p.style.marginTop = "10px";
p.style.fontSize = "16px";
// Add to the page
document.getElementById("messageContainer").appendChild(p);
// Clear input
input.value = "";
} else {
alert("Please enter a message!");
}
}Now users can type messages and see them appear on the page instantly!
💡 Bonus: Remove the Last Message
Let’s add a button to remove the last message.
Add HTML:
<button class="btn" onclick="removeLastMessage()">Remove Last Message</button>Add JavaScript:
function removeLastMessage() {
let container = document.getElementById("messageContainer");
let last = container.lastElementChild;
if (last) {
container.removeChild(last);
} else {
alert("No messages to remove!");
}
}Now users can undo their last message — perfect for cleaning up mistakes!
🧪 Try It Yourself!
- Create a color picker that changes the heading color based on user selection.
- Make a theme switcher that toggles between light and dark mode using JavaScript.
- Use
querySelectorAll()to change the background of all buttons at once. - Add a delete button next to each paragraph to remove only that one.
✅ Summary of What You Learned Today
| CONCEPT | CODE EXAMPLE |
|---|---|
| Select Element | document.getElementById("id"), document.querySelector(".class") |
| Change Text | element.textContent = "New Text"; |
| Change HTML | element.innerHTML = "<b>Bold Message</b>"; |
| Create Element | document.createElement("p") |
| Add to Page | parent.appendChild(element) |
| Remove Element | parent.removeChild(element) |
| Change Style | element.style.color = "blue"; |
🚀 Next Lecture Preview:
In Lecture 35 , we’ll dive deeper into DOM manipulation — learn how to work with classes, toggle themes, animate elements, and respond to keyboard events — making your site even more interactive and powerful!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share.
HTML5 and CSS3 Compleate Series
