继承JavaScript对象

我需要将一些“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）; ）在我的控制台

来源

2016-10-22 Barilo

DOM对象已经是JavaScript对象。目前还不清楚你实际想要解决什么问题。 – jfriend00

实际上，我需要将我的HTML代码转换为具有特定属性的对象，其中一个名为“children”，并包含对象的子对象。具体而言，我需要将所有“li”和“ul”转换为JSON以提高可见性，因为我的老师会这样做。 – Barilo

包含子节点的DOM节点与继承无关。 – Bergi

如果您正在为您的问题的结构，我认为应该工作

function Node(dirName,name,type){ 
    this.dir=dirName; 
    this.name=name; 
    this.type=type; 
} 
function parentNode(dirName,name,type,childArray){ 
    Node.call(this,dirName,name,type); 
    this.children=childArray; 
} 
parentNode.prototype=Object.create(Node.prototype); 

var node1=new Node("folder/cascading","1.css","folder"); 
var node2=new Node("folder/cascading","2.css","folder"); 
var childArray=[]; 
childArray.push(node1); 

childArray.push(node2); 
var parentNode1=new Node("folder","cascading","folder",childArray);

我想这种结构适用于UL的嵌套层次的和李的这里节点是很常见的父母儿童。父节点有子节点作为一个额外的属性

希望它可以帮助

来源

2016-10-22 21:16:20 Geeky

谢谢你的帮助，我可以提取一个想法，感谢您的代码;） – Barilo

如果它帮助你在任何方面......考虑接受答案 – Geeky

继承JavaScript对象

回答

相关问题