Introduction to the DOM | Lecture 34

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.

Table of Contents

🎯 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.html

Step 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!

Introduction to the DOM — A kid typing into a computer screen showing a tree labeled DOM growing from an HTML document with JavaScript reaching out to pluck and change leaves elements

💡 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