118. Traverse DOM Level by Level

Implement a function traverseDOMLevelByLevel that traverses DOM elements level by level using breadth-first search (BFS).

Given a root DOM element, traverse all its descendants level by level and return an array of element tag names in the order they are visited.

Requirements

1. Basic Functionality

• Start from the root element
• Visit all elements level by level (breadth-first)
• Return array of tag names in traversal order
• Handle empty trees (no children)

2. Key Behaviors

• Level 0: root element
• Level 1: all direct children
• Level 2: all children of level 1 elements
• Continue until all elements are visited
• Return tag names as uppercase strings

Example Usage

// HTML structure:
// <div id="root">
//   <span>1</span>
//   <p>
//     <span>2</span>
//   </p>
// </div>

const root = document.getElementById('root');
const result = traverseDOMLevelByLevel(root);
// Returns: ['DIV', 'SPAN', 'P', 'SPAN']

Real-World Context

This problem models real DOM traversal scenarios:

• DOM manipulation: Process elements in hierarchical order
• Tree rendering: Render components level by level
• Event delegation: Handle events at different tree levels
• DOM analysis: Analyze page structure systematically