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

于 2024-05-01 23:24:22 发布
阅读量1.2k 收藏 10
点赞数 16
文章标签： json postman javascript elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iotzzh/article/details/124817150
版权

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

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

 

全栈道
关注
  • 16
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
DOM到JSON转换器「DOM to JSON Converter」-crx插件
03-10
该工具从网页DOM中提取元素详细信息（名称，网址，ID，深度，值，ALT，SRC和HREF）。适用于iframes！ “DOM到JSON转换器”从网站的DOM（文档对象模型）中提取有关所有节点的有限信息（如节点名称，树的深度，id，src，href，alt及其文本内容）。 节点都被顺序地插入到一个数组中，然后以JSON格式下载。该工具可帮助用户可视化并理解网站的DOM结构。 支持语言:English
nanomorph ：:-实际DOM节点的超快速扩散算法
01-28
纳米晶 实际DOM节点的超快速扩散算法 :high_voltage:用法var morph = require ( 'nanomorph' )var html = require ( 'nanohtml' )var tree = html ` < div> hello people </ div> `document . body . appendChild ( ...
dom元素转化成字符串；字符串html 转换成 实际代码html; innerHTML, outerHTML,
Sunny_lxm的博客
05-06 8427
/ 选中的区域块 input dom元素转化成字符串 let inputHtml = dom.querySelector('input').outerHTML; // StringHTMl to html let contentHtml = new DOMParser().parseFromString(this.material.materialContent, 'text/html'); ...
【JavaScript】JS实用案例分享：DOM节点转JSON数据 | 标签输入框
前端之行，任重道远！
10-14 7688
基础不牢，地动山摇！快进来学习JavaScript开发中非常实用的《DOM节点转JSON数据》和《标签输入框》的案例吧，这些案例都是使用频率非常高的基础内容，快来巩固基础，提高自己吧！
DOM节点转化为字符串
weixin_44805839的博客
12-10 2490
Dom节点对象转化为字符串_pkgray的专栏-CSDN博客_dom节点转字符串function nodeToString ( node ) { var tmpNode = document.createElement( "div" ); tmpNode.appendChild( node.cloneNode( true ) ); var str = tmpNode.innerHTML; tmpNode = node = null; // prevenhttps://blog.csdn.net/pkgray
将dom元素转为字符串(已排除一个坑，但不知道原理)
weixin_42262795的博客
12-25 1724
嗯。。很奇葩的要求哈 举个栗子：<img id="nidaye" src="nidaye.com" onclick="javascript:xx(xx)"> 假如我不想改变这个标签也不想改原有的js文件怎么能获取到这个onclick 第一步：获取dom对象 var nidaye= document.getElementsByTagName("img"); nidaye.in...
KMP:Knuth-Morris-Pratt 字符串搜索算法
07-05
Knuth-Morris-Pratt 算法
经典算法--字符串的压缩
09-03
关于经典算法--压缩字符串（将字符串内连续重复出现的字符进行压缩），个人的想法
fortran-使用fortran实现的快速浮点数到字符串转换.zip
最新发布
03-09
fortran_使用fortran实现的快速浮点数到字符串转换
动态规划算法--1-26对应a-z字符串转换
05-07
动态规划算法：从1到26分别对应a-z的每一个字母，输入一串数字的字符串，转换为字母，输出所有可能的字母序列。如123->abc、lc、aw 本资源是按照二叉树的思想解决该问题。从字符串的头部开始，每次可以取一个或者两...
将DOM节点转化成HTML字符串
ion_L的博客
01-03 7837
DOM转字符串：  字符串转DOM： function parseDom(str) { var obj = document.createElement("div"); obj.innerHTML = str; return obj.childNodes; }; const dom = parseDom('&lt;div&gt;这是一个dom字符串&lt;/div...
javascript dom与字符串相互转换
dazhexuan0219的博客
08-05 543
js dom与字符串相互转换 一.字符串转换dom: function stringToDom(str){var obj=document.createElement("div");obj.innerHTML=args;return obj;} 二.dom转换字符串： function domToStirng(dom){ if(dom inhtmlDOM){ ...
html怎样转换成json数据,如何将数组转换为JSON数据？
weixin_35530964的博客
05-31 1134
如何将数组转换为JSON数据？下面本篇就来给大家介绍一下将数组转换为JSON对象的方法，希望对大家有所帮助。方法一：使用Object.assign()Object.assign()方法将枚举的所有属性的值从源对象(一个或多个)复制到目标对象语法：Object.assign(target, ...sources)参数：●　target：它指定目标对象。●　sources：它指定源对象。例：将JS数组...
js Dom转字符串与字符串转Dom
勿忘初心
12-17 1万+
1、dom转字符串 function parseDom(arg) {　　 var objE = document.createElement("div");　　 objE.innerHTML = arg;　　 return objE.childNodes;}; const dom=parseDom(arg)2、dom转字符串function nodeToString ( node ) {
JavaScript Element对象与字符串互转
weixin_45471827的博客
08-14 8040
我们常用的两种插入元素的方式： appendChild(node) 方法，该方法在父节点中追加子节点，不能是字符串类型；以及HTML5中的innerHTML属性，该属性可用来在父节点中写入字符串类型的标签；当取得的数据并不是自己想要的类型时，这时候就需要互转； 1、字符串转Element /*字符串解析成元素节点类型*/ function parseElement(str) { var o=do...
JavaScript dom节点转成json数据
sinat_20203869的博客
03-31 903
dom节点转成json数据
将dom结构转换成json数据
web
09-13 634
四部曲 过滤子节点 （去掉没有内容的text结构） 生成tag 生成attributes属性 递归遍历children function dom2json() { function createObj(node) { var tag = node.nodeName.toLocaleLowerCase(); var obj = {}; //过滤子节点 const childList = Array.from(node.childNode
DOM解析和JSON解析简单操作
公会驻地
07-16 1662
DOM解析：首先根据数据形成一个dom树 代码演示 // 1.获取文件路径 NSString *path = [[NSBundle mainBundle] pathForResource:@"contacts" ofType:@"xml"]; // 2.根据文件路径，将文件内容读取成NSData对象 NSData *data = [NSData dataW...
js将dom对象转换成字符串
热门推荐
hangzhang
07-17 1万+
function nodeToString ( node ) { //createElement()返回一个Element对象 var tmpNode = document.createElement( "div" ); //appendChild() 参数Node对象 返回Node对象 Element方法 //cloneNode() 参数布尔类型 ...
JWT如何将对象转换成JSON格式的字符串
04-27
JWT本身并不直接将对象转换为JSON格式的字符串，而是使用Base64编码算法将JSON格式的字符串进行编码，最终得到一个JWT token。在编码之前，需要将对象序列化为JSON格式的字符串。在Java中，可以使用一些第三方库如Jackson或Gson来完成这个过程。以下是一个使用Jackson将对象转换为JSON格式字符串并生成JWT token的示例代码： ```java import com.fasterxml.jackson.databind.ObjectMapper; import io.jsonwebtoken.Jwts; import io.jsonwebtoken.SignatureAlgorithm; public class JwtUtils { private static final String SECRET_KEY = "your_secret_key"; public static String generateJwtToken(Object payload) throws JsonProcessingException { ObjectMapper objectMapper = new ObjectMapper(); String payloadJson = objectMapper.writeValueAsString(payload); return Jwts.builder() .setPayload(payloadJson) .signWith(SignatureAlgorithm.HS512, SECRET_KEY) .compact(); } } ``` 其中，`payload`参数是需要转换为JWT token的对象，`SECRET_KEY`是用于加密的密钥。首先，使用`ObjectMapper`将对象序列化为JSON格式的字符串`payloadJson`，然后使用`Jwts`构建JWT token，将JSON格式的字符串设置为payload，并使用HS512算法对JWT进行签名，最终得到JWT token字符串。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈道

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值