Paul: JS DOM

Moin,
ich habe eine tabelle:

<table>  
 <tr>  
  <td>a</td><td onmouseover="this.parentNode.firthChild.style.color='#FF0000';">b</td>  
 </tr>  
</table>

Nun möchte ich beim Überfahren des zweiten td's den Inhalt des Ersten td's rot darstellen. Nur leider läuft'S so nicht. Wie lautet das onmouseover um dies zu tun?

Danke,
Paul

  1. Moin,
    ich habe eine tabelle:

    <table>

    <tr>
      <td>a</td><td onmouseover="this.parentNode.firthChild.style.color='#FF0000';">b</td>
    </tr>
    </table>

      
    Tippfehler  
    firthChild sollte firstChild lauten
    
  2. [latex]Mae  govannen![/latex]

    Moin,
    ich habe eine tabelle:

    <table>

    <tr>
      <td>a</td><td onmouseover="this.parentNode.firthChild.style.color='#FF0000';">b</td>
    </tr>
    </table>

    
    >   
    > Nun möchte ich beim Überfahren des zweiten td's den Inhalt des Ersten td's rot darstellen. Nur leider läuft'S so nicht. Wie lautet das onmouseover um dies zu tun?  
      
    Nehmen wir erst einmal auseinander:  
      
    
    > this.  
      
    ist das td-Element mit dem Eventhanbdler. Soweit richtig.  
      
    
    > parentNode  
      
    ist das tr-Element. soweit auch richtig  
      
    
    >firthChild  
      
    ist der Zeilenumbruch hinter dem öffnenden tr-tag (Außer im IE)  
      
      
    Also entweder alles ohne Zeilenumbrüche notieren oder aber das erste td-Element per this.parentNode.getElementsByTagName('td')[0] einfangen. Gibt zwar noch weitere Möglichkeiten, aber das sollte es tun.  
      
    Stur lächeln und winken, Männer!  
    Kai
    
    -- 
    Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken  
    in Richtung "Mess up the Web".([suit](https://forum.selfhtml.org/?t=197497&m=1324775))  
    [SelfHTML-Forum-Stylesheet](http://selfhtml.knrs.de/#h_stylesheet)
    
    1. ... Element per this.parentNode.getElementsByTagName('td')[0] einfangen.

      Super, läuft!

      Aber ich bin zu blöd.
      Was mache ich wenn meine tabelle nun wie folgt aussieht:

      <table>  
       <tr>  
        <td><a href='...'>a</a></td><td onmouseover="this.parentNode.getElementsByTagName("td")[0].style.color='#FF0000';">b</td>  
       </tr>  
      </table>
      
      1. Was mache ich wenn meine tabelle nun wie folgt aussieht:

        <table>

        <tr>
          <td><a href='...'>a</a></td><td onmouseover="this.parentNode.getElementsByTagName("td")[0].style.color='#FF0000';">b</td>
        </tr>
        </table>

          
        Nun  
        ~~~javascript
          
        this.parentNode.getElementsByTagName('td')[0].firstChild.style.color='#FF0000';  
        
        
        1. Ok, da ich dort eigentlich auch Zeilenumbrüche drin hab, läuft es mit:

          this.parentNode.getElementsByTagName('td')[0].getElementByTagName('a')[0].style.color='#FF0000';  
          
          

          Kann man das ganze nicht auch eleganter per css lösen?

          1. [latex]Mae  govannen![/latex]

            Ok, da ich dort eigentlich auch Zeilenumbrüche drin hab, läuft es mit:

            this.parentNode.getElementsByTagName('td')[0].getElementByTagName('a')[0].style.color='#FF0000';

            
            >   
            > Kann man das ganze nicht auch eleganter per css lösen?  
              
            Klar. z.B. indem man dem parentNode beim Event einen Klassen-Namen zusweist. (.className)  
              
            Dann kannst du einfach fest im CSS  
              
            ~~~css
            td a {  
               color: black  
            }  
              
            td.foo a {  
              color: red;  
            }
            

            schreiben. Gegebenenfalls noch per Kombinator auf des erste Element einschränken

            Dies Vorgehensweise ist meist ohnehin besser als das gefummel per .style

            Stur lächeln und winken, Männer!
            Kai

            --
            Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
            in Richtung "Mess up the Web".(suit)
            SelfHTML-Forum-Stylesheet
            1. [latex]Mae  govannen![/latex]

              td a {

              color: black
              }

              td.foo a {
                color: red;
              }

              
              >   
              > schreiben.  
                
              FALSCH! BLÖDSINN! BULLSHIT!  
                
              td a  
              .foo td a  
                
              natürlich  
                
              Stur lächeln und winken, Männer!  
              Kai
              
              -- 
              Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken  
              in Richtung "Mess up the Web".([suit](https://forum.selfhtml.org/?t=197497&m=1324775))  
              [SelfHTML-Forum-Stylesheet](http://selfhtml.knrs.de/#h_stylesheet)
              
              1. Gut gut.

                So wird's gemacht.

        2. [latex]Mae  govannen![/latex]

          Was mache ich wenn meine tabelle nun wie folgt aussieht:

          <table>

          <tr>
            <td><a href='...'>a</a></td><td onmouseover="this.parentNode.getElementsByTagName("td")[0].style.color='#FF0000';">b</td>
          </tr>
          </table>

          
          >   
          > Nun  
          > ~~~javascript
            
          
          > this.parentNode.getElementsByTagName('td')[0].firstChild.style.color='#FF0000';  
          > 
          
          

          Und wenn er irgendwann mal auf die Idee kommt, es als

          <table>  
            <tr>  
               <td>  
                  <a href='...'>a</a>  
               </td>  
               <td onmouseover="this.parentNode.getElementsByTagName("td")[0].style.color='#FF0000';">  
                 b  
               </td>  
            </tr>  
          </table>
          

          zu schreiben, schlägt es wieder fehl, weil dann wieder der Zeilenumbruch das Zielelememnt wird.

          Ich persönlich habe mich im Großen und Ganzen völlig von Dingen wie firstChild, lastchild usw. verabschiedet, weil man dann bei Quelltext-Änderungen fast grundsätzlich auf die Nase fällt.

          Ich werde auch nie verstehen, weshalb man die Whitespace-Knoten überhaupt im DOM-Baum hat, man kann per JS quasi nie etwas damit anfangen. Sie nerven einfach nur und man muß, um sicher zu sein, jedes Mal (z.B. per nodeType) testen.

          Stur lächeln und winken, Männer!
          Kai

          --
          Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
          in Richtung "Mess up the Web".(suit)
          SelfHTML-Forum-Stylesheet
          1. Lieber Kai345,

            Ich werde auch nie verstehen, weshalb man die Whitespace-Knoten überhaupt im DOM-Baum hat, man kann per JS quasi nie etwas damit anfangen. Sie nerven einfach nur und man muß, um sicher zu sein, jedes Mal (z.B. per nodeType) testen.

            es hat schon seinen Sinn, dass die Whitespaces als TextNode zwischen dem ParentNode und dem nächsten Elementknoten stehen. Stelle Dir einfach vor, Du wolltest "den Textknoten vor dem Elementknoten" ändern. Im IE gibt es ihn noch nicht, in standardkonformen Browsern dagegen schon. Im IE müsstest Du nun eine neue TextNode erzeugen und vor den Elementknoten hängen, in den echten Browsern bräuchtest Du nur die Daten des bereits vorhandenen Textknoten verändern.

            Liebe Grüße,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
            1. [latex]Mae  govannen![/latex]

              Lieber Kai345,

              Ich werde auch nie verstehen, weshalb man die Whitespace-Knoten überhaupt im DOM-Baum hat, man kann per JS quasi nie etwas damit anfangen. Sie nerven einfach nur und man muß, um sicher zu sein, jedes Mal (z.B. per nodeType) testen.

              es hat schon seinen Sinn, dass die Whitespaces als TextNode zwischen dem ParentNode und dem nächsten Elementknoten stehen. Stelle Dir einfach vor, Du wolltest "den Textknoten vor dem Elementknoten" ändern. Im IE gibt es ihn noch nicht, in standardkonformen Browsern dagegen schon. Im IE müsstest Du nun eine neue TextNode erzeugen und vor den Elementknoten hängen, in den echten Browsern bräuchtest Du nur die Daten des bereits vorhandenen Textknoten verändern.

              Ok.

              Aber: Da man IE ohenhin beachten muß, hat man in der Praxis keinen Vorteil. Und bevor ich dann wieder mit Fall-Abfragen anfange, ob oder ob nicht und wenn ja, wie, erzeuge ich halt für alle Browser einen Textknoten und hänge ihn ein.

              Stur lächeln und winken, Männer!
              Kai

              P.S. Es nervt, daß der Großbuchstaben-Betreff-Bug in der Forensoftware immer noch da ist.

              --
              Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
              in Richtung "Mess up the Web".(suit)
              SelfHTML-Forum-Stylesheet
            2. Hallo Felix,

              es hat schon seinen Sinn, dass die Whitespaces als TextNode zwischen dem ParentNode und dem nächsten Elementknoten stehen. ...

              vor allem, wenn der Textknoten an einer Stelle steht, wo eigentlich nichts sein darf, z.B. zwischen </tr> und <td>.

              Ich verzichte auch auf die Verwendung von firstChild, childNodes etc., weil die Nachteile meistens überwiegen und es Alternativen gibt.

              Gruß, Jürgen

              1. Hi,

                vor allem, wenn der Textknoten an einer Stelle steht, wo eigentlich nichts sein darf, z.B. zwischen </tr> und <td>.

                Zwischen </tr> und <td> muß aber etwas sein. Z.B. ein <tr>. Oder noch viel mehr ...

                ;-)

                cu,
                Andreas

                --
                Warum nennt sich Andreas hier MudGuard?
                O o ostern ...
                Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
                1. Hallo MudGuard,

                  Zwischen </tr> und <td> muß aber etwas sein. Z.B. ein <tr>. Oder noch viel mehr ...

                  ich meine auch zwischen </tr> und <tr> oder </td> und <td>. Machmal wünsche ich mir eine Edit-Funktion.

                  Gruß, Jürgen

                  1. Hi,

                    ich meine auch zwischen </tr> und <tr>

                    da könnte aber auch einiges dazwischenstehen.
                    z.B. </thead><tbody> oder <tr><td>bla</td></tr> ;-)

                    oder </td> und <td>.

                    da könnte z.B. </tr><tr> dazwischenstehen ;-)

                    Machmal wünsche ich mir eine Edit-Funktion.

                    um einen Fehler durch einen besseren Fehler zu ersetzen? ;-)

                    cu,
                    Andreas

                    --
                    Warum nennt sich Andreas hier MudGuard?
                    O o ostern ...
                    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
                    1. Hallo MudGuard,

                      da könnte aber auch einiges dazwischenstehen.
                      z.B. </thead><tbody> oder <tr><td>bla</td></tr> ;-)

                      oder </td> und <td>.

                      da könnte z.B. </tr><tr> dazwischenstehen ;-)

                      das sind aber keine Textknoten, und um die ging es mir.

                      um einen Fehler durch einen besseren Fehler zu ersetzen? ;-)

                      nein.

                      Gruß, Jürgen

              2. Hallo,

                Ich verzichte auch auf die Verwendung von firstChild, childNodes etc., weil die Nachteile meistens überwiegen und es Alternativen gibt.

                Meines Wissens liefert die children-Auflistung nur Elementknoten, keine Text- oder Kommentarknoten.

                Statt javascriptchildNodes also besser javascriptchildren notieren, statt javascriptfirstchild besser javascriptchildren[0] usw., dann klappt's auch mit den Kindern ;)

                Gruß, Don P

                1. Lieber Don P,

                  Statt javascriptchildNodes also besser javascriptchildren notieren

                  mir ist diese Eigenschaft völlig neu. Eine erste kurze Recherche ergab folgendes:
                  * Element.children: Introduced in Gecko 1.9.1 (FF3.5)
                  * IE kennt sie auch, behauptet aber, sie entspäche keinem Standard.

                  Beim W3C konnte ich keinen Hinweis finden, dass <Node>.children eine standardisierte Eigenschaft wäre, zumindest steht im Node Interface keine Eigenschaft "children".

                  Liebe Grüße,

                  Felix Riesterer.

                  --
                  ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
                  1. Statt javascriptchildNodes also besser javascriptchildren notieren

                    mir ist diese Eigenschaft völlig neu.

                    Das ist ursprünglich eine IE-Erfindung, die andere Browserhersteller als nützlich empfanden und ebenfalls implementierten.
                    IE kann das m.W. seit Version 4, wo es nur document.all und Konsorten gab, noch nicht das heutige W3C-DOM.

                    Beim W3C konnte ich keinen Hinweis finden, dass <Node>.children eine standardisierte Eigenschaft wäre, zumindest steht im Node Interface keine Eigenschaft "children".

                    Siehe den aktuellen Editor's Draft:
                    http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-element-children

                    Außerdem ist hier http://www.w3.org/TR/2008/REC-ElementTraversal-20081222/ interessant, welches firstElementChild usw. definiert, also die sinnvolle Alternative zu firstChild, wenn man das erste Element sucht.

                    Mathias

                  2. Beim W3C konnte ich keinen Hinweis finden, dass <Node>.children eine standardisierte Eigenschaft wäre, zumindest steht im Node Interface keine Eigenschaft "children".

                    Du verlinkst aber praktischerweise schon auf den Working Draft, in dem children als <Element>.children spezifiziert werden soll. ;)

                    Auch interessant ist sind die Web-Travers ... ach scheiss drauf.

                    Siehe molily. ;)

            3. es hat schon seinen Sinn, dass die Whitespaces als TextNode zwischen dem ParentNode und dem nächsten Elementknoten stehen. Stelle Dir einfach vor, Du wolltest "den Textknoten vor dem Elementknoten" ändern. Im IE gibt es ihn noch nicht, in standardkonformen Browsern dagegen schon. Im IE müsstest Du nun eine neue TextNode erzeugen und vor den Elementknoten hängen, in den echten Browsern bräuchtest Du nur die Daten des bereits vorhandenen Textknoten verändern.

              Und wenn ich dort nun gerne ein Bild oder eine Überschrift oder ... einfügen möchte? Soll das auch alles als Dummy vorhanden sein um kein neues Element erzeugen zu müssen?
              Und mit standardkonform hat das erst mal nichts zu tun, da es dafür gerade keinen Standard gibt, bzw. dieser das explizit offen lässt.

      2. Hi,

        Was mache ich wenn meine tabelle nun wie folgt aussieht:

        Wie wär's in Punkto „machen“ mit „dir Gedanken“, nebst Beschäftigung mit den Grundlagen von DOM?

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?