前端面试JS篇——实现DOM转化为JSON

4,341 阅读1分钟

同样是一道字节跳动的前端面试题,实现将DOM转化为JSON,例子如下。

<div>
  <span>  
    <a></a>
  </span>
  <span>
    <a></a>
    <a></a>
  </span>
</div>
{
  tag: 'DIV',
  children: [
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] }
      ]
    },
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] },
        { tag: 'A', children: [] }
      ]
    }
  ]
}

解答:

function dom2Json(domtree) {
  let obj = {}
  obj.name = domtree.tagName
  obj.children = []
  domtree.childNodes.forEach(
    child => obj.children.push(dom2Json(child))
    )
  return obj
}

这道题不是很难,只要能够熟练的掌握与DOM相关的API以及如何递归的调用dom2Json函数来实现子元素的加入即可。