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