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

题目:
将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>

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

 

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

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

相关文章

Springboot+Vue+小程序+基于微信小程序护农远程看护系统

开发平台为idea&#xff0c;maven管理工具&#xff0c;Mybatis操作数据库&#xff0c;根据市场数字化需要为农户打造小程序可远程查看农场的种植情况。项目是调试&#xff0c;讲解服务均可有偿获取&#xff0c;需要可在最下方QQ二维码处联系我。 SpringbootVue小程序&#xff…

Pyspark+关联规则 Kaggle购物篮分析案例

数据集地址&#xff1a;Market Basket Analysis | Kaggle 我的NoteBook地址&#xff1a;pyspark Market Basket Analysis | Kaggle 零售商期望能够利用过去的零售数据在自己的行业中进行探索&#xff0c;并为客户提供有关商品集的建议&#xff0c;这样就能提高客户参与度、改…

用LM Studio搭建微软的PHI3小型语言模型

什么是 Microsoft Phi-3 小语言模型&#xff1f; 微软Phi-3 模型是目前功能最强大、最具成本效益的小型语言模型 &#xff08;SLM&#xff09;&#xff0c;在各种语言、推理、编码和数学基准测试中优于相同大小和更高大小的模型。此版本扩展了客户高质量模型的选择范围&#x…

常用SQL命令

应用经常需要处理用户的数据&#xff0c;并将用户的数据保存到指定位置&#xff0c;数据库是常用的数据存储工具&#xff0c;数据库是结构化信息或数据的有序集合&#xff0c;几乎所有的关系数据库都使用 SQL 编程语言来查询、操作和定义数据&#xff0c;进行数据访问控制&…

特斯拉自动驾驶你有了解么?

有以下几点你将在本文中的了解到&#xff1a;人工智能&#xff0c;FSD 一、人工智能是什么 首先脱颖而出的chatgpt&#xff0c;而GPT的底层原理是什么&#xff1f;接下来我用生活中的经验帮你理解 GPT 你问 GPT&#xff1a;蜜蜂是如何酿造蜂蜜的&#xff1f; GPT 会从问题中…

数字旅游以科技创新为核心:推动旅游服务的智能化、精准化、个性化,为游客提供更加贴心、专业、高效的旅游服务

目录 一、引言 二、数字旅游以科技创新推动旅游服务智能化 1、智能化技术的应用 2、提升旅游服务的效率和质量 三、数字旅游以科技创新推动旅游服务精准化 1、精准化需求的识别与满足 2、精准化营销与推广 四、数字旅游以科技创新推动旅游服务个性化 1、个性化服务的创…

11【PS Blender 作图】场景作图 景深

【问题背景】 看下图,是一个插画师的作图,是不是好像现实场景;合理利用景深,让画面好像是3D现实场景 那么如何才能完成这样让人身临其境的画面呢? 大体有两个方法: 【1】2D插画,合理利用景深;如用PS画图,在画图的时候注意 画面构图,让2D的画面,看起来像3D 缺点…

无公网环境的本地yum源配置

对没有公网环境的场景下&#xff0c;部署一个本地可用的yum源的方法 注&#xff1a;两种方法本质上一样&#xff0c;centos7和centos8的repo文件格式是不一样的&#xff0c;所以在两种方法中用了不用的ISO&#xff0c;需要根据实际需求&#xff0c;结合两种方法进行部署 1.配置…

特斯拉全自动驾驶系统Tesla‘s Full-Self Driving (FSD)

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Overview Tesla’s FSD is a suite of features that includes Autopilot, Navigate on Autopilot, Auto Lane Change, Autopark, Summon, and Traffic Light and Stop Sig…

基于语音识别的智能电子病历(一)

引子 A&#xff1a;“上周开年会了&#xff01;” 俺&#xff1a;“有啥新的动向&#xff1f;” A&#xff1a;“今年计划开发基于语音识别的智能电子病历。老板说这个算是国内首创&#xff01;” 俺&#xff1a;“嗯&#xff0c;俺做这个20多年了。” A&#xff1a;“语言…

38-3 Web应用防火墙 - 安装配置WAF

首先需要安装Centos 7 虚拟机:Centos7超详细安装教程_centos7安装教程-CSDN博客 安装配置WAF 在桌面环境中,右键点击打开终端,首先执行以下步骤: 1)安装必要的工具: 输入命令: sudo su yum install -y wget epel-release 2)第二步,安装依赖工具,输入以下命令: y…

云原生Kubernetes: K8S 1.29版本 部署Sonarqube

一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 主机架构版本IP备注masterK8S master节点1.29.0192.168.204.8 node1K8S node节点1.29.0192.168.204.9node2K8S node节点1.29.0192.168.204.10已部署Kuboard &#xff08;2&#xff09;master节点查看集群 1&…

用FPGA+DAC输出“心”形波

1.前言 之前在做信号处理的时候整了一下活&#xff0c;用FPGADAC&#xff08;数模转换器&#xff09;&#xff0c;输出了一个爱心形状的波形&#xff0c;今天整理资料的时候偶然发现了他&#xff0c;现在把他分享出来。当时将DAC的输出接在示波器上显示如下图所示&#xff1a; …

java中的运算

进制 十进制二进制Binary&#xff1a;0b、0B开头&#xff1b;八进制octal&#xff1a; 0开头十六进制&#xff1a; 0x或者0X开头&#xff1b; 二进制表达式 一个字节&#xff0c;最高位是符号位&#xff1a;0标识正数&#xff0c;1表示负数&#xff1b;计算机底层使用补码的…

香港Web3,步履蹒跚

4月30日&#xff0c;6支香港虚拟资产现货ETF在香港交易所敲钟上市&#xff0c;正式迎来市场首秀。 而在前一周&#xff0c;香港证监会&#xff08;SFC&#xff09;官网就已列出华夏基金(香港)、博时国际和嘉实国际三家基金公司的比特币和以太坊现货ETF&#xff0c;并陆续披露了…

Python-快速搭建一个管理平台

目录 &#x1f4dc; 准备工作 一、项目介绍 ✨ 二、制作数据库表 添加信息 ⚒️ 三、运行client.exe &#x1f680; 1、连接数据库&#xff0c;选择对应表&#xff0c;生成代码 2、把后端代码依次复制到项目中 3、把前端代码依次复制到前端项目中 4、添加路由 四、运行后端项目…

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

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

react完整项目搭建的思路

react完整项目搭建的思路 react完整项目搭建的思路1.使用creacte-react-app初始化项目2.安装所需插件:路由、网络、样式、组件库3.reactjs目录结构组织4. 配置路径别名4.配置路由5.网络配置,对axios进行封装》获取当前环境变量 6.配置代理解决跨域7.配置使用iconfont8.状态管理…

暗区突围steam叫什么 暗区突围无限steam上线时间测试申请预约教程

暗区突围steam叫什么 暗区突围无限steam上线时间 测试申请预约教程 最近暗区突围国际服的上线在游戏圈内引起了不小的波澜&#xff0c;这是一款由腾讯游戏开发的大逃杀类型游戏&#xff0c;玩家们需要在暗区内浴血搏杀&#xff0c;使用各种武器和道具活到最后&#xff0c;来取…

Linux系统中搭建Mosquitto MQTT服务并实现远程访问本地消息代理进行通信

文章目录 1. Linux 搭建 Mosquitto2. Linux 安装Cpolar3. 创建MQTT服务公网连接地址4. 客户端远程连接MQTT服务5. 代码调用MQTT服务6. 固定连接TCP公网地址7. 固定地址连接测试 今天和大家分享一下如何在Linux系统中搭建Mosquitto MQTT协议消息服务端,并结合Cpolar内网穿透工具…