专栏首页BFE.dev前端刷题日记BFE.dev前端刷题 104. 按层遍历DOM树
原创

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
}

通过撒花

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • BFE.dev前端刷题#108. 用队列(Queue)实现栈(Stack)

    如果我们要pop4的话,因为这是一个队列,我们只能把1 dequeue掉。所以为了要得到4,我们必须要把其余的1,2,3给dequeue掉。dequeue掉的元...

    JSer
  • BFE.dev前端刷题#55. HTML字符串中高亮关键字

    OK,现在有了上述函数,问题变得比较简单。我们只需要对于每一个index,循环调用上述函数得到最终连续区间即可。

    JSer
  • BFE.dev前端刷题 33. 实现Promise.allSettled()

    和Promise.all()不同,Promise.allSettled()即使是遇到rejection也会等待所有的promise到最后。所以我们只需要用一个a...

    JSer
  • 用 Javascript 和 Node.js 爬取网页

    本文主要针对具有一定 JavaScript 经验的程序员。如果你对 Web 抓取有深刻的了解,但对 JavaScript 并不熟悉,那么本文仍然能够对你有所帮助...

    疯狂的技术宅
  • 乱晒登机牌很可能导致你的账户信息被盗用

    假期里的每一天都是宝贵的,如果你打算坐飞机去哪儿旅游的话,你很可能会在机场先晒一波登机牌,但是当你准备把它晒到社交平台(例如Facebook、Instagram...

    FB客服
  • Linux免密登录

    Coxhuang
  • [codewars_python]Sum

    In this kata, you must create a digital root function.

    py3study
  • 禁止套娃!Redis官网宕机,返回“连接不上Redis”

    Redis 作者 Antirez 很快修复了问题,并解释了宕机的原因。原来是因为他最近在运行 redis.io 的实例上安装了 Try Redis(用于在线体验...

    IT大咖说
  • CSS样式优先级

    当样式表比较复杂时,很容易出现多个样式对作用于一个标签的情况,这时就需要注意CSS优先级来决定哪些样式会被作用于该标签,哪些会被覆盖。

    WindrunnerMax
  • 天不生Kubernetes,运维万古如长夜|生产级K8s高可用集群实战一

    ----Kubernetes解决了诸多运维难题,是目前主流的基础架构平台,也是容器编排领域的事实标准,可谓“天不生Kubernetes,运维万古如长夜”。如此流...

    CNCF

扫码关注云+社区

领取腾讯云代金券