繼承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對象

回答

相關問題