JavaScriptオブジェクトを使用した継承

Question

"ul"タグと "li"タグを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> 

そして、私は最も深い "LI" は、このような私の物で最も深い子になるという希望：

{ 
    "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）; ）私のコンソール

Answer 1

であなたは、私が

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のとLiの のために働くと思うと、ここでノードは、親のために一般的であり、子供。 親ノードが追加のプロパティとして子ノードを持つことになります

は、それが