Mastering DOM Traversal in JavaScript Free PDF Guide

by

Basic DOM Traversing in JavaScript

DOM traversal is a fundamental concept in JavaScript for web development. It involves navigating and manipulating the Document Object Model (DOM), which represents the structured hierarchy of elements in an HTML document. This summary covers basic DOM traversal techniques and includes a set of coding exercises.

  1. Selecting Elements by ID: You can select an element by its unique ID using the getElementById method. This allows you to access and manipulate the properties of that element.
  2. Selecting Elements by Tag Name: To select all elements with a specific tag name, you can use the getElementsByTagName method. This is useful when you want to work with multiple elements of the same type.
  3. Selecting Elements by Class Name: If you want to select elements by their CSS class, you can use the getElementsByClassName method. This is helpful for targeting elements with a specific class for styling or interaction.
  4. Traversing Parent, Child, and Sibling Elements: JavaScript provides various properties like parentNode, childNodes, nextSibling, and previousSibling to traverse the DOM tree. These properties allow you to move between related elements in the hierarchy.

The provided coding exercises offer hands-on practice for these concepts, reinforcing your understanding of DOM traversal in JavaScript. These exercises cover tasks such as selecting elements, adding and removing classes, manipulating the DOM tree, creating and appending elements, and handling events.

Mastering DOM traversal is crucial for building interactive web applications and is a fundamental skill for web developers. Practice these techniques to become proficient in working with the DOM and creating dynamic web experiences.

One of the fundamental aspects of working with JavaScript in web development is manipulating the Document Object Model (DOM). The DOM represents the structured representation of an HTML document, and JavaScript allows you to access and manipulate it. DOM traversal is a technique that lets you move through the elements and their relationships within the DOM tree. In this guide, we’ll explore basic DOM traversing techniques with coding examples.

1. Selecting Elements by ID

You can select an element by its unique ID using the getElementById method. Here’s an example:

<!DOCTYPE html>

<html>

<head>

    <title>DOM Traversal Example</title>

</head>

<body>

    <div id=”myDiv”>This is a div element with ID ‘myDiv'</div>

    <script>

        // Select the element by its ID

        const myElement = document.getElementById(“myDiv”);

        console.log(myElement.textContent); // Output: This is a div element with ID ‘myDiv’

    </script>

</body>

</html>

2. Selecting Elements by Tag Name

You can select all elements with a specific tag name using getElementsByTagName. Here’s an example:

<!DOCTYPE html>

<html>

<head>

    <title>DOM Traversal Example</title>

</head>

<body>

    <ul>

        <li>Item 1</li>

        <li>Item 2</li>

        <li>Item 3</li>

    </ul>

    <script>

        // Select all <li> elements

        const listItems = document.getElementsByTagName(“li”);

        for (let i = 0; i < listItems.length; i++) {

            console.log(listItems[i].textContent);

        }

        // Output: Item 1, Item 2, Item 3

    </script>

</body>

</html>

3. Selecting Elements by Class Name

You can select elements by their CSS class using getElementsByClassName. Here’s an example:

<!DOCTYPE html>

<html>

<head>

    <title>DOM Traversal Example</title>

    <style>

        .highlight {

            background-color: yellow;

        }

    </style>

</head>

<body>

    <p class=”highlight”>This paragraph is highlighted.</p>

    <p>This paragraph is not highlighted.</p>

    <script>

        // Select elements with the class “highlight”

        const highlightedElements = document.getElementsByClassName(“highlight”);

        for (let i = 0; i < highlightedElements.length; i++) {

            highlightedElements[i].style.color = “red”; // Change text color

        }

    </script>

</body>

</html>

4. Traversing Parent, Child, and Sibling Elements

You can traverse the DOM tree using properties like parentNode, childNodes, firstChild, lastChild, nextSibling, and previousSibling. Here’s an example:

<!DOCTYPE html>

<html>

<head>

    <title>DOM Traversal Example</title>

</head>

<body>

    <ul>

        <li>Item 1</li>

        <li>Item 2</li>

        <li>Item 3</li>

    </ul>

    <script>

        const ulElement = document.querySelector(“ul”);

        const firstListItem = ulElement.firstChild; // Gets the first <li> element

        const nextListItem = firstListItem.nextSibling; // Gets the next <li> element

        console.log(firstListItem.textContent); // Output: Item 1

        console.log(nextListItem.textContent); // Output: Item 2

    </script>

</body>

</html>

These are some basic DOM traversing techniques in JavaScript. Understanding how to select and manipulate elements in the DOM is essential for building interactive web applications. Experiment with these examples to solidify your understanding, and you’ll be on your way to becoming proficient in DOM traversal with JavaScript.

10 exercises DOM traversal in JavaScript

Each exercise includes a description, code example, step-by-step instructions, and the coding solution:

Exercise 1: Select an Element by ID

Description: Select an element by its ID and change its background color to red.

Code Example:

<!DOCTYPE html>

<html>

<head>

    <title>Exercise 1</title>

</head>

<body>

    <div id=”myDiv”>Click me!</div>

    <script>

        // Your code here

    </script>

</body>

</html>

Instructions:

  1. Select the element with ID ‘myDiv’.
  2. Change its background color to red.

Solution:

const myDiv = document.getElementById(“myDiv”);

myDiv.style.backgroundColor = “red”;

Exercise 2: Select All Paragraphs

Description: Select all paragraphs on the page and change their text color to blue.

Code Example:

<!DOCTYPE html>

<html>

<head>

    <title>Exercise 2</title>

</head>

<body>

    <p>Paragraph 1</p>

    <p>Paragraph 2</p>

    <p>Paragraph 3</p>

    <script>

        // Your code here

    </script>

</body>

</html>

Instructions:

  1. Select all paragraphs.
  2. Change their text color to blue.

Solution:

const paragraphs = document.querySelectorAll(“p”);

paragraphs.forEach(paragraph => {

    paragraph.style.color = “blue”;

});

Exercise 3: Add a Class

Description: Add a class ‘highlight’ to all list items inside an unordered list.

Code Example:

<!DOCTYPE html>

<html>

<head>

    <title>Exercise 3</title>

</head>

<body>

    <ul>

        <li>Item 1</li>

        <li>Item 2</li>

        <li>Item 3</li>

    </ul>

    <script>

        // Your code here

    </script>

</body>

</html>

Instructions:

  1. Select all list items.
  2. Add the class ‘highlight’ to each list item.

Solution:

const listItems = document.querySelectorAll(“li”);

listItems.forEach(item => {

    item.classList.add(“highlight”);

});

Exercise 4: Remove a Class

Description: Remove the class ‘active’ from a specific element with the ID ‘targetElement’.

Code Example:

<!DOCTYPE html>

<html>

<head>

    <title>Exercise 4</title>

</head>

<body>

    <div id=”targetElement” class=”active”>This is the target element</div>

    <script>

        // Your code here

    </script>

</body>

</html>

Instructions:

  1. Select the element with ID ‘targetElement’.
  2. Remove the class ‘active’ from it.

Solution:

const targetElement = document.getElementById(“targetElement”);

targetElement.classList.remove(“active”);

Exercise 5: Traverse Parent and Child Elements

Description: Find and log the parent and child elements of a specific element.

Code Example:

<!DOCTYPE html>

<html>

<head>

    <title>Exercise 5</title>

</head>

<body>

    <ul>

        <li>Item 1</li>

        <li>Item 2</li>

    </ul>

    <script>

        // Your code here

    </script>

</body>

</html>

Instructions:

  1. Select one of the list items.
  2. Log its parent element (the <ul>).
  3. Log its child elements (the text node and any other elements inside it).

Solution:

const listItem = document.querySelector(“li”);

const parentElement = listItem.parentElement;

const childElements = listItem.childNodes;

console.log(“Parent Element:”, parentElement);

console.log(“Child Elements:”, childElements);

Exercise 6: Find Siblings

Description: Find and log the previous and next siblings of a specific element.

Code Example:

<!DOCTYPE html>

<html>

<head>

    <title>Exercise 6</title>

</head>

<body>

    <ul>

        <li>Item 1</li>

        <li>Item 2</li>

        <li>Item 3</li>

    </ul>

    <script>

        // Your code here

    </script>

</body>

</html>

Instructions:

  1. Select one of the list items.
  2. Log its previous sibling (if any).
  3. Log its next sibling (if any).

Solution:

const listItem = document.querySelector(“li”);

const previousSibling = listItem.previousSibling;

const nextSibling = listItem.nextSibling;

console.log(“Previous Sibling:”, previousSibling);

console.log(“Next Sibling:”, nextSibling);

Exercise 7: Create and Append Element

Description: Create a new <div> element, set its text content, and append it to a parent element.

Code Example:

<!DOCTYPE html>

<html>

<head>

    <title>Exercise 7</title>

</head>

<body>

    <div id=”parentDiv”>This is the parent div</div>

    <script>

        // Your code here

    </script>

</body>

</html>

Instructions:

  1. Create a new <div> element.
  2. Set its text content to “This is the new div.”
  3. Append it to the element with ID ‘parentDiv’.

Solution:

const parentDiv = document.getElementById(“parentDiv”);

const newDiv = document.createElement(“div”);

newDiv.textContent = “This is the new div.”;

parentDiv.appendChild(newDiv);

Exercise 8: Remove an Element

Description: Remove a specific element from the DOM.

Code Example:

<!DOCTYPE html>

<html>

<head>

    <title>Exercise 8</title>

</head>

<body>

    <div id=”toBeRemoved”>This element will be removed</div>

    <script>

        // Your code here

    </script>

</body>

</html>

Instructions:

  1. Select the element with ID ‘toBeRemoved’.
  2. Remove it from the DOM.

Solution:

const toBeRemoved = document.getElementById(“toBeRemoved”);

toBeRemoved.remove();

Exercise 9: Replace an Element

Description: Replace a specific element with a new element.

Code Example:

<!DOCTYPE html>

<html>

<head>

    <title>Exercise 9</title>

</head>

<body>

    <div id=”original”>This is the original element</div>

    <script>

        // Your code here

    </script>

</body>

</html>

Instructions:

  1. Select the element with ID ‘original’.
  2. Create a new <p> element with the text “This is the replacement element.”
  3. Replace the original element with the new <p> element.

Solution:

const original = document.getElementById(“original”);

const newElement = document.createElement(“p”);

newElement.textContent = “This is the replacement element.”;

original.parentNode.replaceChild(newElement, original);

Exercise 10: Event Handling

Description: Add a click event listener to a button that hides a specific element when clicked.

Code Example:

<!DOCTYPE html>

<html>

<head>

    <title>Exercise 10</title>

</head>

<body>

    <button id=”hideButton”>Hide Element</button>

    <div id=”elementToHide”>This element will be hidden</div>

    <script>

        // Your code here

    </script>

</body>

</html>

Instructions:

  1. Select the button with ID ‘hideButton’.
  2. Select the element with ID ‘elementToHide’.
  3. Add a click event listener to the button that hides the element when clicked.

Solution:

const hideButton = document.getElementById(“hideButton”);

const elementToHide = document.getElementById(“elementToHide”);

hideButton.addEventListener(“click”, () => {

    elementToHide.style.display = “none”;

});

These exercises cover a range of DOM traversal techniques and common tasks in JavaScript. Practice them to strengthen your understanding of working with the Document Object Model.

10 quiz questions DOM traversal in JavaScript:

Quiz Question 1:

How can you select an element by its unique ID in JavaScript?

Answer 1:

You can select an element by its unique ID using the getElementById method.

Quiz Question 2:

What property is used to change the background color of an element in JavaScript?

Answer 2:

You can change the background color of an element using the style.backgroundColor property.

Quiz Question 3:

How do you select all elements with a specific tag name in JavaScript?

Answer 3:

You can select all elements with a specific tag name using the getElementsByTagName method.

Quiz Question 4:

What method allows you to add a CSS class to an element in JavaScript?

Answer 4:

You can add a CSS class to an element using the classList.add() method.

Quiz Question 5:

How can you remove a CSS class from an element in JavaScript?

Answer 5:

You can remove a CSS class from an element using the classList.remove() method.

Quiz Question 6:

Which property is used to access the parent element of an element in the DOM?

Answer 6:

You can access the parent element of an element using the parentNode property.

Quiz Question 7:

What property is used to access the child elements of an element in the DOM?

Answer 7:

You can access the child elements of an element using the childNodes property.

Quiz Question 8:

How do you find the next sibling element of a specific element in the DOM?

Answer 8:

You can find the next sibling element using the nextSibling property.

Quiz Question 9:

What method is used to create a new HTML element in JavaScript?

Answer 9:

You can create a new HTML element using the createElement() method.

Quiz Question 10:

How do you add an event listener to an HTML element in JavaScript?

Answer 10:

You can add an event listener to an HTML element using the addEventListener() method.

10 multiple-choice DOM traversal in JavaScript:

Multiple Choice Question 1:

How can you select an HTML element by its ID in JavaScript?

A) getElementByTag

B) querySelector

C) getElementById

D) selectElement

Multiple Choice Question 2:

Which property allows you to change the background color of an HTML element?

A) element.style.color

B) element.background

C) element.style.backgroundColor

D) element.bgColor

Multiple Choice Question 3:

How do you select all elements with a specific tag name in JavaScript?

A) getElementsByClassName

B) selectElements

C) querySelectorAll

D) getElementsByTagName

Multiple Choice Question 4:

Which method is used to add a CSS class to an HTML element in JavaScript?

A) element.classList.remove()

B) element.addClass()

C) element.classList.add()

D) element.style.add()

Multiple Choice Question 5:

How do you remove a CSS class from an HTML element in JavaScript?

A) element.removeClass()

B) element.style.remove()

C) element.classList.remove()

D) element.removeClassName()

Multiple Choice Question 6:

Which property is used to access the parent element of an HTML element in the DOM?

A) element.parentElement

B) element.parent

C) element.parentNode

D) element.parentElem

Multiple Choice Question 7:

What property is used to access the child elements of an HTML element in the DOM?

A) element.children

B) element.childNodes

C) element.childNodes

D) element.childElements

Multiple Choice Question 8:

How can you find the next sibling element of an HTML element in the DOM?

A) element.getNextSibling()

B) element.nextSiblingElement

C) element.nextNode()

D) element.nextSibling

Multiple Choice Question 9:

Which method is used to create a new HTML element in JavaScript?

A) createNode()

B) createElement()

C) newElement()

D) addNode()

Multiple Choice Question 10:

How do you add an event listener to an HTML element in JavaScript?

A) element.addListener()

B) element.addEvent()

C) element.addEventListener()

D) element.onEvent()

Answers:

C) getElementById

C) element.style.backgroundColor

D) getElementsByTagName

C) element.classList.add()

C) element.classList.remove()

C) element.parentNode

B) element.childNodes

D) element.nextSibling

B) createElement()

C) element.addEventListener()

DOM-TraversingDownload