Falk: DOM Verständnisproblem

Hallo,

ich habe eine Tabelle nach diesem Muster

<table>
 <tr>
   <th colspan="2">text</th>
 </tr>
 <tr>
  <td>text</td>
  <td class="kursiv">text</td>
 </tr>
 <tr>
  <td>text</td>
  <td class="kursiv">text</td>
 </tr>
</table>

Mit javascript greife ich auf die tr Elemente zu:

var row = document.getElementsByTagName('tr');

for (var i=0; i<row.length; i++){
alert(row[i].firstChild.nodeName);
}

Der IE6 zeigt mir nun den nodeName (td oder th). FF zeigt #text.

Wenn ich schreibe :

for (var i=0; i<row.length; i++){
alert(row[i].firstChild.nextSibling.nodeName);
}

Zeigt mir FF den nodeName (td oder th), der IE6 bringt eine Fehlermeldung.

Warum ist das so unterschiedlich?? Ich dachte firstChild von einer tr ist eine td oder th in meinem Fall. Wo liegt da der Denkfehler?

Gruß

Falk

  1. Hellihello

    hilft dir das http://forum.de.selfhtml.org/archiv/2007/5/t152368/#m991094?

    Dank und Gruß,

    frankx

    --
    tryin to multitain  - Globus = Planet != Welt
    1. Alles klar :-)

      Hab die Leerzeichen und den Umbruch rausgeschmissen, nun ist alles so wie es sein soll.

      Vielen Dank!

      1. Hab die Leerzeichen und den Umbruch rausgeschmissen, nun ist alles so wie es sein soll.

        Warum verwendest du nicht einfach
        rows des table Objektes und dort jeweils die Eigenschaft cells ?
        Dann kannst du weiterhin deinen HTML Code so formatieren wie es dir Spaß macht und musst nicht darauf achtern, dass ja kein Leerzeichen  o.ä. dazwischen kommt.

        Struppi.

        1. Warum verwendest du nicht einfach
          rows des table Objektes und dort jeweils die Eigenschaft cells ?

          Ehrlich gesagt, weiß ich nicht wie ich da genau drauf zugreifen soll, muss ich mich mal mit beschäftigen.

          Ich will ja einen Wechsel der Farbe und Hintergrundfarbe in den rows erreichen wenn ich mit der mouse klicke oder drüber fahre und zwar nur in den rows die keine th enthalten.
          hier das Skript:

          function colorHover() {
           var row = document.getElementsByTagName('tr');
           for (var i=0; i<row.length; i++){
           if(row[i].firstChild.nodeName != 'TH'){
            row[i].onmouseover = colorOver;
            row[i].onmouseout = colorOut;
            row[i].onclick = colorClick;
           }
           }
          }

          Das funktioniert nun einwandfrei. Aber wenns eleganter geht bin ich für jeden Tipp dankbar.

          Gruß
          Falk

          1. Ich will ja einen Wechsel der Farbe und Hintergrundfarbe in den rows erreichen wenn ich mit der mouse klicke oder drüber fahre und zwar nur in den rows die keine th enthalten.
            hier das Skript:

            function colorHover() {
            var row = document.getElementsByTagName('tr');
            for (var i=0; i<row.length; i++){
            if(row[i].firstChild.nodeName != 'TH'){

            Allgemeingültiger wäre:

            if(!row[i].getElementsByTagName('th')[0]){

            Struppi.

            1. Allgemeingültiger wäre:

              if(!row[i].getElementsByTagName('th')[0]){

              Vielen Dank, werde ich mal ausprobieren.

              Grüße
              Falk

        2. Hallo,

          Warum verwendest du nicht einfach
          rows des table Objektes und dort jeweils die Eigenschaft cells ?

          Hey super, das kommt mir wie gerufen!
          Stehe nämlich auch gerade vor der Aufgabe, ganze Tabellen dynamisch zu erzeugen und zu bearbeiten. Dachte auch an allgemeine node-Objekte wie firstChild etc., aber die speziellen HTML-Elemente als DOM-Objekte sind anscheinend wirklich bequemer.

          Danke und Gruß, Don P

          1. Hi,

            Hey super, das kommt mir wie gerufen!
            Stehe nämlich auch gerade vor der Aufgabe, ganze Tabellen dynamisch zu erzeugen und zu bearbeiten. Dachte auch an allgemeine node-Objekte wie firstChild etc., aber die speziellen HTML-Elemente als DOM-Objekte sind anscheinend wirklich bequemer.

            Dann mag dich vielleicht auch folgender Artikel interessieren:
            Dynamic HTML Tables: Improving Performance

            Schon erstaunlich, wie unterschiedlich die Browser teilweise auf die diversen Ansaetze reagieren ...

            MfG ChrisB

            1. Hallo,

              Dann mag dich vielleicht auch folgender Artikel interessieren:
              Dynamic HTML Tables: Improving Performance

              Schon erstaunlich, wie unterschiedlich die Browser teilweise auf die diversen Ansaetze reagieren ...

              Wow, ja. Vielen Dank.

              Der Artikel ist ziemlich ernüchternd. Am besten geht es demnach, wenn man das ganze Tabellen-HTML mitsamt Inhalt als String zusammensetzt und dann als innerHTML einem Container zuordnet. Back to the roots, wirklich nicht sehr elegant, aber performant...

              Dazu fällt mir nur ein Vergleich mit der Baubranche ein: Statt ein Haus zu sanieren oder an Ort und Stelle aufzubauen, baut man es einfach in einer Fabrik (neu) zusammen und stellt es komplett per Helikopter am Zielort ab, naja...

              Gruß, Don P

  2. <tr>
       <th colspan="2">text</th>

    firstChild von tr ist in diesem Fall der Zeilenumbruch und die Leerzeichen im Quelltext.

  3. <table>
    <tr>
       <th colspan="2">text</th>

    alert(row[i].firstChild.nodeName);

    Der IE6 zeigt mir nun den nodeName (td oder th). FF zeigt #text.

    Warum ist das so unterschiedlich?

    Du hast nach <tr> einen Zeilenumbruch und drei Leerzeichen, die zeigt dir Firefox brav als Textknoten an. Der IE ignoriert sie. Man kann sich vermutlich darüber streiten, was richtiger ist, konkret bedeutet es nur, dass du, wenn du nach Fallobst suchst, tunlichst auch nach Fallobst Ausschau hältst und nicht nach Objekten, die um einen Obstbaum herum liegen.