如何循环获取HTML元素ID？从ID=4溯源至ID=105并生成层级结构

问题描述 #

现有HTML结构：

<div class="child-elements-container">
    <div id="116" is-open="true">
        <div class="element">
        </div>
        <div class="child-elements-container"></div>
    </div>
    <div id="105" is-open="true" draggable="false">
        <div class="element">
        </div>
        <div class="child-elements-container">
            <div id="4" is-open="true">
                <div class="element">
                </div>
                <div class="child-elements-container"></div>
            </div>
        </div>
    </div>
</div>

现有代码片段：

var movedElement = document.getElementById(movedElementId);
console.log(movedElement.parentElement)

需求：已知movedElementId为4，需完成两项操作：

• 从ID为4的元素向上查找，定位到ID为105的父级元素
• 生成指定格式的层级数组结构：

[
   { id: 116, children: {} },
   { id: 105, children: { id: 4, children: {} } }
]

实现代码 #

// 定义目标元素ID
const movedElementId = 4;
const movedElement = document.getElementById(movedElementId);

// 1. 向上遍历找到ID为105的元素，同时记录层级路径
let targetParent = null;
let currentElement = movedElement;
const path = [{ id: movedElementId, children: {} }];

while (currentElement && !targetParent) {
    const parentContainer = currentElement.parentElement;
    // 检查父容器的直接父元素是否是目标ID
    if (parentContainer?.parentElement.id === '105') {
        targetParent = parentContainer.parentElement;
        path.unshift({ id: parseInt(targetParent.id), children: {} });
    }
    currentElement = currentElement.parentElement;
}

// 2. 构建完整的层级数组
const topContainer = document.querySelector('.child-elements-container');
const result = [];

// 遍历最外层容器的直接子元素
Array.from(topContainer.children).forEach(child => {
    const elementId = parseInt(child.id);
    const elementObj = { id: elementId, children: {} };
    
    // 为105元素添加子节点4的结构
    if (elementId === 105) {
        elementObj.children = path[1];
    }
    
    result.push(elementObj);
});

console.log(result);

代码说明 #

• 向上遍历逻辑：从ID为4的元素出发，逐层向上检查父元素链，直到找到ID为105的元素，同时收集路径中的层级节点。
• 层级构建逻辑：获取最外层的child-elements-container容器，遍历其直接子元素，对105元素单独注入子节点4的结构，最终组装成需求的数组格式。

内容的提问来源于stack exchange，提问作者Yellow rain coat