HTML/CSS/JavaScript 解法, 执行用时: 958ms, 内存消耗: 77848KB, 提交时间: 2021-06-30
{"css":"body{\n margin: 0;\n font-size: 14px;\n}","js":" function dom2json() {\n let root = document.getElementById('jsContainer');\n return JSON.parse(JSON.stringify(analysisDom(root)))\n }\n function analysisDom(dom) {\n let templete;\n if (dom.nodeType == 1) {\n templete = {\n tag: '',\n attributes: {},\n children: []\n };\n templete.tag = dom.localName;\n let len = dom.attributes.length;\n for (let i = 0; i < len; i++) {\n templete.attributes[dom.attributes.item(i).nodeName] = dom.getAttribute(dom.attributes.item(i).nodeName);\n };\n let cLen = dom.childNodes.length\n if (cLen) {\n for (let i = 0; i < cLen; i++) {\n if(analysisDom(dom.childNodes[i])){\n templete.children.push(analysisDom(dom.childNodes[i]))\n }\n }\n }\n } else if (dom.nodeType == 3) {\n let data = dom.textContent.trim();\n if (data) {\n templete = {\n tag: 'text',\n content: data\n }\n }\n }\n return templete\n }","html":"<div id=\"jsContainer\">\n <ul class=\"js-test\" id=\"jsParent\">\n <li data-index=\"0\">1</li>\n <li data-index=\"1\">2</li>\n </ul>\n <span style=\"font-weight: bold;\">3</span>\n 4\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 959ms, 内存消耗: 77848KB, 提交时间: 2021-06-30
{"css":"body{\n margin: 0;\n font-size: 14px;\n}","js":"function dom2json() {\n const jsContainer = document.querySelector(\"#jsContainer\")\n\n function domJson(dom) {\n var obj = {\n tag: getTagName(dom)\n }\n if (dom.nodeType == 1) {\n var attrs = getTagAttrs(dom)\n if (attrs) obj.attributes = attrs;\n obj.children = Array.from(dom.childNodes).filter(child => {\n return !(child.nodeType == 3 && !child.textContent.trim())\n }).map(child => domJson(child))\n return obj\n }\n if (dom.nodeType == 3) {\n obj.content = texthandle(dom.textContent)\n return obj\n }\n }\n\n function texthandle(str) {\n return str.replace(/\\s/g,'')\n }\n\n function getTagName(dom) {\n return dom.nodeName.toLocaleLowerCase().replace('#', '')\n }\n\n function getTagAttrs(dom) {\n var attr = Array.from(dom.attributes)\n var obj = {}\n attr.forEach(atr => obj[atr.name] = atr.value)\n return attr.length ? obj : null;\n }\n\n return domJson(jsContainer)\n}","html":"<div id=\"jsContainer\">\n <ul class=\"js-test\" id=\"jsParent\">\n <li data-index=\"0\">1</li>\n <li data-index=\"1\">2</li>\n </ul>\n <span style=\"font-weight: bold;\">3</span>\n 4\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 963ms, 内存消耗: 77872KB, 提交时间: 2021-06-21
{"css":"body{\n margin: 0;\n font-size: 14px;\n}","js":"function dom2json() {\n // 找到容器\n const jsContainer = document.getElementById(\"jsContainer\");\n // 将节点转化为json\n function handleDom(node) {\n // 虚拟节点\n let vnode = {\n tag: node.tagName.toLowerCase(),\n attributes: {},\n children: [],\n };\n // 属性和子节点\n let attributes = node.attributes,\n childNodes = node.childNodes;\n // 遍历节点属性\n if (attributes.length > 0) {\n for (let i = 0; i < attributes.length; i++) {\n let item = attributes[i];\n vnode.attributes[item.nodeName] = item.nodeValue;\n }\n }\n // 遍历子节点\n if (childNodes.length > 0) {\n for (let i = 0; i < childNodes.length; i++) {\n let item = childNodes[i];\n if (item.nodeType === Node.TEXT_NODE) {\n // 属性节点\n if (item.textContent.trim()) {\n let kids = {\n tag: \"text\",\n content: item.textContent,\n };\n vnode.children.push(kids);\n }\n } else if (item.nodeType === Node.ELEMENT_NODE) {\n // 元素节点,递归处理\n vnode.children.push(handleDom(item));\n }\n }\n }\n return vnode;\n }\n return handleDom(jsContainer);\n}","html":"<div id=\"jsContainer\">\n <ul class=\"js-test\" id=\"jsParent\">\n <li data-index=\"0\">1</li>\n <li data-index=\"1\">2</li>\n </ul>\n <span style=\"font-weight: bold;\">3</span>\n 4\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 966ms, 内存消耗: 77872KB, 提交时间: 2021-06-22
{"css":"body{\n margin: 0;\n font-size: 14px;\n}","js":"function dom2json() {\n // 找到容器\n const jsContainer = document.getElementById(\"jsContainer\");\n // 将节点转化为json\n function parseDom(node) {\n // 虚拟节点\n let obj = {\n tag: node.tagName.toLowerCase(),\n attributes: {},\n children: [],\n };\n // 属性和子节点\n let attributes = node.attributes,\n childNodes = node.childNodes;\n // 遍历节点属性\n if (attributes.length > 0) {\n for (let i = 0; i < attributes.length; i++) {\n let item = attributes[i];\n obj.attributes[item.nodeName] = item.nodeValue;\n }\n }\n // 遍历子节点\n if (childNodes.length > 0) {\n for (let i = 0; i < childNodes.length; i++) {\n let item = childNodes[i];\n if (item.nodeType === 3) {\n // 属性节点\n if (item.textContent.trim()) {\n let kids = {\n tag: \"text\",\n content: item.textContent,\n };\n obj.children.push(kids);\n }\n } else if (item.nodeType === 1) {\n // 元素节点,递归处理\n obj.children.push(parseDom(item));\n }\n }\n }\n return obj;\n }\n return parseDom(jsContainer);\n}","html":"<div id=\"jsContainer\">\n <ul class=\"js-test\" id=\"jsParent\">\n <li data-index=\"0\">1</li>\n <li data-index=\"1\">2</li>\n </ul>\n <span style=\"font-weight: bold;\">3</span>\n 4\n</div>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 981ms, 内存消耗: 77864KB, 提交时间: 2021-07-13
{"css":"body{\n margin: 0;\n font-size: 14px;\n}","js":"function dom2json() {\n const jsContainer = document.querySelector(\"#jsContainer\")\n \n function domJson(dom) {\n var obj = {\n tag: getTagName(dom)\n }\n if (dom.nodeType == 1) {\n var attrs = getTagAttrs(dom)\n if (attrs) obj.attributes = attrs;\n console.log(dom.children)\n obj.children = Array.from(dom.childNodes).filter(child => {\n return !(child.nodeType == 3 && !child.textContent.trim())\n }).map(child => domJson(child))\n return obj\n }\n if (dom.nodeType == 3) {\n obj.content = texthandle(dom.textContent)\n return obj\n }\n }\n \n function texthandle(str) {\n return str.replace(/\\s/g, '')\n }\n \n function getTagName(dom) {\n return dom.nodeName.toLocaleLowerCase().replace('#', '')\n }\n \n function getTagAttrs(dom) {\n var attr = Array.from(dom.attributes)\n var obj = {}\n attr.forEach(atr => obj[atr.name] = atr.value)\n return attr.length ? obj : null;\n }\n \n return domJson(jsContainer)\n }","html":"<div id=\"jsContainer\">\n <ul class=\"js-test\" id=\"jsParent\">\n <li data-index=\"0\">1</li>\n <li data-index=\"1\">2</li>\n </ul>\n <span style=\"font-weight: bold;\">3</span>\n 4\n</div>","libs":[]}
