GELight: HTML Tags selektieren...

Hallo alle zusammen,

Nachdem ich jetzt über meinen letzten Post wieder etwas schlauer geworden bin, stehe ich nun vor einem größeren Problem.

Nachdem ich nun weiß, das ich mit getAttribute(); beliebige Attribute meines HTML Tags auslesen lassen kann, stehe ich nun vor volgendem Problem.

Ich habe eine komplette HTML Seite auf dem Schirm und brauche die Möglichkeit die Elemente zu selektieren. Sprich: Ich klicke in die Seite und die Funktion soll mir von dem Element, welches geklickt wurde, einen oder mehrere Attribute zurück geben. Es müsste in sofern ja abgefragt werden, welches Tag gerade unter der Maus liegt und falls es verschachtelte Tags sind ( zB: Textfeld in einem DIV ), so muss er davon wieder nur den höchsten nehmen. Und nicht alle, die unter der Maus liegen.

Ich nutze zur zeit ganz rudimentär Ajax-"prototype" für ein paar andere Dinge.
Habt ihr eine Idee oder gibts eventuell sogar schon solche Funktionen in diesem Framework, welche ich nutzen könnte?

Hoffe es war verständlich... :)

Gruß Mario

  1. Hallo,

    vielleicht setzt du in den Elementen das onclick-event. Das ruft dann die Funktion aus der du als parameter den namen/die id des elementes übergibst.

    MfG. Christoph

    --
    Wo die Sprache aufhört, fängt die Musik an...
    Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
    Go to this
    1. Hallo Christoph,

      Ja den Gedanken hatte ich auch schon und habe ich zum Test auch schon umgesetzt. Leider kann ich so nicht vorgehen... Und ich möchte es eigentlich auch nicht, weil ich nicht gefahr laufen möchte, dass ein User später eine Function per onclick anlegt, die mein System schon in das Event schreibt.
      Zudem würde dadurch bei vielen Tags der Code sehr stark aufgebläht. Und das möchte ich auch nicht. Daher ging mein Gedanke in die Richtung, dass diese Systemsache als globale Funktion angelegt wird, die das alles übernimmt, ohne das man den Code selbst verändern muss.

      Gruß Mario

  2. Hallo GELight,

    du erhältst mittels "getElementsByTagName("*")" Zugriff auf alle Tags einer Seite und kannst diesen dann einen Eventhandler geben:

    window.onload=function() {  
     var d=document.body.getElementsByTagName("*");  
     alert(d.length);  
     for(var i=0;i<d.length;i++)  
       d[i].onclick=function(){alert(this.id)};  
    }
    

    Wenn deine Tags evtl. schon onclick-Handler haben, würden diese so natürlich überschrieben. Um das zu vermeiden suche mal nach "addevent".

    Gruß, Jürgen

    1. Hallo,

      du erhältst mittels "getElementsByTagName("*")" Zugriff auf alle Tags einer Seite und kannst diesen dann einen Eventhandler geben

      Genau bei solchen Situationen sollte man vom Event-Bubbling Gebrauch machen, wie es Struppis Beispiel zeigt. Man kann alle im Dokument passierenden Events zentral beim body- oder html-Element überwachen, denn fast alle Events (jedenfalls onclick) steigen auf.
      (In W3C-konformen Browsern wäre auch Event-Capturing möglich, womit man ggf. sogar verhindern kann, dass Events bis zum Zielelement hinabsteigen und dort bzw. in der Bubbling-Phase Event-Handler auslösen.)

      Mathias

      1. Hallo molily,

        du hast Recht und ich bin etwas klüger geworden.

        Gruß, Jürgen

    2. Hi Molily,

      Ich habe ben das Script von Struppi getestet und es macht 100% das, wass ich gebraucht habe. Aber auf deine Variante möchte ich dennoch mal zu sprechen kommen.

      Wenn ich deine Variante richtig verstehe, dann läufst du permanent alle bestehenden Tags anhand dessen "TagName" durch und fügst förmlich für jedes Tag einen oonClick Handler hinzu... oder?
      Würde das nicht extrem langsam werden, wenn es mal richtig viele Tags später sind?

      Gruß Mario

      1. Hallo GELight,

        Ich habe ben das Script von Struppi getestet und es macht 100% das, wass ich gebraucht habe.

        ist auch besser als meine Idee.

        Aber auf deine Variante möchte ich dennoch mal zu sprechen kommen.

        Wenn ich deine Variante richtig verstehe, dann läufst du permanent alle bestehenden Tags anhand dessen "TagName" durch und fügst förmlich für jedes Tag einen oonClick Handler hinzu... oder?

        So ist es.

        Würde das nicht extrem langsam werden, wenn es mal richtig viele Tags später sind?

        Was verstehst du unter "viel"? Bei ca. 100 Tags wird es wohl nicht so langsam sein, bei einigen 10000 schon. Ich habe das aber nicht getestet. Man muss auch noch zwischen dem einmaligen Einrichten der Events und deren Abarbeitung unterscheiden. Wie Browser reagieren, wenn sie extrem viele Events verwalten müssen, weiß ich nicht.

        Gruß, Jürgen

      2. Wenn ich deine Variante richtig verstehe, dann läufst du permanent alle bestehenden Tags anhand dessen "TagName" durch und fügst förmlich für jedes Tag einen oonClick Handler hinzu... oder?
        Würde das nicht extrem langsam werden, wenn es mal richtig viele Tags später sind?

        auch wenn wir das gestern schon hatten: element ;)

        in sgml/html sind attribute (also auch eventhandler) nur in öffnenden tags der elemente oder in alleinstehenden bzw selbstschließenden elementen vorgesehen

        das jeweils schließende tag wird nicht beachtet - die funktion müsste getElementsByTagName ist hierbei etwas inkonsistent und müsste eigentlich getElemetnsByElementName heissen - wobei dies in reinem sgml etwas problematisch wäre, da das SHORTTAG-feature auch namenlose tags (bzw sogar elemente) erlaubt

        sowas zb, hier gibt es keinen elementnamen

        <elemente>  
          <>element1</>  
          <>element2</>  
          <>element3</>  
        </>
        ~~~ (anm: das ist NICHT html - ähnliche konstrukte sind aber unter gewissen voraussetzungen möglich, aber werden von kaum einem browser richtig interpretiert)
        
        1. Ich weiß jetzt nicht, wo ich am besten antworten soll, daher mach ichs einfach mal hier.

          Auf jeden Fall dank ich euch ganz dolle und werd mich mit den Lösungen etwas beschäftigen. Dann kann mein Wochenende ja beginnen.. .*freu*... ;)

          Gruß Mario

    3. Hallo,

      Zur Ergänzung:

      window.onload=function() {

      var d=document.body.getElementsByTagName("*");
      alert(d.length);
      for(var i=0;i<d.length;i++)
         d[i].onclick=function(){alert(this.id)};
      }

        
      Übrigens darf man auch bei dieser Lösung das Bubbling nicht völlig aus dem Auge verlieren. Angenommen, ich habe eine solche Elementstruktur:  
        
      <div><p><strong>Text</strong></p></div>  
        
      Wenn ich hier allen drei Elementen einen click-Handler gebe, dann werden bei einem Klick auf den Text auch gleich drei Handlerfunktionen ausgeführt. Das click-Ereignis passiert beim strong-Element und löst dort in der sog. Target-Phase den click-Handler aus. Dann steigt das Ereignis auf und in der sog. Bubbling-Phase werden auch die Handler des p- und des div-Elements ausgelöst.  
        
      Will man dieses Bubbling verhindern, müsste man zumindest eventobjekt.stopPropagation() aufrufen (W3C-konforme Browser) bzw. eventobjekt.cancelBubble = true setzen (MSIE).  
        
      Mathias
      
      -- 
      [SELFHTML aktuell Weblog](http://aktuell.de.selfhtml.org/weblog/)
      
      1. Hallo molily,

        <div><p><strong>Text</strong></p></div>

        an diesen Fall habe ich schon gedacht. Wie er zu behandeln ist, muss sich aber GELight passend zu seiner Aufgabenstellung überlegen. Denn alle drei Elemente können Attribute haben, die von Interesse sind.

        Gruß, Jürgen

  3. Ich habe eine komplette HTML Seite auf dem Schirm und brauche die Möglichkeit die Elemente zu selektieren. Sprich: Ich klicke in die Seite und die Funktion soll mir von dem Element, welches geklickt wurde, einen oder mehrere Attribute zurück geben. Es müsste in sofern ja abgefragt werden, welches Tag gerade unter der Maus liegt und falls es verschachtelte Tags sind ( zB: Textfeld in einem DIV ), so muss er davon wieder nur den höchsten nehmen. Und nicht alle, die unter der Maus liegen.

    document.onclick = function(e) {  
    if(!e) e = window.event;  
    var obj = e.target ? e.target : e.srcElement ? e.srcElement : null;  
    alert(obj.tagName);  
    }
    

    Struppi.

    1. Hi Struppi,

      Vielen vielen Dank... das funktioniert ja wunderbar.
      Ich hätte glaub ich sonstwas probiert aber die 3 Zeilen... uff...

      Ich muss gestehen, dass ich die Zeile ...var obj =.... nicht 100% verstehe.
      Die Schreibweise ist mir nicht so geläufig.
      Was genau übergibt er eigentlich wie?

      Gruß Mario

      1. Ich muss gestehen, dass ich die Zeile ...var obj =.... nicht 100% verstehe.

        das ist nur die trinäre schreibweise für eine bedingte verzweigung (if)

        funktioniert prinzipiell in c-ähnlichen sprachen nach folgendem schema
        variable = bedingung ? then-zweig : else-zweig

        ist kurz und spart code, ist aber imho schwer zu lesen und zu debuggen

        1. Hallo suit,

          ist kurz und spart code, ist aber imho schwer zu lesen und zu debuggen

          die "? :"-Notation ist überhaupt mit dafür verantwortlich, dass es C gibt. In den Vorläufern von C war sie u.A. noch nicht enthalten. Die Vorläufer von C wurden verworfen, da sie syntaktisch zu einfach waren. Erst mit C wurde eine (Un-)Übersichtlichkeit erreicht, die die Basis vieler langwieriger und oft auch vergeblicher Debugläufe wurde.

          Gruß, Jürgen

          PS <http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=Einfache(!) Entweder-Oder-Abfrage>