JS DOM

[Paul]

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

[Georg]

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

[Kai345]

[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)

[Paul]

... 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>

[Georg]

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';  

[Paul]

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?

[Kai345]

[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

[Kai345]

[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)

[Paul]

Gut gut.

So wird's gemacht.

[Kai345]

[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

[Felix Riesterer]

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.

[Kai345]

[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.

[JürgenB]

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

[MudGuard]

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

[JürgenB]

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

[MudGuard]

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

[JürgenB]

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

[Don P]

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 childNodes also besser children notieren, statt firstchild besser children[0] usw., dann klappt's auch mit den Kindern ;)

Gruß, Don P

[Felix Riesterer]

Lieber Don P,

Statt childNodes also besser children 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.

[molily]

Statt childNodes also besser children 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

[Tim Tepaße]

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. ;)

[unknown]

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.

[ChrisB]

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