BFE.dev前端刷题 104. 按层遍历DOM树

bfe.dev 是一个针对前端的刷题网站，像是前端的LeetCode。该系列文章是我在上面的刷题日记。

题目

BFE.dev#104 104. 按层遍历DOM树

分析

按层遍历，所以初始状态是

[div]

下一层

[p, p, div]

下一层

[button, a, p, div]

可以看到我们只需要不停的从左边取出元素，然后将其子元素从右边不停放入即可。这用queue实现。

来，放上代码吧。

其实现是BFS，并不苦难。并且我们只需要返回所有元素，并不需要考虑每一层的边界。

/**
 * @param { HTMLElement } root
 * @returns { HTMLElement[] }
 */
function flatten(root) {
  if (root === null) return []
  
  const queue = [root]
  
  const result = []
  
  while (queue.length > 0) {
    const head = queue.shift()
    result.push(head)
    queue.push(...head.children)
  }
  
  return result
}

通过撒花

感谢阅读，希望有所帮助。有兴趣可以自己试试。