1. /*
    2.     <div>
    3.       <span>
    4.         <a></a>
    5.       </span>
    6.       <span>
    7.         <a></a>
    8.         <a></a>
    9.       </span>
    10.     </div>
    12.     把上边dom结构转成下面的JSON格式
    13.     {
    14.       tag: 'DIV',
    15.       children: [
    16.         {
    17.           tag: 'SPAN',
    18.           children: [
    19.             { tag: 'A', children: [] }
    20.           ]
    21.         },
    22.         {
    23.           tag: 'SPAN',
    24.           children: [
    25.             { tag: 'A', children: [] },
    26.             { tag: 'A', children: [] }
    27.           ]
    28.         }
    29.       ]
    30.     }
    31. */
    32. // 递归
    33. function dom2Json(domTree) {
    34.     const obj = {}
    35.     obj.tag = domTree.tagName
    36.     obj.children = []
    37.     domTree.childNodes.forEach(node => {
    38.         obj.children.push(dom2Json(node))
    39.     })
    40.     return obj
    41. }
    42. dom2Json(document.getElementById('root'))

    继续发问：若给定的不是DOM结构，而是HTML字符串，该如何转换成JSON？
    答：借鉴 Vue 模板编译原理，利用正则匹配 HTML 字符串，开始标签、结束标签、文本，解析完成后生成对应的 AST ，并且建立起父子关联，不断向前推进（advance）截取剩余字符串，直到 HTML 字符串解析完成。
    参考：鲨鱼Vue - 编译原理解析