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

Question

我有以下 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;
    });

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

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

Answer 1

遵循使用 vanilla javascipt and a 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>

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

How to traverse through HTML and convert it to an array of objects?

javascript

jquery

arrays

json

traversal