In this lab, we will focus on JavaScript DOM manipulation, allowing students to practice selecting and modifying elements within a web page using JavaScript. You will start with a base HTML and CSS file that provides structure and style. Using JavaScript, you will interact with and apply changes to elements within this base HTML, demonstrating how to dynamically manipulate the DOM and create visually engaging web pages.
- Element Selection Methods: Use
getElementById,getElementsByClassName,getElementsByTagName,querySelector, andquerySelectorAllto target and manipulate HTML elements. - Styling with JavaScript: Apply CSS styles dynamically through JavaScript, enhancing interactivity.
- Sequential and Timed Changes: Use timers to stagger changes to elements, creating animated effects.
- Learn to select and style elements on a web page dynamically.
- Manipulate element properties using various DOM selection methods.
- Apply delays and animations to create engaging, interactive page elements.
Your project should be structured as follows:
Interacting-with-the-DOM/
├── index.html
├── styles.css
└── index.js
- Begin by forking and then cloning the starter repository from GitHub to your local development environment. Do not clone the supplied repository directly; make sure to fork it first to have your own copy. This repository provides the base HTML and CSS files you’ll use to build out the JavaScript functionality.
Click here for starter code to fork
- Inside your cloned project folder, create a new blank file named
index.js. This is where you will write all your JavaScript code for interacting with the DOM.
The index.js file is already linked in the HTML file provided at the bottom of the <body> tag, so any JavaScript you write will automatically run when the HTML file is loaded:
<script src="index.js"></script>-
Open a terminal in VS Code, navigate to your project directory and use
npx serveto start a local server and view yourindex.htmlfile in the browser. -
Run the following command within the projects directory:
npx serve
In this step, we’ll use JavaScript to change the color of the main title by targeting it solely through its unique id attribute. The getElementById method allows us to select elements by their id and directly modify their properties. Here, we’ll use it to access the <h1> element with id="main-title" and change its style.color to a new color.
- Add the following code to
index.js:
// Using getElementById to style the main title
const mainTitle = document.getElementById("main-title");
mainTitle.style.color = "#ff6b6b";- Refresh the browser to apply the changes.
document.getElementById("main-title"): This line selects the element with theidof "main-title" from the HTML document.getElementByIdis used specifically for selecting elements by their uniqueid.- Storing the Element in
mainTitle: The selected element is assigned to a constant variable calledmainTitle, allowing us to reference this element for styling or other changes. - Changing the Color with
style.color: Thestyle.colorproperty ofmainTitleis set to#ff6b6b, which immediately applies a new color to the title text, making it visually stand out.
In this step, we will select and style the tagline element on the page. The code below changes the color and font style of the tagline using querySelector.
- Add the following JavaScript code to your
index.jsfile:
// Using querySelector to style the tagline
const tagline = document.querySelector(".tagline");
tagline.style.color = "yellow";
tagline.style.fontStyle = "italic";After applying this JavaScript code, your browser should display the tagline text in yellow and italicized, adding visual emphasis to the tagline.
-
const tagline = document.querySelector(".tagline");: Here, we're usingquerySelectorto select the first element with the class"tagline".- Why
.tagline? SincequerySelectorrequires a CSS selector, we need to include the.prefix when selecting by class. This is different from methods likegetElementsByClassName, which only need the class name directly. - The
.in.taglinetellsquerySelectorthat we’re selecting by class rather than an ID (which would use#) or another attribute.
- Why
-
Styling the Element:
tagline.style.color = "yellow";changes the text color of the tagline to yellow.tagline.style.fontStyle = "italic";applies italic styling to the tagline text.
Using querySelector this way is efficient when you know there’s only one element with this class, as it selects only the first matching element found in the DOM.
In this step, we will loop through each item with the language class and apply a green color with bold styling. We’ll also add a timed delay to each item, creating a gradual highlighting effect.
- Add the following JavaScript code to your
index.jsfile:
// Using getElementsByClassName to style each language item
const languages = document.getElementsByClassName("language");
Array.from(languages).forEach((language, index) => {
setTimeout(() => {
language.style.color = "darkgreen";
language.style.fontWeight = "bold";
}, 500 * index); // Gradually highlights each language
});After applying this JavaScript code, each item in the language list will gradually change to a dark green color and bold font style, creating a sequential highlighting effect, as shown below:
Explanation:
- Selecting Elements by Class: This code selects all elements with the class
.languageusinggetElementsByClassName, which returns an HTMLCollection of elements. - Converting HTMLCollection to Array:
Array.fromconverts the HTMLCollection into an array, allowing us to use anarray loopwith theforEachmethod to iterate through each element. - Applying Styles: Inside the loop, each
languageitem’scoloris set todarkgreenandfontWeighttobold, making each item visually distinct and emphasizing the text. - Sequential Styling with
setTimeout: ThesetTimeoutfunction applies a delay to each item based on itsindexin the array. The delay is calculated as500 * index, where each successive item’s styling is delayed by 500 milliseconds more than the previous one:- For the first item (
index = 0), the delay is500 * 0 = 0ms, so it changes immediately. - For the second item (
index = 1), the delay is500 * 1 = 500ms. - For the third item (
index = 2), the delay is500 * 2 = 1000ms, and so on.
- For the first item (
This gradually applies the style changes to each item, creating a staggered animation effect where each language item is highlighted in sequence.
In this step, we’ll select all <h2> elements, which serve as section titles, and apply a new color and underline styling. We’ll also add a delay to each title, creating a sequential effect.
- Add the following JavaScript code to your
index.jsfile:
// Using getElementsByTagName to underline all section titles
const sectionTitles = document.getElementsByTagName("h2");
Array.from(sectionTitles).forEach((title, index) => {
setTimeout(() => {
title.style.color = "#0056b3";
title.style.textDecoration = "underline";
}, 700 * index);
});After applying this JavaScript code, each section title will gradually change to a blue color and become underlined in sequence, creating a staggered highlighting effect, as shown below:
Explanation:
- This code uses
getElementsByTagNameto select all<h2>elements on the page, which are the section titles. The method returns an HTMLCollection containing each<h2>element. Array.fromis applied to convert the HTMLCollection into an array, which enables us to use anarray loopwithforEachto iterate over each title.- Inside the loop, each title’s
coloris set to#0056b3(a shade of blue), andtextDecorationis set tounderline, making the titles visually distinct and easier to read. - Once again, a
setTimeoutis used with a delay that increases by 700 milliseconds perindex, creating a sequential effect where each title is underlined one after the other.
In this step, we’ll use querySelector to select a single element by its ID and apply styling changes without any delay.
- Add the following JavaScript code to your
index.jsfile:
// Using querySelector to select and modify a single element with ID
const reasons = document.querySelector("#reasons");
reasons.style.backgroundColor = "#f0f8ff";
reasons.style.padding = "10px";After applying this JavaScript code, the reasons section should immediately display with a light blue background and additional padding, providing a highlighted look, as shown below:
Explanation:
document.querySelector("#reasons"): This line selects the first element on the page with the IDreasons. InquerySelector, we use the#symbol to specify an ID selector, similar to how it’s used in CSS. The#indicates that we’re selecting an element by its unique ID rather than a class or tag.- Storing the Element in
reasons: The selected element is assigned to thereasonsconstant, allowing us to apply styling directly to this specific section. - Changing the Background Color with
style.backgroundColor: Thestyle.backgroundColorproperty is set to#f0f8ff, which applies a soft, light blue background color to make the section visually distinct. - Adding Padding with
style.padding: Thestyle.paddingproperty adds10pxof space around the content inside thereasonssection, providing more breathing room and improving readability.
In this step, we’ll use querySelectorAll to select all elements with the class skill and apply styling changes to each one. A delay is added so that each skill item is styled sequentially.
- Add the following JavaScript code to your
index.jsfile:
// Using querySelectorAll to style each skill element
const skills = document.querySelectorAll(".skill");
skills.forEach((skill, index) => {
setTimeout(() => {
skill.style.backgroundColor = "#e0e4e8";
skill.style.padding = "5px";
skill.style.borderRadius = "4px";
}, 300);
});After applying this JavaScript code, each skill item should appear with a light gray background, padding, and rounded corners, applied sequentially for a staggered effect, as shown below:
Explanation:
document.querySelectorAll(".skill"): This line selects all elements with the classskillusingquerySelectorAll. The.prefix specifies that we are targeting a class, similar to CSS selectors.- Using
forEachwithquerySelectorAll: ThequerySelectorAllmethod returns a NodeList, which allows us to loop through each element using theforEachmethod. - Sequential Styling with
setTimeout: ThesetTimeoutfunction is used with a delay that increases based on theindexof each element. This creates a staggered effect, where each skill item is styled one after the other with a 300-millisecond delay between each. - Applying Styles: The code sets each skill item’s background color to
#e0e4e8(light gray), adds5pxof padding for spacing, and rounds the corners with aborderRadiusof4px. This styling gives each item a distinct, styled appearance.
In this example, we’ll select all elements with the class "language" and change each item's color and font size. This time, we’ll skip using setTimeout for a gradual effect; while not essential, setTimeout was previously included as a learning tool to practice timed styling.
Here, we’ll also use the modulo operator % 2 to alternate colors by identifying even and odd items, assigning different colors accordingly. This approach gives each item its own style without delay, making the code simpler and emphasizing the use of class-based selection and conditional styling.
// Applying alternating colors and font size to language items
const items = document.getElementsByClassName("language");
Array.from(items).forEach((item, index) => {
item.style.color = index % 2 === 0 ? "purple" : "teal";
item.style.fontSize = "1.1em";
});After applying this JavaScript code, each skill item should display sequentially with a light gray background, padding, and rounded corners, providing a visually appealing layout, as shown below:
Explanation:
document.getElementsByClassName("language"): This line selects all elements with the classlanguage, returning an HTMLCollection that includes all matching elements.Array.from(items): The HTMLCollection is converted to an array usingArray.from, enabling us to useforEachto loop through each item.- No
setTimeoutfor Immediate Styling: Unlike previous steps, we’re not usingsetTimeouthere, so each item’s style is applied instantly, without any delay or gradual effect. - Alternating Colors with
%(Modulus): Theindex % 2 === 0expression checks whether each item’s index is even or odd:- If
index % 2 === 0(even index), the item’s color is set to "purple". - If
index % 2 !== 0(odd index), the item’s color is set to "teal".
- If
- Changing Font Size: Each
languageitem’s font size is set to1.1em, making it slightly larger and enhancing readability.
This approach applies distinct styling to each item in a consistent, immediate way without delays.
Now that you've completed your code changes, let's commit them and push to your GitHub repository.
- Open a terminal in VS Code and make sure you’re in your project directory.
- Run the following commands to add, commit, and push your changes:
git add .
git commit -m "Completed DOM manipulation lab"
git push origin mainIn this lab, we explored various DOM manipulation techniques using JavaScript, covering element selection methods like getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll. Each method allowed us to dynamically modify elements by targeting them through IDs, classes, and tags, creating an interactive and visually engaging web experience.
The use of setTimeout was an optional approach in several steps. It allowed us to practice delayed and sequential styling to give the page a gradual, animated effect. However, applying styles immediately without setTimeout can simplify the code. Here’s an example of both approaches:
- With
setTimeoutfor a gradual effect:
const skills = document.querySelectorAll(".skill");
skills.forEach((skill, index) => {
setTimeout(() => {
skill.style.backgroundColor = "#e0e4e8";
skill.style.padding = "5px";
skill.style.borderRadius = "4px";
}, 300 * index); // Adds delay for a staggered effect
});- Without setTimeout for immediate styling:
const skills = document.querySelectorAll(".skill");
skills.forEach((skill) => {
skill.style.backgroundColor = "#e0e4e8";
skill.style.padding = "5px";
skill.style.borderRadius = "4px";
});- DOM Selection Mastery: Knowing how to use
getElementById,getElementsByClassName,getElementsByTagName,querySelector, andquerySelectorAllgives you flexibility in selecting and styling elements based on unique IDs, classes, or tags. - Immediate vs. Delayed Styling:
setTimeoutcan add a staggered or animated effect, but is optional for most styling changes. Immediate styling is more straightforward and is often the better choice for basic visual adjustments. - Dynamic Styling: By directly manipulating the
styleproperties of elements, you can create interactive, visually dynamic pages that respond instantly to user interaction or page load.
This lab provided a hands-on foundation in DOM manipulation that will be essential for building more complex, interactive web applications.
🛑 Only use this as a reference 🛑
💾 Not something to copy and paste 💾
Note: This lab references a solution file located here (link not shown).
© All rights reserved to ThriveDX