DOM2JSON1.获得box的DOM节点 2.将DOM转成Tree结构 3.将Tree转成String字符串 4.测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM2JSON</title>
</head>
<body>
    <div class="box">
        <p class="p">hello world</p>
        <div class="name">
            <span class="name">DOM2JSON</span>
            <span class="age">100</span>
        </div>
    </div>
    <script>
        //获取DOM节点
        let root = document.querySelector(".box")
        
        //DOM转成Tree结构
        let dom2tree = (root)=>{
            if(!root){
                return
            }
            let obj = {
                "tagName":`${root.tagName.toLowerCase()}`,
                "attrs":"",
                "children":[]
            }
            for(let key of root.attributes){
                obj.attrs += `${key.name}`+":"+`${key.value}`+","
            }
            obj.attrs = obj.attrs.slice(0,obj.attrs.length-1)
            if(root.children&&root.children.length){
                const children = root.children
                Array.from(children).forEach(child=>{
                    obj.children.push(dom2tree(child))
                })
            }
            return obj
        }
        
        //将Tree转成String字符串
        let tree2str = (obj)=>{
            if(!obj){
                return
            }
            str = str + "{"+"tagName" + ":" + obj.tagName
            if(obj.attrs){
                str = str + "," + "attrs" + ":{" +obj.attrs + "}"
            }
            if(obj.children&&obj.children.length){
                str = str + ","+"children" + ":{" 
                obj.children.forEach(child=>{
                    tree2str(child,str)
                })
                str = str + "}"
            }else{
                str = str + "}"
            }
        }
        
        //测试代码
        let str = "" 
        console.log(dom2tree(root))
        tree2str(dom2tree(root))
        console.log(str)
    </script>
</body>
</html>