思路：将dom节点转换为json数据，其实是从上到下转换，首先获取该节点，然后分别使用tagName、attributes、childNodes获取元素的标签名、元素的属性集合(name、value)、元素的子节点 集合，然后再分别使用nodeType、textContent判断元素的节点类型、文本内容。

<body>
    <div id="jsContainer">
        <ul class="js-test" id="jsParent">
            <li data-index="0">1</li>
            <li data-index="1">2</li>
        </ul>
        <span style="font-weight: bold;">3</span>
        4
    </div>
    <script type="text/javascript">
        function dom2json() {
            const jsContainer=document.getElementById('jsContainer')
            var res=createObj(jsContainer)
            console.log(res)
            return res
}
    function createObj(element)
    {
        //创建空对象
        const obj={}
        //获取标签名称
        obj.tag=element.tagName.toLowerCase()
        //获取属性
        var attribute={}
        Array.from(element.attributes).forEach(attr=>{
            var name = attr.name
            var value = attr.value
            attribute[name]=value
        })
        obj.attributes=attribute
        //获取子节点
        var children=[]
        Array.from(element.childNodes).forEach(node=>{
            if(node.nodeType===1)
                children.push(createObj(node))
            else if(node.nodeType===3)
            {
                var content=node.textContent.trim()
                if(content!=="")
                {
                    children.push({tag:'text',content:content})
                }
            }
        })
        obj.children=children
        return obj
    }
    dom2json()
    </script>
</body>

总结：tagName（标签名称）代表DOM节点的标签名称；attributes（属性）代表DOM节点的属性集合；nodeType（节点类型）表示DOM节点的类型，1代表元素节点，3代表文本节点；textContent（文本内容）代表DOM节点的文本内容，当节点类型是文本节点（nodeType为3）时，textContent属性表示该文本节点包含的文本内容。

注意：和JS40是互逆操作！！！