当前位置: 首页 > news >正文

【JavaScript算法】DOM树层级显示

题目描述:
在这里插入图片描述

上述表达式的输出结果为
['DIV']
['P', 'SPAN', 'P', 'SPAN']
['SPAN', 'SPAN']

直接上代码

let tree = document.querySelector(".a");
function traverseElRoot(elRoot) {const result = [];function traverse(element, level) {if (!result[level]) {result[level] = [];}result[level].push(element.tagName);Array.from(element.children).forEach((child) => {traverse(child, level + 1);});}traverse(elRoot, 0);return result;
}
console.log(traverseElRoot(tree));

输出
在这里插入图片描述

http://www.lryc.cn/news/328322.html

相关文章:

  • MySql实战--全局锁和表锁 :给表加个字段怎么有这么多阻碍
  • axios请求类型是文件流怎么显示报错信息
  • DataX 源码改造支持Mysql 8.X
  • 大数据学习-2024/3/29-oracle使用介绍
  • Vim - 文本编辑器 Vi vs Vim
  • SpringBoot 登录认证(二)
  • C#语言规范及特殊用法笔记
  • Mysql数据库:日志管理、备份与恢复
  • kubernetes(K8S)学习(八):K8S之常见部署方案
  • 《AIGC重塑金融:AI大模型驱动的金融变革与实践》
  • 【详解】运算放大器工作原理及其在信号处理中的核心作用
  • 银河麒麟V10:sudo: /usr/bin/sudo 必须属于用户 ID 0(的用户)并且设置 setuid 位
  • Android 多层级列表实现
  • 柔数组的介绍
  • 跳槽多次未成功,问题源自何处?
  • Linux 操作系统 022-串口/U盘/共享文件夹
  • java题目9:100匹马驮100担货,大马一匹驮3担,中马一匹驮2担,小马两匹驮1担。计算大中小马的数目(HorsesPackGoods9)
  • 操作系统OS Chapter1
  • UE4_Mouse_Interaction——拖拽物体的实现
  • Tomcat配置https
  • Modelsim手动仿真实例
  • AXI-Stream——草稿版
  • 【编码器应用】第一节-编码器从从原理到应用详解
  • 瑞_23种设计模式_中介者模式
  • sqlite删除数据表
  • Spring Boot简介及案例
  • Learning To Count Everything
  • 大语言模型(LLM)token解读
  • 【Micro 2014】NoC Architectures for Silicon Interposer Systems
  • 《极客时间 - 左耳听风》01 | 程序员如何用技术变现?(上)【文章笔记 + 个人思考】