dom转换原生js对象

参考类型：使用js将dom对象转换为js对象_37 degrees Celsius的博客-CSDN博客_js元素转对象

直接吐出一个类型html标签：

// 获取元素的属性，输出对象，如果没有属性输出null
    const getAttribute = (dom) => {
        let attributes = {};
        let empty = true;
        Array.from(dom.attributes).map(item => {
            attributes[item.nodeName] = item.nodeValue;
            empty = false;
        })
        return empty ? null : attributes;
    }
 
    // 将dom转为js-dom
    const domTrans = (dom) => {
        // 总dom树
        let tree = [];
 
        // 递归, node = 当前的节点，dataNode = 数据插入的节点
        const loop = (node, dataNode) => {
            // 当前节点的模板
            let temp = {
                nodeType: node.nodeType
            }
 
            // 如果是文本节点 或 单标签节点
            if (temp.nodeType == 3 && node.nodeValue.match(/\S/)) {
                temp['nodeValue'] = node.nodeValue;
                temp['nodeName'] = node.nodeName;
                temp['children']=[];
                dataNode.push(temp);
            }
 
            // 元素节点
            if (temp.nodeType == 1) {
                let attributes = getAttribute(node);
 
                // 如果没有属性，不添加 attributes
                if (attributes) temp['attributes'] = attributes;
 
                // 当前节点下只有文本 或 单标签节点
                if (node.childNodes.length <= 1) {
                    temp['children']=[];
                    temp['content'] = node.innerHTML;
                    temp['nodeName'] = node.nodeName.toLowerCase();
                }
 
                // 当前节点下还有子节点
                if (node.childNodes.length > 1) {
                    temp['children'] = [];
                    temp['nodeName'] = node.nodeName.toLowerCase();
                    for (let i = 0; i < node.childNodes.length; i++) {
                        loop(node.childNodes[i], temp.children);
                    }
                }
                dataNode.push(temp);
            }
 
        }
        loop(dom, tree);
        return tree[0].children;
    }
 
    console.log(
        domTrans(document.querySelector('html'))
    );

这里边需要的属性要先定义。

下边的生成的对象：

{
    "nodeType": 9,
    "childNodes":[{
        "nodeType": 10,
        "nodeName": "html",
        "childNodes":[]
    },{
        "nodeType": 1,
        "nodeName": "html",
        "childNodes":[
            {
                "nodeType": 1,
                "childNodes": [
                    {
                        "nodeType": 1,
                        "attributes": {
                            "http-equiv": "Content-Type",
                            "content": "text/html; charset=UTF-8"
                        },
                        "content": "",
                        "nodeName": "meta"
                    },
                    {
                        "nodeType": 1,
                        "attributes": {
                            "name": "viewport",
                            "content": "width=device-width, initial-scale=1"
                        },
                        "content": "",
                        "nodeName": "meta"
                    },
                    {
                        "nodeType": 1,
                        "content": "滑动模式",
                        "nodeName": "title"
                    },
                    {
                        "nodeType": 1,
                        "content": "\n        body {\n            margin: 50px 0;\n            text-align: center;\n            font-family: \"PingFangSC-Regular\", \"Open Sans\", Arial, \"Hiragino Sans GB\", \"Microsoft YaHei\", \"STHeiti\", \"WenQuanYi Micro Hei\", SimSun, sans-serif;\n        }\n\n        .inp {\n            border: 1px solid #cccccc;\n            border-radius: 2px;\n            padding: 0 10px;\n            width: 278px;\n            height: 40px;\n            font-size: 18px;\n        }\n\n        .btn {\n            display: inline-block;\n            box-sizing: border-box;\n            border: 1px solid #cccccc;\n            border-radius: 2px;\n            width: 100px;\n            height: 40px;\n            line-height: 40px;\n            font-size: 16px;\n            color: #666;\n            cursor: pointer;\n            background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);\n        }\n\n        .btn:hover {\n            background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)\n        }\n\n        #captcha {\n            width: 300px;\n            display: inline-block;\n        }\n\n        label {\n            vertical-align: top;\n            display: inline-block;\n            width: 80px;\n            text-align: right;\n        }\n\n        #text {\n            height: 42px;\n            width: 298px;\n            text-align: center;\n            border-radius: 2px;\n            background-color: #F3F3F3;\n            color: #BBBBBB;\n            font-size: 14px;\n            letter-spacing: 0.1px;\n            line-height: 42px;\n        }\n\n        #wait {\n            display: none;\n            height: 42px;\n            width: 298px;\n            text-align: center;\n            border-radius: 2px;\n            background-color: #F3F3F3;\n        }\n\n        .loading {\n            margin: auto;\n            width: 70px;\n            height: 20px;\n        }\n\n        .loading-dot {\n            float: left;\n            width: 8px;\n            height: 8px;\n            margin: 18px 4px;\n            background: #ccc;\n\n            -webkit-border-radius: 50%;\n            -moz-border-radius: 50%;\n            border-radius: 50%;\n\n            opacity: 0;\n\n            -webkit-box-shadow: 0 0 2px black;\n            -moz-box-shadow: 0 0 2px black;\n            -ms-box-shadow: 0 0 2px black;\n            -o-box-shadow: 0 0 2px black;\n            box-shadow: 0 0 2px black;\n\n            -webkit-animation: loadingFade 1s infinite;\n            -moz-animation: loadingFade 1s infinite;\n            animation: loadingFade 1s infinite;\n        }\n\n        .loading-dot:nth-child(1) {\n            -webkit-animation-delay: 0s;\n            -moz-animation-delay: 0s;\n            animation-delay: 0s;\n        }\n\n        .loading-dot:nth-child(2) {\n            -webkit-animation-delay: 0.1s;\n            -moz-animation-delay: 0.1s;\n            animation-delay: 0.1s;\n        }\n\n        .loading-dot:nth-child(3) {\n            -webkit-animation-delay: 0.2s;\n            -moz-animation-delay: 0.2s;\n            animation-delay: 0.2s;\n        }\n\n        .loading-dot:nth-child(4) {\n            -webkit-animation-delay: 0.3s;\n            -moz-animation-delay: 0.3s;\n            animation-delay: 0.3s;\n        }\n\n        @-webkit-keyframes loadingFade {\n            0% { opacity: 0; }\n            50% { opacity: 0.8; }\n            100% { opacity: 0; }\n        }\n\n        @-moz-keyframes loadingFade {\n            0% { opacity: 0; }\n            50% { opacity: 0.8; }\n            100% { opacity: 0; }\n        }\n\n        @keyframes loadingFade {\n            0% { opacity: 0; }\n            50% { opacity: 0.8; }\n            100% { opacity: 0; }\n        }\n    ",
                        "nodeName": "style"
                    },
                    {
                        "nodeType": 1,
                        "attributes": {
                            "charset": "UTF-8",
                            "async": "",
                            "src": "./滑动模式_files/gettype.php"
                        },
                        "content": "",
                        "nodeName": "script"
                    },
                    {
                        "nodeType": 1,
                        "attributes": {
                            "charset": "UTF-8",
                            "async": "",
                            "crossorigin": "anonymous",
                            "src": "./滑动模式_files/fullpage.9.1.0.js.下载"
                        },
                        "content": "",
                        "nodeName": "script"
                    }
                ],
                "nodeName": "head"
            },
            {
                "nodeType": 1,
                "childNodes": [
                    {
                        "nodeType": 1,
                        "content": "\"https://www.geetest.com/demo/\">返回",
                        "nodeName": "h2"
                    },
                    {
                        "nodeType": 1,
                        "content": "滑动模式",
                        "nodeName": "h1"
                    },
                    {
                        "nodeType": 1,
                        "attributes": {
                            "id": "form"
                        },
                        "childNodes": [
                            {
                                "nodeType": 1,
                                "childNodes": [
                                    {
                                        "nodeType": 1,
                                        "attributes": {
                                            "for": "username"
                                        },
                                        "content": "用户名：",
                                        "nodeName": "label"
                                    },
                                    {
                                        "nodeType": 1,
                                        "attributes": {
                                            "class": "inp",
                                            "id": "username",
                                            "type": "text",
                                            "value": "用户名"
                                        },
                                        "content": "",
                                        "nodeName": "input"
                                    }
                                ],
                                "nodeName": "div"
                            },
                            {
                                "nodeType": 1,
                                "content": "",
                                "nodeName": "br"
                            },
                            {
                                "nodeType": 1,
                                "childNodes": [
                                    {
                                        "nodeType": 1,
                                        "attributes": {
                                            "for": "password"
                                        },
                                        "content": "密码：",
                                        "nodeName": "label"
                                    },
                                    {
                                        "nodeType": 1,
                                        "attributes": {
                                            "class": "inp",
                                            "id": "password",
                                            "type": "password",
                                            "value": "123456"
                                        },
                                        "content": "",
                                        "nodeName": "input"
                                    }
                                ],
                                "nodeName": "div"
                            },
                            {
                                "nodeType": 1,
                                "content": "",
                                "nodeName": "br"
                            },
                            {
                                "nodeType": 1,
                                "childNodes": [
                                    {
                                        "nodeType": 1,
                                        "content": "完成验证：",
                                        "nodeName": "label"
                                    },
                                    {
                                        "nodeType": 1,
                                        "attributes": {
                                            "id": "captcha"
                                        },
                                        "childNodes": [
                                            {
                                                "nodeType": 1,
                                                "attributes": {
                                                    "id": "text",
                                                    "style": "display: none;"
                                                },
                                                "content": "\n                行为验证™ 安全组件加载中\n            ",
                                                "nodeName": "div"
                                            },
                                            {
                                                "nodeType": 1,
                                                "attributes": {
                                                    "id": "wait",
                                                    "class": "show",
                                                    "style": "display: block;"
                                                },
                                                "childNodes": [
                                                    {
                                                        "nodeType": 1,
                                                        "attributes": {
                                                            "class": "loading"
                                                        },
                                                        "childNodes": [
                                                            {
                                                                "nodeType": 1,
                                                                "attributes": {
                                                                    "class": "loading-dot"
                                                                },
                                                                "content": "",
                                                                "nodeName": "div"
                                                            },
                                                            {
                                                                "nodeType": 1,
                                                                "attributes": {
                                                                    "class": "loading-dot"
                                                                },
                                                                "content": "",
                                                                "nodeName": "div"
                                                            },
                                                            {
                                                                "nodeType": 1,
                                                                "attributes": {
                                                                    "class": "loading-dot"
                                                                },
                                                                "content": "",
                                                                "nodeName": "div"
                                                            },
                                                            {
                                                                "nodeType": 1,
                                                                "attributes": {
                                                                    "class": "loading-dot"
                                                                },
                                                                "content": "",
                                                                "nodeName": "div"
                                                            }
                                                        ],
                                                        "nodeName": "div"
                                                    }
                                                ],
                                                "nodeName": "div"
                                            }
                                        ],
                                        "nodeName": "div"
                                    }
                                ],
                                "nodeName": "div"
                            },
                            {
                                "nodeType": 1,
                                "content": "",
                                "nodeName": "br"
                            },
                            {
                                "nodeType": 1,
                                "attributes": {
                                    "id": "btn",
                                    "class": "btn"
                                },
                                "content": "提交",
                                "nodeName": "div"
                            }
                        ],
                        "nodeName": "form"
                    },
                    {
                        "nodeType": 1,
                        "attributes": {
                            "src": "./滑动模式_files/jquery.js.下载"
                        },
                        "content": "",
                        "nodeName": "script"
                    },
                    {
                        "nodeType": 1,
                        "attributes": {
                            "src": "./滑动模式_files/gt.js.下载"
                        },
                        "content": "",
                        "nodeName": "script"
                    },
                    {
                        "nodeType": 1,
                        "content": "\n\n\n    var handler = function (captchaObj) {\n        captchaObj.appendTo('#captcha');\n        captchaObj.onReady(function () {\n            $(\"#wait\").hide();\n        });\n        $('#btn').click(function () {\n            var result = captchaObj.getValidate();\n            if (!result) {\n                return alert('请完成验证');\n            }\n            $.ajax({\n                url: 'gt/validate-slide',\n                type: 'POST',\n                dataType: 'json',\n                data: {\n                    username: $('#username2').val(),\n                    password: $('#password2').val(),\n                    geetest_challenge: result.geetest_challenge,\n                    geetest_validate: result.geetest_validate,\n                    geetest_seccode: result.geetest_seccode\n                },\n                success: function (data) {\n                    if (data.status === 'success') {\n                        alert('登录成功');\n                    } else if (data.status === 'fail') {\n                        alert('登录失败，请完成验证');\n                        captchaObj.reset();\n                    }\n                }\n            });\n        })\n        // 更多接口说明请参见：http://docs.geetest.com/install/client/web-front/\n        window.gt = captchaObj;\n    };\n\n\n    $.ajax({\n        url: \"gt/register-slide?t=\" + (new Date()).getTime(), // 加随机数防止缓存\n        type: \"get\",\n        dataType: \"json\",\n        success: function (data) {\n\n            $('#text').hide();\n            $('#wait').show();\n            // 调用 initGeetest 进行初始化\n            // 参数1：配置参数\n            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口\n            initGeetest({\n                // 以下 4 个配置参数为必须，不能缺少\n                gt: data.gt,\n                challenge: data.challenge,\n                offline: !data.success, // 表示用户后台检测极验服务器是否宕机\n                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机\n\n                product: \"float\", // 产品形式，包括：float，popup\n                width: \"300px\",\n                https: true,\n                api_server: \"apiv6.geetest.com\"\n\n                // 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/\n            }, handler);\n        }\n    });\n",
                        "nodeName": "script"
                    }
                ],
                "nodeName": "body"
            }
        ]
    }],
    "nodeName":'#document',
}