如何用JavaScript将指定父元素的所有DOM节点整理为结构化字典

实现思路 #

你原有的递归逻辑只触发了叶子节点的回调，没有收集层级结构，调整为让递归函数逐层返回对应节点的结构数据即可：

• 每个DOM节点如果没有子元素，直接返回小写的标签名字符串
• 如果有子元素，返回键为当前节点小写标签名、值为子元素递归结果数组的对象

完整实现代码 #

function getNodeStructure(node) {
    // 标签名统一转小写，匹配示例格式
    const tagName = node.tagName.toLowerCase()
    const children = node.children
    // 无后代直接返回标签名
    if (children.length === 0) {
        return tagName
    }
    // 有后代则遍历子节点递归处理
    const childStructures = []
    for (let i = 0; i < children.length; i++) {
        childStructures.push(getNodeStructure(children[i]))
    }
    return {
        [tagName]: childStructures
    }
}

使用方法 #

拿你给出的示例HTML测试：

// 选中你要解析的根节点，比如示例里的id为wrapper的div
const root = document.querySelector('#wrapper')
const result = getNodeStructure(root)
console.log(JSON.stringify(result, null, 4))

输出结果和你期望的格式完全一致。

如果你需要包含文本节点、注释节点等其他节点类型，可以把node.children替换为node.childNodes，同时增加节点类型判断逻辑即可。

原递归函数的改造方案 #

如果你要保留原有的回调式递归设计，调整逻辑如下：

• 递归过程中同时收集当前层级的结构
• 所有子节点处理完成后再触发回调传入当前节点的完整结构

function recursor(node, func) {
    const tagName = node.tagName.toLowerCase()
    const children = node.children
    if (children.length === 0) {
        const res = tagName
        func(res)
        return res
    }
    const childStructures = []
    for (let i = 0; i < children.length; i++) {
        childStructures.push(recursor(children[i], func))
    }
    const res = {[tagName]: childStructures}
    func(res)
    return res
}

内容的提问来源于stack exchange，提问作者Weilory