算法二：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字符串格式化显示下：

在对比下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.mzph.cn/news/831063.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！