Problem Javascript submenu *solved*

Tuxist

Moin,

das Menu was ich mit javascript gebaut habe geht soweit, habe nur ein problem
getElementsByTagName zieht auch die child elemente aus alles ebenen. Git es eine
Funktion die nur auf die oberste ebene zugreift ?

navbar.js

function Navbar() {
  var navbarXml;
  var Path;
  var Container;

  this.setPath=function(path){
    Path=path;  
  }

  this.setContainer=function(container){
    Container=container;
  }

  this.ReadXml = function(){
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET",Path,false);
    xmlhttp.send();
    var xmlDoc=xmlhttp.responseXML; 
    navbarXml=xmlDoc.getElementsByTagName("navbar"); 
  };

  this.Display = function(){
    this.ReadXml();
    document.getElementById(Container).innerHTML=this.drawMenu(navbarXml[0]);
  };

  this.drawMenu = function(xmldat){
    var tmp="<ul class=\"navbar\">";
    for (var i = 0; i < xmldat.getElementsByTagName("link").length; i++){
      var link = xmldat.getElementsByTagName("link")[i];
      tmp+="<li><a href=\""+link.getAttribute("url")+"\" >"+link.getAttribute("name")+"</a>";
      if(link.hasChildNodes()){
        tmp+="<ul>";
        this.drawMenu(link.getElementsByTagName("link")[i]);
        tmp+="</ul>";
      }
      tmp+="</li>";
    }
    return tmp+"</ul>";    
  }
}

navbar.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<navbar>
  <link name="Git" url="http://git.tuxist.de" />
  <link name="Blog" url="http://tuxist.de/blog" />
  <link name="Projects" url="" >
    <link name="Amiga" url="http://tuxist.de/amiga" />
    <link name="Intel Classmate" url="http://tuxist.de/classmate" />
    <link name="JuliaDB" url="http://tuxist.de/juliadb"/>
    <link name="Schnack" url="http://tuxist.de/schnack"/>
  </link>
  <link name="Bilder" url="http://tuxist.de/pictures" />
  <link name="Mumble" url="https://mumble.tuxist.de" />
  <login authserver="https://tuxist/auth" />
</navbar>

Shade Of Mine

Tuxist schrieb:

Moin,

das Menu was ich mit javascript gebaut habe geht soweit, habe nur ein problem
getElementsByTagName zieht auch die child elemente aus alles ebenen. Git es eine
Funktion die nur auf die oberste ebene zugreift ?

Nein. Du kannst nur händisch durchgehen und eben nicht getElementsByTagName verwenden sondern zB über klassen gehen oder händisch die Elemente durchgehen.

Ich möchte nur mal kurz anmerken, dass das was du tust ne furchtbar schlechte Idee ist.

PRIEST

Die Angabe wo es hakt ist mir leider zu Ungenau.

var node = document.getElementByTagName("navbar").getElementsByTagName("link");

dann drüber "schlefen". Habs nicht getestet. Könnte funktionieren.

Shade Of Mine

PRIEST schrieb:

Die Angabe wo es hakt ist mir leider zu Ungenau.

er hat verschachtelte Elemente und getElementsByTagname liefert natürlich alle Elemente mit dem Tag und achtet nicht auf die Tiefe.

Tuxist

habe die Lösung falls es jemanden interessiert:

function Navbar() {
  var navbarXml;
  var Path;
  var Container;

  this.setPath=function(path){
    Path=path;  
  }

  this.setContainer=function(container){
    Container=container;
  }

  this.ReadXml = function(){
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET",Path,false);
    xmlhttp.send();
    var xmlDoc=xmlhttp.responseXML; 
    navbarXml=xmlDoc.documentElement;
  };

  this.Display = function(){
    this.ReadXml();
    document.getElementById(Container).innerHTML=this.drawMenu(navbarXml);
  };

  this.drawMenu = function(xmldat){
    var html = "<ul class=\"navbar\">";
    for(var i=0; i<xmldat.childNodes.length; i++){
      if(xmldat.childNodes[i].nodeName=='link'){
        html+="<li><a href=\"";
        if(xmldat.childNodes[i].getAttribute("url")){
          html+=xmldat.childNodes[i].getAttribute("url");
        }else{
          html+="#";
        }
        html+="\" >"+xmldat.childNodes[i].getAttribute("name")+"</a>";
        if(xmldat.childNodes[i].hasChildNodes()){
          html+=this.drawMenu(xmldat.childNodes[i]);
        }
        html +="</li>";
      }
    }
    html+="</ul>";
    return html;
  }
}