Lesson 5: DOM Manipulation

What You'll Learn Today

Today, you'll gain the superpower to change any part of your webpage using JavaScript. We'll explore the Document Object Model (DOM), which is a map of your HTML page that JavaScript can read and modify.

What is the DOM?

The browser turns your HTML code into a tree-like structure called the DOM. Each HTML tag becomes a "node" or "element" in this tree. JavaScript can access this tree to find, change, add, or delete elements, making your pages fully dynamic and interactive.

Learning Objectives

Understand the DOM structure and how it represents your HTML.
Select and modify HTML elements using their ID.
Change content and styling dynamically in response to user actions.

Core DOM Methods

JavaScript gives us special functions (called methods) to interact with the DOM. Here are the key ones for today's lesson:

document.getElementById('id') Select an Element

This is the most common way to grab a specific element from your page. You give it the ID of the element you want, and it returns that element as a JavaScript object.

element.innerHTML Change Content

Once you have an element, you can use its innerHTML property to read or change the HTML content inside it.

element.className Change CSS Class

This property lets you change the CSS classes applied to an element, allowing you to dynamically change its appearance using pre-defined Bootstrap styles.

document.createElement('div') Create a New Element

You can create brand new HTML elements from scratch in JavaScript. This is incredibly powerful for building dynamic lists or adding content to the page.

container.appendChild(element) Add Element to Page

After creating an element, you need to add it to the page. You first select a container element and then use appendChild to place your new element inside it.

Your Mission: Code DOM Manipulation

In the editor on the right, you'll find three empty JavaScript functions. Your job is to fill in the missing code step by step. Each function controls what happens when you click the buttons. Test your code by clicking "Run Code" and then trying the buttons!

Pro Tip

Follow the pattern: 1. Select the element with document.getElementById(). 2. Modify its properties like innerHTML or className. Don't forget the semicolons!

Step 1: Complete the `changeContent()` function
Find the empty changeContent() function in the editor. Fill in the missing code:
• Write: const element = document.getElementById('dynamicContent');
• Write: element.innerHTML = '<strong>Content changed with JavaScript!</strong>';
• Write: element.className = 'alert alert-success';
Step 2: Complete the `addElement()` function
Fill in the missing code in the addElement() function:
• Write: const container = document.getElementById('newElements');
• Write: const newDiv = document.createElement('div');
• Write: newDiv.className = 'alert alert-warning mt-2';
• Write: newDiv.innerHTML = '<strong>New element added!</strong>';
• Write: container.appendChild(newDiv);
Step 3: Complete the `resetDemo()` function
Fill in the missing code to reset everything back to the original state:
• Write: const element = document.getElementById('dynamicContent');
• Write: element.innerHTML = 'Original content here';
• Write: element.className = 'alert alert-info';
• Write: document.getElementById('newElements').innerHTML = '';

Take It Home

Practice your new DOM manipulation skills by adding more buttons and functions. Can you make a button that changes the color of the heading? Or a button that adds an image to the page? In the next lesson, we'll use these skills to work with lists of data using arrays and loops.