参考类型：使用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": "<a href=\"https://www.geetest.com/demo/\">返回</a>",
"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',
}
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
