JavaScript DOM Practice Questions with Solutions

By /

Introductions

The Document Object Model (DOM) allows JavaScript to interact with HTML elements on a web page. With the DOM, you can change text, styles, attributes, classes, and even create or remove elements. In this chapter, you will practice the most important DOM concepts with simple examples, starting from selecting elements and gradually moving toward dynamic webpage manipulation. JavaScript DOM Practice questions with solutions help to understand the concepts.

Question 1: Select an HTML Element Using getElementById()

Problem

Select an HTML heading using its id and change its text using JavaScript.

Solution

<h1 id="heading">Old Heading</h1>

<script>
    const heading = document.getElementById("heading");

    heading.textContent = "Welcome to JavaScript";
</script>

Output

Welcome to JavaScript

Step-by-step Explanation

  1. The <h1> element has an id called heading.
  2. document.getElementById("heading") finds that element.
  3. The selected element is stored in heading.
  4. textContent changes the text.
  5. The heading now displays "Welcome to JavaScript".

Question 2: Change Text Using textContent

Problem

Create a paragraph and use JavaScript to change its text.

Solution

<p id="message">This is the old message.</p>

<script>
    const message = document.getElementById("message");

    message.textContent = "This is the new message.";
</script>

Output

This is the new message.

Step-by-step Explanation

  1. The paragraph has the ID message.
  2. JavaScript selects the paragraph.
  3. textContent accesses the text inside the element.
  4. Assigning a new value replaces the old text.

Question 3: Change HTML Using innerHTML

Problem

Create a <div> and use JavaScript to insert a heading and paragraph inside it.

Solution

<div id="box"></div>

<script>
    const box = document.getElementById("box");

    box.innerHTML = `
        <h2>Hello JavaScript</h2>
        <p>Learning DOM is easy.</p>
    `;
</script>

Output

Hello JavaScript
Learning DOM is easy.

Step-by-step Explanation

  1. The <div> starts empty.
  2. JavaScript selects the <div>.
  3. innerHTML allows you to insert HTML.
  4. A heading and paragraph are added inside the <div>.
  5. The browser renders the new HTML.

Question 4: Change CSS Using JavaScript

Problem

Create a paragraph and use JavaScript to change its text color and font size.

Solution

<p id="text">JavaScript can change styles.</p>

<script>
    const text = document.getElementById("text");

    text.style.color = "blue";
    text.style.fontSize = "24px";
</script>

Output

The paragraph appears blue with a font size of 24px.

Step-by-step Explanation

  1. JavaScript selects the paragraph using its ID.
  2. style.color changes the text color.
  3. style.fontSize changes the font size.
  4. JavaScript can directly modify an element’s inline styles.

Question 5: Select Multiple Elements Using querySelectorAll()

Problem

Create three paragraphs with the same class and change the text color of all three paragraphs using querySelectorAll().

Solution

<p class="message">First paragraph</p>
<p class="message">Second paragraph</p>
<p class="message">Third paragraph</p>

<script>
    const messages = document.querySelectorAll(".message");

    messages.forEach(function(message) {
        message.style.color = "green";
    });
</script>

Output

All three paragraphs appear in green.

Step-by-step Explanation

  1. All three paragraphs have the class message.
  2. querySelectorAll(".message") selects all matching elements.
  3. The result is a collection of elements.
  4. forEach() goes through each paragraph.
  5. The text color of every paragraph is changed.

Question 6: Change an Element’s Attribute

Problem

Create an image and use JavaScript to change its src and alt attributes.

Solution

<img id="profileImage" src="old-image.jpg" alt="Old Image">

<script>
    const image = document.getElementById("profileImage");

    image.src = "new-image.jpg";
    image.alt = "New Profile Image";
</script>

Output

The image source and alternative text are changed.

Step-by-step Explanation

  1. The image has the ID profileImage.
  2. JavaScript selects the image.
  3. image.src changes the image source.
  4. image.alt changes the alternative text.
  5. The browser uses the new attribute values.

You can also use:

image.setAttribute("src", "new-image.jpg");

Question 7: Add and Remove a CSS Class

Problem

Create a paragraph with a CSS class. Use JavaScript to add another class and then remove it.

Solution

<style>
    .highlight {
        background-color: yellow;
    }

    .large {
        font-size: 25px;
    }
</style>

<p id="message" class="highlight">JavaScript DOM Practice</p>

<script>
    const message = document.getElementById("message");

    message.classList.add("large");

    message.classList.remove("highlight");
</script>

Output

The paragraph becomes larger and the yellow background is removed.

Step-by-step Explanation

  1. The paragraph initially has the highlight class.
  2. classList.add("large") adds the large class.
  3. The font size increases.
  4. classList.remove("highlight") removes the yellow background.
  5. classList is useful for dynamically managing CSS classes.

Question 8: Create a New DOM Element

Problem

Create a new <li> element using JavaScript and add it to an existing list.

Solution

<ul id="skills">
    <li>HTML</li>
    <li>CSS</li>
</ul>

<script>
    const skills = document.getElementById("skills");

    const newSkill = document.createElement("li");

    newSkill.textContent = "JavaScript";

    skills.appendChild(newSkill);
</script>

Output

HTML
CSS
JavaScript

Step-by-step Explanation

  1. JavaScript selects the <ul>.
  2. document.createElement("li") creates a new list item.
  3. textContent adds "JavaScript" to the new element.
  4. appendChild() adds the new <li> to the list.
  5. The new item appears at the end of the list.

Question 9: Remove a DOM Element

Problem

Create a list with three items and use JavaScript to remove the second item.

Solution

<ul id="courses">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<script>
    const courses = document.getElementById("courses");

    const secondCourse = courses.children[1];

    secondCourse.remove();
</script>

Output

HTML
JavaScript

Step-by-step Explanation

  1. The <ul> contains three list items.
  2. children[1] selects the second item because indexing starts from 0.
  3. The selected item is stored in secondCourse.
  4. remove() removes that element from the page.
  5. The CSS item is removed from the list.

Question 10: Create a Button That Changes Page Content

Problem

Create a button and a paragraph. When the button is clicked, change the paragraph text.

Solution

<p id="message">Click the button.</p>

<button id="changeButton">Change Message</button>

<script>
    const button = document.getElementById("changeButton");
    const message = document.getElementById("message");

    button.addEventListener("click", function() {
        message.textContent = "You clicked the button!";
    });
</script>

Output

Before clicking:

Click the button.
[Change Message]

After clicking:

You clicked the button!
[Change Message]

Step-by-step Explanation

  1. JavaScript selects the button.
  2. JavaScript also selects the paragraph.
  3. addEventListener() listens for a click event.
  4. When the button is clicked, the callback function runs.
  5. textContent changes the paragraph.
  6. The webpage updates without reloading.

Key Takeaways

  • The DOM represents an HTML document as objects that JavaScript can access and modify.
  • getElementById() selects an element by its ID.
  • querySelector() selects the first matching element.
  • querySelectorAll() selects all matching elements.
  • textContent changes an element’s text.
  • innerHTML can add or replace HTML content.
  • JavaScript can change CSS using the style property.
  • classList.add() adds a CSS class.
  • classList.remove() removes a CSS class.
  • createElement() creates a new DOM element.
  • appendChild() adds an element to the DOM.
  • remove() removes an element.
  • addEventListener() allows JavaScript to respond to user actions.

FAQs

1. What is the DOM in JavaScript?

DOM stands for Document Object Model. It represents the HTML page as objects that JavaScript can access and modify.

For example:

const heading = document.getElementById("heading");

JavaScript can then change that heading.

2. What is getElementById() used for?

getElementById() selects an HTML element using its unique id.

const heading = document.getElementById("heading");

3. What is the difference between textContent and innerHTML?

textContent changes or reads text.

element.textContent = "Hello";

innerHTML can insert HTML.

element.innerHTML = "<strong>Hello</strong>";

4. What is querySelector()?

querySelector() returns the first element that matches a CSS selector.

const heading = document.querySelector("h1");

You can also select a class:

const box = document.querySelector(".box");

5. What is querySelectorAll()?

querySelectorAll() selects all elements matching a CSS selector.

const paragraphs = document.querySelectorAll("p");

It is useful when you want to work with multiple elements.

6. How can JavaScript change CSS?

JavaScript can modify an element’s inline styles.

const heading = document.querySelector("h1");

heading.style.color = "red";
heading.style.fontSize = "30px";

7. How can JavaScript create a new HTML element?

Use document.createElement().

const paragraph = document.createElement("p");

paragraph.textContent = "New paragraph";

document.body.appendChild(paragraph);

This creates a new paragraph and adds it to the page.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top