html5 dom 嵌套,如何写一个将任意层嵌套的 DOM结构 转换成JS object对象的方法？

试图写一个将任意层嵌套的 DOM结构 转换成object对象的方法( 做本地爬虫分析 )

例如：

DOM对象：

• 1
• 2

3

4

5

转换成：

Object对象：

{

li: [

'1',

a: '2'

],

a: [

'3',

'4'

],

div: '5'

}

大概就是上述的转换格式，本来是想用来做本地爬虫分析的，下面是我的代码：

function convertToObj(html) {

var obj = {};

_forEach(html, obj);

function _forEach(html, obj){

// 当存在多个相同标签的时候采用数组存储

let cache = []; // 存储用来校验是否已经存在的缓存(存的标签名)

let arrTemp = []; // 用来做数据交换

if(html.children.length > 0){ // 判断是否存在子元素

for (let i = 0; i < html.children.length; i++) {

if (html.children[i].children.length > 0) {

obj[html.children[i].nodeName] = {}; // 用来占坑的 - -！

cache.push(html.children[i].nodeName);

let objTemp = obj[html.children[i].nodeName];

_forEach( html.children[i], objTemp);

}else {

if (cache.filter(item => item == obj[html.children[i].nodeName]).length == 1) {

// 校验是否已经存在1个相同的标签名

cache.push(html.children[i].nodeName);

arrTemp.push(obj[html.children[i].nodeName]);

arrTemp.push(html.children[i].innerHTML);

obj[html.nodeName] = arrTemp;

}else if(cache.filter(item => item == obj[html.children[i].nodeName]).length > 1) {

// 校验是否已经存在多个的相同标签名

cache.push(html.children[i].nodeName);

obj[html.nodeName].push(html.children[i].innerHTML);

}else {

// 第一次存储

cache.push(html.children[i].nodeName);

obj[html.children[i].nodeName] = html.children[i].innerHTML;

}

}

}

}else {

obj[html.nodeName] = html.innerHTML;

return;

}

};

return obj;

}

var ul = document.getElementsByTagName('ul')[0];

console.log(convertToObj(ul));

目前存在的问题：

如果存在相同的标签，后面的会把前面的覆盖，尝试用缓存来解决，但是不知道为什么，每次递归回来之后，之前存储的内容会丢失，考虑到js只存在函数作用域，讲道理每一次递归时创建的缓存用数组应该是独立存在的，为啥每次递归回来之后会对上级的函数造成的影响？目前很无解，百度了网上大多是XML转化成为JSON的案例，很无奈，求大佬解答...