如何遍歷 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和遞歸函數的完整工作示例：

 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>