算法二:DOM - 将DOM节点元素转换成JSON字符串

news2024/10/5 23:30:21

题目:
将DOM节点元素转换成JSON的格式
例如

<div class="root">
     <div class="child1"><p></p></div>
    <span></span>
     <div><div><p></p></div></div>
    <p></p>
</div>

转换显示成(简写,大致表达个意思):
{"tagName":"DIV", className="root", childs:[{"tagName":"DIV", className="root",childs:[]}]}

乍一看上去并不是很难,递归,找出各个节点的child节点即可,可真正当场写出代码还是需要锻炼锻炼,反正我当时没写出来,课后补习:
试一试:http://jsrun.net/VPaKp/edit
HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=">
    <meta http-equiv="X-UA-Compatible" content="">
    <title></title>
</head>
<body>
    <div class="root">
        <div class="child1"><p></p></div>
        <span class="span1"><span></span></span>
        <div><div><p class="p1"></p></div></div>
        <p><span></span></p>
    </div>
</body>
</html>

JS File:

function convertToJson() {
    const root = document.getElementsByClassName('root')[0];
    const output = new Object();
    output.tagName = root.tagName;
    output.className = root.className;
    output.childs = getChilds(root);

    console.log(JSON.stringify(output));
}

function getChilds(node) {
    const childs = node.children;
    const result = new Array();
    if(!childs || childs.length === 0) return result;
    for (const child of childs) {
        const childOutput = new Object();
        childOutput.tagName = child.tagName;
        childOutput.className = child.className;
        childOutput.childs = getChilds(child);
        result.push(childOutput);
    }
    return result;
}
convertToJson();

运行结果:
{"tagName":"DIV","className":"root","childs":[{"tagName":"DIV","className":"child1","childs":[{"tagName":"P","className":"","childs":[]}]},{"tagName":"SPAN","className":"span1","childs":[{"tagName":"SPAN","className":"","childs":[]}]},{"tagName":"DIV","className":"","childs":[{"tagName":"DIV","className":"","childs":[{"tagName":"P","className":"p1","childs":[]}]}]},{"tagName":"P","className":"","childs":[{"tagName":"SPAN","className":"","childs":[]}]}]}

随便找了一个格式化的网站把json字符串格式化显示下:

0a16af9ed4a87fdb6e199cb5c7678df6.png

在对比下HTML文件目录:

<div class="root">
        <div class="child1"><p></p></div>
        <span class="span1"><span></span></span>
        <div><div><p class="p1"></p></div></div>
        <p><span></span></p>
    </div>

就是这么回事。目前就是想到这个方法了,至于是不是最优就不得而知啦~

 

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

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

相关文章

XY_RE复现(六)

馒头 考数据结构的好像 有一个建树的函数 __int64 __fastcall initHuffmanTree(void **a1) {__int64 v1; // rcx__int64 v2; // rdxchar v4; // [rsp27h] [rbp-9h]int j; // [rsp28h] [rbp-8h]int i; // [rsp2Ch] [rbp-4h]*a1 malloc(0x3C0ui64);for ( i 1; i < 47; i )…

OpenGL 入门(一)—— OpenGL 基础

1、OpenGL 基础知识 1.1 OpenGL 简介 OpenGL&#xff08;Open Graphics Library&#xff09;是图形领域的工业标准&#xff0c;是一套跨编程语言、跨平台、专业的图形编程&#xff08;软件&#xff09;接口。它用于二维、三维图像&#xff0c;是一个功能强大&#xff0c;调用…

一个C++小程序调试过程记录

Top 20 C Projects With Source Code [2024 Update]https://www.interviewbit.com/blog/cpp-projects/ 这个网页有一些简单的C程序的源码&#xff0c;闲来无事&#xff0c;把第一个程序&#xff08;Bookshop Management System Using C&#xff09;的源码下载了下来。 源文件…

在 Vue.js 2.x 中使用 WebSocket 与 Spring Boot 2.7 实现通信

前言&#xff1a;近期在研究远程遥控空调&#xff0c;需要通过接口记录前端的一些动作&#xff0c;那么前端需要实现主动通知接口&#xff0c;并接收来自接口的通知。 一、方案 通过在Vue.js 2.x 中使用 WebSocket 与 Spring Boot 2.7 实现通信&#xff0c;使用 STOMP&#xf…

【openLooKeng集成Hive连接器完整过程】

【openLooKeng集成Hive连接器完整过程】 一、摘要二、正文2.1 环境说明2.2 Hadoop安装2.2.1. 准备工作2.2.2 在协调节点coordinator上进行安装hadoop2.2.3、将Hadoop安装目录分发到从节点worker2.2.4、在协调节点coordinator上启动hadoop集群2.3 MySQL安装2.4 Hive安装及基本操…

LabVIEW智能变电站监控系统设计与实现

LabVIEW智能变电站监控系统设计与实现 随着电力系统和智能化技术的快速发展&#xff0c;建立一个高效、可靠的变电站监控系统显得尤为重要。通过分析变电站监控系统的需求&#xff0c;设计了一个基于LabVIEW软件的监控平台。该平台利用虚拟仪器技术、传感器技术和无线传输技术…

从C到Py:Python的异常处理

本篇文章中我们将简单讲解一下有关Python中的异常处理&#xff0c;既有在代码中有显式表达的异常处理语法&#xff0c;还包括Pycharm手动调试的简单操作。 目录 Python异常处理 1、try-except结构 ​编辑 2、try-except-else结构 raise抛出异常 常见异常类型 Pycharm程序…

神经网络中常见的激活函数:理解与实践

神经网络中常见的激活函数&#xff1a;理解与实践 在神经网络中&#xff0c;激活函数是一个非常重要的组成部分&#xff0c;它为神经元引入了非线性特性&#xff0c;使得神经网络可以拟合各种复杂的函数关系。本文将介绍9种常见的激活函数&#xff0c;包括它们的概述、公式以及…

安卓中级控件(图形、选择按钮、文本输入、对话框)

图形定制 图形Drawable Android把所有能够显示的图形都抽象为Drawable类&#xff08;可绘制的&#xff09;。这里的图形不止是图片&#xff0c;还包括色块、画板、背景等。 包含图片在内的图形文件放在res目录的各个drawable目录下&#xff0c;其中drawable目录一般保存描述性…

相机知识的补充

一&#xff1a;镜头 1.1MP的概念 相机中MP的意思是指百万像素。MP是mega pixel的缩写。mega意为一百万&#xff0c;mega pixel 指意为100万像素。“像素”是相机感光器件上的感光最小单位。就像是光学相机的感光胶片的银粒一样&#xff0c;记忆在数码相机的“胶片”&#xff…

windows 驱动开发-DMA技术(二)

前面描述了DMA技术中适配器相关的部分以及DMA的分类&#xff0c;接下来看一下系统具体在支持两种DMA时候的操作的细微差别。 此处解释一下Scatter/Gather&#xff0c;这个也翻译为散点/收集&#xff0c;是指指示设备能够读取或写入内存中的任何区域&#xff0c;而不仅仅是特定…

YOLO系列改进,自研模块助力涨点

目录 一、原理 二、代码 三、添加到YOLOv5中 一、原理 论文地址:

LiveCD镜像文件的定制化

最近想要定制化一款属于自己的LiveCD镜像文件&#xff0c;并且里边封装好所需要的软件程序&#xff0c;本文将会记录具体的操作步骤&#xff0c;供有需要的人参考借鉴。 环境说明&#xff1a; 环境配置说明配置参数编码环境Centos7.9LiveCD文件CentOS-7-livecd-x86_64.iso 附…

袁庭新ES系列18节|Spring Data Elasticsearch高级

前言 这一章节袁老师将带领同学们来学习Spring Data Elasticsearch高级操作相关的内容。我们继续来探索SDE是如何将原始操作Elasticsearch的客户端API进行封装的&#xff0c;以及通过Spring Data Elasticsearch如何来操作ES。准备好了吗&#xff1f;我们继续来探索ES的内容。 …

探索AI工具的巅峰:个人体验与深度剖析

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

【Go语言快速上手(六)】管道, 网络编程,反射,用法讲解

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Go语言专栏⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Go语言知识   &#x1f51d;&#x1f51d; GO快速上手 1. 前言2. 初识管道3. 管…

自定义SpringBoot的starter

案例需求&#xff1a;自定义redis-stater。要求当导入redis坐标时&#xff0c;SpringBoot自动创建Jedis的Bean。 实现步骤&#xff1a; 1、创建redis-spring-boot-autoconfigure模块 2、创建redis-spring-boot-starter模块&#xff0c;依赖redis-spring-boot-autoconfigure的…

Codeforces Round 938 (Div. 3)H-The Most Reckless Defense

来源 题目 You are playing a very popular Tower Defense game called "Runnerfield 2". In this game, the player sets up defensive towers that attack enemies moving from a certain starting point to the players base. You are given a grid of size nm&a…

Delta lake with Java--利用spark sql操作数据2

上一篇文章尝试了建库&#xff0c;建表&#xff0c;插入数据&#xff0c;还差删除和更新&#xff0c;所以在这篇文章补充一下&#xff0c;代码很简单&#xff0c;具体如下&#xff1a; import org.apache.spark.sql.SaveMode; import org.apache.spark.sql.SparkSession;publi…

DRF中的请求入口分析及request对象分析

DRF中的请求入口分析及request对象分析 django restframework框架是在django的基础上又给我们提供了很多方便的功能&#xff0c;让我们可以更便捷基于django开发restful API 1 drf项目 pip install django pip install djangorestframework1.1 核心配置 INSTALLED_APPS [d…