我需要将一些“ul”和“li”标签转换为JavaScript对象。
我已成功将所有标记转换为对象,但我不知道如何应用继承以使第一个对象包含子对象...
我在代码中使用递归函数:继承JavaScript对象
var getDir = function(child) {
if(child.getAttribute('id')) {
var dir = child.getAttribute('id');
dir = dir.split("/");
dir.pop();
dir = dir.join("/");
return dir;
} else {
return "";
}
}
var getName = function(child) {
if(child.getAttribute('id')) {
var name = child.getAttribute('id');
name = name.split("/");
name = name.pop();
return name;
}
}
function Recursive(nodes, count)
{
if(nodes.childNodes)
{
for(let child of nodes.childNodes)
{
if(child.nodeType === 1 && child.tagName === "LI")
{
var content = new Object();
content.dir = getDir(child);
content.name = getName(child);
content.type = child.type;
if(child.getAttribute('class') && child.getAttribute('class') === "error") {
content.corrupted = true;
}
console.log(content);
console.log("-".repeat(count) + "element: " + child.tagName);
}
if(child.childNodes) {
Recursive(child, count+1);
}
}
}
}
Recursive(treeModule, 0);
treeModule是一个HTML内容:
<ul>
<li id="myProject" type="folder">myProject
<ul>
<li id="myProject/css" type="folder">css
<ul>
<li id="myProject/css/main.css" type="file">main.css</li>
<li id="myProject/css/menu.css" type="file">menu.css</li>
<li id="myProject/css/user.css" type="file">user.css</li>
</ul>
</li>
<li id="myProject/fonts" class="empty" type="folder">fonts</li>
<li id="myProject/images" type="folder">images
<ul>
<li id="myProject/images/logo.png" class="error" type="file">logo.png</li>
</ul>
</li>
<li id="myProject/index.html" type="file">index.html</li>
<li id="myProject/js" type="folder">js
<ul>
<li id="myProject/js/controllers" type="folder">controllers
<ul>
<li id="myProject/js/controllers/core" type="folder">core
<ul>
<li id="myProject/tempjs/controllerslates/core/menu.js" type="file">menu.js</li>
</ul>
</li>
<li id="myProject/js/controllers/errors" type="folder">errors
<ul>
<li id="myProject/js/controllers/errors/error.js" type="file">error.js</li>
</ul>
</li>
<li id="myProject/js/controllers/home" type="folder">home
<ul>
<li id="myProject/js/controllers/home/homePage.js" type="file">homePage.js</li>
</ul>
</li>
<li id="myProject/js/controllers/home" type="folder">home
<ul>
<li id="myProject/js/controllers/user/list.js" type="file">list.js</li>
<li id="myProject/js/controllers/user/login.js" type="file">login.js</li>
<li id="myProject/js/controllers/user/profile.js" type="file">profile.js</li>
<li id="myProject/js/controllers/user/subscribe.js" type="file">subscribe.js</li>
</ul>
</li>
</ul>
</li>
<li id="myProject/js/libs" type="folder">libs
<ul>
<li id="myProject/js/libs/handlebars.min.js" type="file">handlebars.min.js</li>
<li id="myProject/js/libs/jquery.min.js" type="file">jquery.min.js</li>
<li id="myProject/js/libs/require.min.js" class="error" type="file">require.min.js</li>
</ul>
</li>
<li id="myProject/js/main.js" type="file">main.js</li>
<li id="myProject/js/models" type="folder">models
<ul>
<li id="myProject/js/models/menu.js" type="file">menu.js</li>
<li id="myProject/js/models/user.js" type="file">user.js</li>
<li id="myProject/js/models/users.js" type="file">users.js</li>
</ul>
</li>
</ul>
</li>
<li id="myProject/ressources" class="empty" type="folder">ressources</li>
<li id="myProject/views" type="folder">views
<ul>
<li id="myProject/templates/core" type="folder">core
<ul>
<li id="myProject/templates/core/footer.html" type="file">footer.html</li>
<li id="myProject/templates/core/header.html" type="file">header.html</li>
<li id="myProject/templates/core/menu.html" type="file">menu.html</li>
</ul>
</li>
<li id="myProject/templates/errors" type="folder">errors
<ul>
<li id="myProject/templates/errors/error401.html" type="file">error401.html</li>
<li id="myProject/templates/errors/error403.html" type="file">error403.html</li>
<li id="myProject/templates/errors/error404.html" class="error" type="file">error404.html</li>
</ul>
</li>
<li id="myProject/templates/home" type="folder">home
<ul>
<li id="myProject/templates/home/homePage.html" type="file">homePage.html</li>
</ul>
</li>
<li id="myProject/templates/home" type="folder">home
<ul>
<li id="myProject/templates/user/list.html" type="file">list.html</li>
<li id="myProject/templates/user/login.html" type="file">login.html</li>
<li id="myProject/templates/user/profile.html" type="file">profile.html</li>
<li id="myProject/templates/user/subscribe.html" type="file">subscribe.html</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
而且我想那最深的 “礼” 成为我的对象这样最深的孩子:
{
"dir": "",
"name": "folder",
"type": "folder",
"children": [
{
"dir": "folder",
"name": "cascading",
"type": "folder",
"children": [
{
"dir": "folder/cascading",
"name": "1.css",
"type": "folder"
},
{
"dir": "folder/cascading",
"name": "2.css",
"type": "folder"
},
{
"dir": "folder/cascading",
"name": "3.css",
"type": "folder"
}
]
}
]
}
现在我可以只显示每个对象和它的深处(用console.log(“ - ”。repeat(count)+“element:”+ child.tagName); )在我的控制台
DOM对象已经是JavaScript对象。目前还不清楚你实际想要解决什么问题。 – jfriend00
实际上,我需要将我的HTML代码转换为具有特定属性的对象,其中一个名为“children”,并包含对象的子对象。具体而言,我需要将所有“li”和“ul”转换为JSON以提高可见性,因为我的老师会这样做。 – Barilo
包含子节点的DOM节点与继承无关。 – Bergi