【JavaScript算法】DOM树层级显示

news2024/11/25 20:22:06

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

上述表达式的输出结果为
['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.coloradmin.cn/o/1554555.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【系统架构师】-第15章-面向服务架构设计

面向服务的体系结构 (Service-Oriented Architecture,SOA) 1、应用角度:它着眼于日常的业务应用,并将它们划分为单独的业务功能和流程,即所谓的服务 2、软件基本原理:一个组件模型,它将应用程序的不同功能单元(称为服…

Python数据分析必备工具——Pandas模块及其应用

Python数据分析必备工具——Pandas模块及其应用 外部数据的读取文本文件的读取语法示例 电子表格的读取语法示例 数据库数据的读取与操作语法 数据操作数据概述语法 数据筛选语法 数据清洗数据类型语法示例 沉余数据语法示例 异常值的识别与处理缺失值的识别与处理语法示例 数据…

PHP图床程序优化版:图片外链服务、图床API服务、图片CDN加速与破解防盗链

图片免费上传 支持本地储存、FTP储存、第三方云储存(阿里云 OSS、腾讯云 COS、七牛云等)。 图片外链加速 一键转换第三方网站的图片外链地址为图床可分享的图片地址(支持CDN)。 图片解析服务 直接将第三方外链图片地址显示为…

BSV区块链的应用开发前景——通过标准化来促进创新

​​发表时间:2024年3月5日 近年来区块链领域的发展日新月异,各种全新的技术和方法论正在迅猛涌现。在这个瞬息万变的环境之中,标准化不仅仅会为开发者们带来便利,同时也促进了应用之间的互操作性,并且推动着生态系统的…

【机器学习300问】56、什么是自编码器?

一、什么是自编码器? 自编码器(Autoencoder,AE)本质是一种特殊的神经网络架构。主要用于无监督学习和特征学习任务。它的目标是通过编码然后解码的过程,学会重构其输入数据,试图还原其原始输入的。 当时我学…

【探索Linux】—— 强大的命令行工具 P.31(守护进程)

阅读导航 引言一、守护进程简介1. 概念2. 特点 二、用C创建守护进程⭕代码✅主要步骤 温馨提示 引言 当谈到计算机系统中运行的特殊进程时,守护进程(daemon)无疑是一个备受关注的话题。作为在后台默默运行并提供各种服务的进程,守…

FreeRTOS从代码层面进行原理分析(4 移植)

FreeRTOS从代码层面进行原理分析(4 移植) 从前 3 篇博客中我们已经搞清楚了最开始对 FreeRTOS 有疑问的前 2 个问题。 1. FreeRTOS 是如何建立任务的呢? 2. FreeRTOS 是调度和切换任务的呢? 3. FreeRTOS 是如何保证实时性呢? 以下就是前三…

LeetCode:300最长递增子序列 C语言

300. 最长递增子序列 给你一个整数数组 nums ,找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列,删除(或不删除)数组中的元素而不改变其余元素的顺序。例如,[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子…

大话设计模式之迪米特法则

迪米特法则,也称为最少知识原则(Law of Demeter),是面向对象设计中的一个重要原则,其核心思想是降低耦合度、减少对象之间的依赖关系,从而使系统更加灵活、易于维护和扩展。 根据迪米特法则,一…

Multisim14.0破解安装教程

Multisim14.0中文破解版是一款相当优秀的专业化SPICE仿真标准环境,Multisim14.0中文版功能强悍,为用户提供了所见即所得的设计环境、互动式的仿真界面、动态显示元件、具有3D效果的仿真电路、虚拟仪表、分析功能与图形显示窗口等等。Multisim破解版操作简…

Linux-1.常见指令以及权限理解

目录 本节目标 使用 XShell 远程登录 Linux 关于 Linux 桌面 下载安装 XShell 查看 Linux 主机 ip 使用 XShell 登陆主机 XShell 下的复制粘贴 Linux下基本指令 登录Linux服务器 新建多用户 全屏 1.快速认识5~6个命令 2.详细谈论课件的所有指令 01. ls 指令 02…

Linux 环境安装Nginx—源码和Dokcer两种安装方式

一、源代码编译安装Nginx 1.下载最新nginx源码 以nginx-1.25.3.tar.gz为例: 可以使用命令(联网):curl -O http://nginx.org/download/nginx-1.25.3.tar.gz或在官网下载.tar.gz 2.解压缩 tar -zxvf nginx-1.25.3.tar.gz cd nginx-1.25.3/ 3.安装依赖…

动态菜单设计

查询当前用户下的菜单权限 思路:根据用户id 左关联表 查询出对应的菜单选项 查询SQL select distinct-- 菜单表 去除重复记录sys_menu.id,sys_menu.parentId, sys_menu.name from -- 权限表sys_menu-- 角色与权限表 菜单表id 角色菜单表的菜单id left j…

数据分析之Power BI

POWER QUERY 获取清洗 POWER PIVOT建模分析 如何加载power pivot 文件-选项-加载项-com加载项-转到 POWER VIEW 可视呈现 如何加载power view 文件-选项-自定义功能区-不在功能区中的命令-新建组-power view-添加-确定 POWER MAP可视地图

Redis 6.0.8版本下载

简介:Java领域优质创作者楠木 分享Java项目、简历模板、学习资料、面试题库 想必大家在下载redis之前已经逛了很多教程了,可能不尽如意,找不到自己的想要的版本。既然刷到了我的这条博客,说明你是幸运的! Redis6.0.8的…

k8s1.28.8版本配置prometheus监控告警

文章目录 官方架构图组件的具体介绍kube-prometheus包含的组件简介:文件存储路径: 结构分析官网自带的一些规则自己总结流程 1-创建规则磁盘使用率报警规则 详解上面rule流程Alertmanagerg查看 2-报警接收器2.1-邮件报警修改Alertmanager配置查看现有的s…

【深耕 Python】Data Science with Python 数据科学(2)jupyter-lab和numpy数组

关于数据科学环境的建立,可以参考我的博客:【深耕 Python】Data Science with Python 数据科学(1)环境搭建 Jupyter代码片段1:简单数组的定义和排序 import numpy as np np.array([1, 2, 3]) a np.array([9, 6, 2, …

flume配置文件后不能跟注释!!

先总结:Flume配置文件后面,不能跟注释,可以单起一行写注释 报错代码: [ERROR - org.apache.flume.SinkRunner$PollingRunner.run(SinkRunner.java:158)] Unable to deliver event. Exception follows. org.apache.flume.EventDel…

AI的“换脸“魔术,究竟是弊大于利还是利大于弊?

公众号:【可乐前端】,每天3分钟学习一个优秀的开源项目,分享web面试与实战知识,也有全栈交流学习摸鱼群,期待您的关注! 每天3分钟开源 hi,这里是每天3分钟开源,很高兴又跟大家见面了&#xff0…

Rsyslog 日志集中管理实验

1.使用 进行日志集中管理 C/S 架构&#xff1a;客户端将其日志上传到服务器端&#xff0c;通过对服务器端日志的查询&#xff0c;来实现对其他客户端的日志进行集中管理 2.两台机器&#xff1a; &#xff08;server&#xff09;host-5(192.168.1.2)<------------>(192…