DOM Traversal Lab

In this lab, you will be working with the Document Object Model (DOM) traversal methods to navigate and manipulate HTML elements. You will perform operations like finding parent, child and sibling elements, and filtering elements based on some conditions.

Concepts

• Parent, child, and sibling elements
• DOM Traversal Methods:
  • parentNode
  • nextSibling
  • previousSibling
  • firstChild
  • lastChild

Challenges

1. Select an element with id parent and find its first child.
2. Select an element with id child and find its parent node.
3. Find the next sibling of an element with id firstSibling.
4. Find the previous sibling of an element with id lastSibling.
5. Use the Array.from method to convert NodeList of class items to an array, and filter out the elements with the class name active.