Accessing and Modifying the DOM | JavaScript Tutorials

Learning Goals

At the end of this Tutorial, you will be able to:

Select a specific element on the page using document.getElementById().
Modify the text inside an element using .innerText.
Modify the HTML inside an element using .innerHTML.
Change the visual appearance of an element using the .style property.
Add and remove CSS classes using .classList.

Setting up your workfiles

For this Tutorial, you will work with a file that already has some HTML content.

In your javascript/exercises folder, create a new HTML file named workfile-6.html and copy the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accessing the DOM</title>
    <style>
        body { font-family: sans-serif; margin: 40px; line-height: 1.6; }
        .highlight-box { 
            background-color: #e0f7fa; 
            border: 2px solid #00acc1; 
            padding: 20px; 
            border-radius: 8px; 
            color: #006064;
        }
    </style>
    <script defer src="script-6.js"></script>
</head>
<body>

    <h1 id="mainHeading">Old Heading Text</h1>

    <p id="introPara">This is the original paragraph text.</p>

    <div id="infoBox">
        I am a plain div.
    </div>

</body>
</html>

Create a new empty text file named script-6.js and save it in this same folder.

Accessing HTML elements by their ID

The simplest way for JavaScript to find a specific element on your page is by looking for its unique id.

You use the document.getElementById() method to do this.

Copy the code below into your script-6.js file.

// 1. Select the element by its ID
const myHeading = document.getElementById("mainHeading");

// 2. Check the console to see what we grabbed
console.log(myHeading);

Save the file and open workfile-6.html in your web browser. Open the Console (F12) and you will see that JavaScript has successfully "grabbed" the entire <h1> element.

Note: The ID inside the parentheses must match the HTML ID exactly (it is case-sensitive).

Modifying element content

Once you have accessed an element, you can change what is inside it.

Using `.innerText`

If you want to replace the text inside an element, use the .innerText property.

// Select the paragraph
const myPara = document.getElementById("introPara");

// Change the text content
myPara.innerText = "JavaScript has updated this text!";

Using `.innerHTML`

If you want to include HTML tags (like bold or italics) inside the new content, you must use .innerHTML.

// Select the div
const myBox = document.getElementById("infoBox");

// Change the content AND the HTML structure
myBox.innerHTML = "<p>I now contain a <b>bold</b> word.</p>";

Refresh your browser to see the changes.

Modifying element styles

You can change the visual appearance of any element using JavaScript's .style property.

Note that CSS properties with dashes (like background-color) must be written in camelCase in JavaScript (like backgroundColor).

// Access the main heading again
// (We already created the 'myHeading' variable earlier)

myHeading.style.color = "red";
myHeading.style.backgroundColor = "yellow";
myHeading.style.padding = "20px";
myHeading.style.borderRadius = "10px";

This method adds an inline style to the HTML element, overriding any styles set in your CSS file.

Adding and removing CSS classes

Changing styles one by one using .style can get messy. A cleaner way is to add or remove a pre-defined CSS class.

In the HTML setup code, we included a CSS class named .highlight-box inside the <style> block. Let's apply that class to our div.

// Select the div
const box = document.getElementById("infoBox");

// Add a CSS class
box.classList.add("highlight-box");

When you refresh the page, the div should turn light blue with a border.

You can also remove a class just as easily:

// Remove a CSS class
// box.classList.remove("highlight-box");

Try it yourself

In your workfile...

---

In the HTML file, add a new <h2> with an ID of "sub-heading".
Use JavaScript to change its text to "Updated via JS" and change its color to blue.

---

In the HTML file, add an image tag with an ID of "main-image".
Use JavaScript to change its src attribute to a valid image URL.

More learning resources

Tutorial Quiz

Take the test

Tutorial Podcast

Sample AI prompts


        What is the difference between document.getElementById() and document.querySelector()? Show me examples of how to select an element by ID using both methods.