Solution

You'll run a queue-based breadth-first search: dequeue a node, record it, enqueue its element children, and repeat until the queue is empty.

The problem, in plain English

Breadth-first means "visit everything one level away before anything two levels away." The data structure that produces that order is a queue (first-in, first-out): you seed it with the root, then repeatedly take the node at the front, visit it, and add its children to the back. Because children go to the back, they're only visited after everything already in the queue — i.e. after the rest of their level's predecessors — which is exactly level-by-level order. Swap the queue for a stack (add/remove at the same end) and you'd get depth-first instead.

The mental model

Picture a line at a ticket counter. The root joins the line first. You serve (visit) whoever's at the front, and as you serve each node you send its children to the end of the line. Since a node's children always join behind everyone currently waiting, an entire level is served before the next level starts. The traversal ends when the line empties.

A first attempt

The tempting version uses a stack (or recursion), which gives depth-first:

function traverseDomBfsNaive(root) {
  const result = [];
  const stack = [root];
  while (stack.length) {
    const node = stack.pop();          // LIFO -> depth-first
    result.push(node);
    for (const child of node.children) stack.push(child);
  }
  return result;
}

pop() takes from the end, so the last child pushed is visited next — you dive down a branch before its siblings. That's depth-first, not BFS, and it also reverses sibling order. To get breadth-first you must remove from the front (shift) while adding to the back (push) — a FIFO queue.

The working solution

function traverseDomBfs(root) {
  if (!root) return [];

  const result = [];
  const queue = [root];

  while (queue.length > 0) {
    const node = queue.shift();          // take from the FRONT
    result.push(node);
    for (const child of node.children) { // element children only
      queue.push(child);                 // add to the BACK
    }
  }

  return result;
}

module.exports = { traverseDomBfs };

Seed the queue with the root and loop until it's empty. Each iteration shifts the front node (FIFO), records it, and pushes its element children to the back. node.children is elements only, so text/comment nodes never enter the queue. Because children always land behind the current contents, a whole level is dequeued before the next level's nodes — producing root, level 1, level 2, …. Every element is enqueued and dequeued once, so it's O(n).

Walking through one call

<div id=a><div id=b><div id=d/></div><div id=c><div id=e/></div></div>:

• queue [a] — dequeue a, record [a], enqueue its children → queue [b, c].
• queue [b, c] — dequeue b, record [a, b], enqueue b's child → queue [c, d].
• queue [c, d] — dequeue c, record [a, b, c], enqueue c's child → queue [d, e].
• queue [d, e] — dequeue d (leaf) → [a, b, c, d]; dequeue e (leaf) → [a, b, c, d, e].
• queue empty — done. Result [a, b, c, d, e] — level 0 (a), level 1 (b, c), level 2 (d, e).

A depth-first walk would have produced a, b, d, c, e instead.

Gotchas

• Using a stack / pop — gives depth-first, and reverses siblings. Use a queue: shift from the front, push to the back.
• childNodes instead of children — enqueues text/comment nodes. Use children for elements.
• Array.shift cost — shift is O(n) on a JS array; for huge trees a real queue (two-pointer or a linked list) keeps it O(1) per op. Fine at DOM scale.
• Forgetting the null guard — null.children throws; return [] for a missing root.

Going further

• Group by level — pushing a level's node count (or a sentinel) lets you return an array-of-arrays, one sub-array per depth — useful for "render tier by tier".
• Nearest match — BFS naturally finds the closest element matching a predicate (shortest edge distance from the root), unlike DFS.
• Shadow DOM / iframes — a thorough walker also descends into shadowRoot and same-origin iframe documents, which children alone won't cross.