如何遍历 HTML 并将其转换为对象数组？答案

【问题标题】：How to traverse through HTML and convert it to an array of objects?如何遍历 HTML 并将其转换为对象数组？
【发布时间】：2020-03-24 17:05:35
【问题描述】：

我有以下 HTML 代码：

<div class="block" data-type="click">
    <div class="container" data-type="noclick">
        <p>Some text</p>
    </div>
    <div class="container" data-type="noclick">
        <div class="container" data-type="noclick">
            <p data-type="click">More text</p>
        </div>
        <div class="container">
            <p data-type="click">More text</p>
        </div>
    </div>
    ...
        ...
</div>

有一个名为block 的父元素，它可以包含任意数量的子元素，其中也可以包含任意数量的子元素本身。

我正在使用以下代码将 HTML 转换为 JSON 输出：

    site = [];
    ctr = 0;

    $(".block").each(function(){
        site.push([]);
        site[ctr]["type"] = $(this).data("type");
        site[ctr]["class"] = $(this).attr("class");
        site[ctr]["style"] = $(this).attr("style");
        site[ctr]["children"] = [];
            $(this).children().each(function(){
                site[ctr]["children"].push([]);
                site[ctr]["children"]["type"] = $(this).data("type");
                site[ctr]["children"]["class"] = $(this).attr("class");
                site[ctr]["children"]["style"] = $(this).attr("style");
            });
        ctr+=1;
    });

但是，对于包含许多不同级别子元素的元素，将这些子元素包含在数组中的最佳方法是什么？

换句话说，上面的代码 only 适用于包含一个级别子级的元素 - 我如何让它适用于包含 20 个不同级别子级而另一个仅包含两个子级的元素?

【问题讨论】：

我会请你使用serialize()或serializeArray()
@AnantSingh---AlivetoDie 这些适用于表单元素，而不是任何 DOM 元素。可能想阅读您链接到的页面:)。
@HereticMonkey 在那里创建隐藏表单将花费更少的时间，而不是遍历每个父项，然后是子项，然后是子项，依此类推并创建数组。
site.push([]); 和 site[ctr]["children"].push([]); 为什么使用（数字）数组作为字典/对象？

标签： javascript jquery arrays json traversal

【解决方案1】：

遵循使用vanilla javascipt 和recursive function 的完整工作示例：

function convertToArray(elements) {
    const array = [];
    
    if(!elements || elements.length === 0) {
        return [];
    }    
    
    for(let i=0; i<elements.length; i++) {
        array[i] = {};
        array[i]['class'] = elements[i].getAttribute('class');
        array[i]['type'] = elements[i].getAttribute('data-type');
        array[i]['style'] = elements[i].getAttribute('style');
        array[i]['children'] = convertToArray(elements[i].children);
    }
    return array;
}

const rootElement = document.getElementsByClassName('block');
console.log(convertToArray(rootElement));

<div class="block" data-type="click">
    <div class="container" data-type="noclick">
        <p>Some text</p>
    </div>
    <div class="container" data-type="noclick">
        <div class="container" data-type="noclick">
            <p data-type="click">More text</p>
        </div>
        <div class="container">
            <p data-type="click">More text</p>
        </div>
    </div>
</div>

【讨论】：