前置知识
快速获取html元素方法：
document.documentElement
// js高级程序设计一书中有段这样的代码：
let html = document.documentElement; //取得对<html>的引用
html === document.childNodes[0]; //true
html === document.firstChild; //true
// 实测新版Chrome浏览器（版本 75.0.3770.100 64位）
html === document.childNodes[1]; // true
document.childNodes[0] === document.firstChild // true
document.doctype === document.childNodes[0]; // true
快速获取body元素方法：
document.body
ParentNode.children 和 Node.childNodes 区别
- node.children：返回一个 Node 的子元素的集合，类型是 HTMLCollection（即html元素的集合）。
- node.childNodes：返回一个 node 子节点的集合，类型是 NodeList，该集合包含有更多的信息，比如元素与元素之间的换行符，页面中的注释等。
如果我们想遍历元素的话，选择 ParentNode.children 应该是会更方便一些以上两个属性返回的元素集合都是实时的，因此不用担心由于js脚本修改dom导致需要重新获取元素信息。
代码
function ergodicDom(elem) {
let domTreeObj = {}; //使用对象来展现dom树
!function innerFun(elem, obj, i) {
if (elem.nodeName === 'SCRIPT' || elem.nodeName === 'STYLE') {
return;
}
let name = i ? elem.nodeName + i : elem.nodeName;
obj[name] = {};
if (elem.children.length > 0) {
[].forEach.call(elem.children, (element, i)=>{
innerFun(element, obj[name], i)
})
}
}(elem, domTreeObj)
return domTreeObj;
}
随手写的，发现用了 ParentNode.children 的话就不需要判断 nodeType 了，有不足之处欢迎补充
