23Build a basic DOM traversal utility (DFS and BFS)

Implement two functions that walk the element tree under root (including root itself) and return the elements as an array:

• dfs(root): depth-first, pre-order. A parent comes before its children, and a whole subtree is finished before its next sibling.
• bfs(root): breadth-first. All elements at depth 1 come before any at depth 2, and so on, left to right.

// <section id="a">
//   <div id="b"><p id="d"></p><p id="e"></p></div>
//   <div id="c"><p id="f"></p></div>
// </section>
dfs(a).map((el) => el.id); // ["a", "b", "d", "e", "c", "f"]
bfs(a).map((el) => el.id); // ["a", "b", "c", "d", "e", "f"]

Requirements

• Visit elements only; skip text and comment nodes.
• Do not use recursion: both functions must work for a tree 20,000 levels deep.
• Do not use querySelectorAll or TreeWalker.