【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));

输出
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/501803.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

跨境电商IP防关联是什么?有什么作用?

做跨境电商的朋友应该都知道IP防关联这个词,那么为何IP需要防关联呢?今天为大家来解答这个问题。 跨境电商IP防关联是指在跨境电商运营中,通过采取一系列技术手段,确保每个跨境电商账号使用独立的IP地址,以避免账号之间因为IP地址…

博鳌观察|对话百度沈抖:丰富的应用场景是中国AI赶超的最大机会

既要仰望星空,更要脚踏实地。在被巨大的技术风口裹挟了一年多后,我们与大模型的“相处方式”越来越清晰了。 3月28日,在博鳌亚洲论坛2024年年会现场,我们与百度集团执行副总裁、百度智能云事业群总裁沈抖进行了一次深度交流。 在…

智慧公厕厂家如何选择?光明源智能科技打造一流智慧公厕项目

在当今城市化进程中,智慧公厕已经成为提升城市品质、改善市民生活的重要一环。然而,要打造一流的智慧公厕项目,选择合适的厂家显得尤为重要。作为行业领军者,光明源智能科技在智慧公厕领域具有丰富的经验和卓越的技术实力。今天&a…

大数据学习-2024/3/29-oracle使用介绍

在plsql中登录ORACLE数据。 默认用户: 1、sys: 角色:数据库超级管理员账户。 权限:具有最高的权限,可以执行任何操作,包括操作数据字典和控制文件。可以创建和删除数据库对象,授予和回收其他用户…

计算机系统基础 5 物理地址的形成

历史 早期,程序员自己管理主存,通过分解程序并覆盖主存的方式执行程序 取指令和存储操作数所有的地址都是物理地址; 执行速度快,无需进行地址转换; 未采用虚拟存储机制。 1961年有人提出自动执行overlay…

Openfeign

Openfeign 相关扩展 在 2020 以前的 SpringCloud 采用 Ribbon 作为负载均衡,但是 2020 年之后,SpringCloud 吧 Ribbon 移除了,而是使用自己编写的 LoadBalancer 替代. 因此,如果在没有加入 LoadBalancer 依赖的情况下&#xff0c…

linux离线安装maven

一、下载maven 地址:Maven – Download Apache Maven 使用root权限用户登录服务器 cd /opt sudo mkdir maven cd maven 二、上传maven 使用Xftp工具 三、解压并配置环境变量 tar -zxvf tar -zxvf apache-maven-3.9.6-bin.tar.gz cd apache-maven-3.9.6/ 看到解压…

AI智能视频剪辑解决方案,便捷的视频制作体验

在数字化时代,视频内容已成为企业宣传、产品展示、品牌塑造不可或缺的重要载体。然而,传统视频剪辑方式往往耗时耗力,效率低下,无法满足企业快速响应市场变化的需求。美摄科技凭借领先的AI技术,推出了一款全新的AI智能…

游戏本笔记本更换@添加内存条实操示例@DDR5内存条

文章目录 添加内存条的意义准备工具设备拔出电源适配器并关机👺样机 内存条上的金手指安装过程Notes 安装后开机初次开机速度屏幕显示分辨率和闪烁问题检查安装后的效果 添加内存条的意义 参考双通道内存DDR5多通道内存-CSDN博客 准备工具 准备一个质量差不多的螺…

我国伺服系统市场规模逐渐扩大 未来有望实现完全国产替代

我国伺服系统市场规模逐渐扩大 未来有望实现完全国产替代 伺服系统又称为随动系统,是用于精确地跟随或复现某个过程的反馈控制系统。伺服系统主要包括驱动器、指令机构和电机等,可根据控制指令,对功率进行放大、变换与调控等处理,…

在 Linux 中通过 SSH 执行远程命令时,无法自动加载环境变量(已解决)

问题场景 目前我的环境变量都存储在 /etc/profile 文件中,当我通过远程 SSH 执行一些命令时,提示命令找不到,如下所示: 问题出现原因 这里找到了一张出自尚硅谷的图片,很好的解释了该问题: 这是由于 Linu…

Java集成E签宝实现签署

完整代码:java-boot-highpin-background: 背调服务 (gitee.com) 【暂不开源】 1.在application.yml中配置appid、密钥信息,包含沙箱环境javaesign:host: https://smlopenapi.esign.cnappId: your appIdappSecret: your secret 2.实现电子签的主要流程在…

智慧水利中数据可视化的关键作用

在当今这个数据驱动的时代,数据可视化已成为转化复杂数据集为易于理解的视觉格式的关键技术,它在智慧水利领域的应用尤为显著。智慧水利利用现代信息技术,整合水资源管理的各个方面,旨在提高水资源的使用效率和管理效能。数据可视…

leetcode-链表算法题

leetcode-链表算法题 237.删除链表中的节点 题目地址 有一个单链表的 head,我们想删除它其中的一个节点 node。 给你一个需要删除的节点 node 。你将 无法访问 第一个节点 head。 链表的所有值都是 唯一的,并且保证给定的节点 node 不是链表中的最后一个…

elementui el-input输入框类型为textarea时,将输入的数据保存换行和空格,并展示换行和空格

el-input输入框类型为textarea时,如果不做数据处理,是不会保存换行和空格的说输入了换行,但是保存数据后不会进行换行,需要保存输入的换行。 1、效果图 输入状态: 显示时: 2、实现代码 2.1、html部分&am…

目标检测评价标准

主要借鉴:https://github.com/rafaelpadilla/Object-Detection-Metrics?tabreadme-ov-file 主要评价指标、术语: Intersection Over Union (IOU):两个检测框交集面积与并集面积的比值 True Positive (TP):IOU大于阈值的检测框…

SpringBoot 登录认证(二)

SpringBoot 登录认证(一)-CSDN博客 SpringBoot 登录认证(二)-CSDN博客 SpringBoot登录校验(三)-CSDN博客 HTTP是无状态协议 HTTP协议是无状态协议。什么又是无状态的协议? 所谓无状态&…

Spring Cloud GateWay——网关的基本使用

1. 为什么所有的请求先到网关呢? 有了网关就可以对请求进行路由,路由到具体的微服务,减少外界对接微服务的成本,比如:400电话,路由的试可以根据请求路径进行路由、根据host地址进行路由等, 当微…

Js逆向简单分析-某网站登录案例

文章目录 概要整体流程1.打开网站,输入数据进行登录2.对getlogin.php进行查看分析3.对于登录请求连接进行断点调试4.堆栈跟踪5.在网络上找在线md5加密 友情推荐 概要 某网站登录流量包逆向分析。 整体流程 1.打开网站,输入数据进行登录 用户名&#…

API接口自动化测试框架搭建之需求整理、详细设计和框架设计!

​ 简介: API接口自动化测试框架搭建之需求整理、详细设计和框架设计 1 需求整理 1.1 实现目的 API接口自动化测试,主要针对http接口协议;便于回归测试;线上或线下巡检测试,结合持续集成,及时发现运行环…