Javascript 如何从html元素创建树 struct

这是我在vue2应用程序中的元素:

<div class="child-elements-container draggable-container">
    <div>
        <div entity-type="entitytype1" type="elementType" id="2" class="single-element"></div>
        <div class="child-elements-container draggable-container">
            <div>
                <div entity-type="entitytype2" type="elementType" id="59" class="single-element"></div>
            </div>
        </div>
    </div>
    <div>
        <div entity-type="measures" type="elementType" id="3" class="single-element"></div>
        <div class="child-elements-container draggable-container">
            <div>
                <div entity-type="entitytype3" type="elementType" id="13" class="single-element"></div>
                <div class="child-elements-container draggable-container"></div>
            </div>
            <div>
                <div entity-type="entitytype2" type="elementType" id="14" class="single-element"></div>
                <div class="child-elements-container draggable-container"></div>
            </div>
        </div>
    </div>
    <div>
        <div entity-type="entitytype3" type="elementType" id="11" class="single-element">
        </div>
        <div class="child-elements-container draggable-container">
            <div>
                <div entity-type="entitytype3" type="elementType" id="12" class="single-element">
                </div>
                <div class="child-elements-container draggable-container"></div>
            </div>
        </div>
    </div>
</div>

我试图得到一个具有单元素id的树 struct ，我使用这个函数来得到这个层次视图:

   buildDraggedHierarchy(el) {
            if (!el) {
                return [];
            }

            const children = [...el.querySelectorAll(":scope>div")];
            const output = children.map((child) => ({
                id: child.querySelector(".single-element") ? child.querySelector(".plan-element").id : null, 
                type: child.getAttribute("type"), 
                children: this.buildDraggedHierarchy(child.querySelector(".draggable-container")), 
            }));

            return output;
        },

但是输出是这样的:

[
    {
        "id": "2",
        "type": null,
        "children": [
            {
                "id": "59",
                "type": null,
                "children": []
            }
        ]
    },
    {
        "id": "3",
        "type": null,
        "children": [
            {
                "id": "13",
                "type": null,
                "children": []
            },
            {
                "id": "14",
                "type": null,
                "children": []
            }
        ]
    },
    {
        "id": "11",
        "type": null,
        "children": [
            {
                "type": null,
                "children": []
            }
        ]
    }
]

所以最后一个元素的子元素不正确.我希望子元素们会来，ID 12而不是ID根本没有显示.如何解决这个问题？