yast another dom unverstäandniss - wieso hat das kind keinen inhalt?

[yadu]

hi,
ich hab hier die erste zelle einer tabelle:

<td class="tw"><div id="g0" class="g">A<span id="v0" class="v">a</span></div></td>

var table = document.getElementById ( "my_table_id" ); 
var row = table.rows [ 0 ];
var col = row.cells[0];
alert(col.firstChild.nodeName);
alert(col.firstChild.nodeValue);

ergibt die ausgabe

DIV
null

in dem div steht aber offensichtlich ein A drin, wieso wird null ausgegeben?
wo ist da mein denkfehler?

[SG1]

Das div hat 2 Kinder. Einen TextNode und das span. Ersteres hat als nodeValue dann das a.

[SideWinder]

SG1 schrieb:

Das div hat 2 Kinder. Einen TextNode und das span. Ersteres hat als nodeValue dann das a.

Du meinst 'A'

Und: https://developer.mozilla.org/en/nodeValue

MfG SideWinder

[yadu]

dann müsste doch
col.firstChild.nodeValue
das A ausgeben oda net?

[SideWinder]

Nein. col.firstChild ist das div, das div ist ein Element und dessen nodeValue ist null. Siehe Link.

col.firstChild.firstChild.nodeValue sollte aber 'A' liefern imho.

MfG SideWinder

[SG1]

col ist das td
col.firstChild ist das div
col.firstChild.firstChild ist das "A"
Du willst also col.firstChild.firstChild.nodeValue.

edit: zu langsam...

[yadu]

aaah! krass! ok, jetzt hats geklingelt!
vielen dank!

[Shade Of Mine]

Ich empfehle ein Framework ala jQuery zu verwenden. Damit entfallen solche Probleme automatisch.

Ansonsten: http://www.brainjar.com/dhtml/domviewer/demo.html
Damit kannst du dir recht simpel den DOM Tree ausgeben lassen. So entfallen solche Probleme auch

Oder natuerlich direkt in der JavaScript Konsole im Browser arbeiten. Das erleichtert auch vieles.

[yadu]

ich möchte die inhalte dynamisch ändern und auch löschen. bin am fummeln und probieren aber iwie funzt das net.

[Shade Of Mine]

yadu schrieb:

ich möchte die inhalte dynamisch ändern und auch löschen. bin am fummeln und probieren aber iwie funzt das net.

Was ist denn dein Ziel?
Dich mit dem DOM Tree rumzuspielen? Dann schau dir den DOM Viewer an den ich in meinem letzten Post verlinkt habe. Und gewöhn dir an in der JavaScript Konsole zu arbeiten.

Wenn du aber arbeit weiter bringen willst, dann schau dir jQuery und die Selektoren an. Damit ist die DOM bearbeitung trivial.

[yadu]

Shade Of Mine schrieb:

Was ist denn dein Ziel?
Dich mit dem DOM Tree rumzuspielen? Dann schau dir den DOM Viewer an den ich in meinem letzten Post verlinkt habe. Und gewöhn dir an in der JavaScript Konsole zu arbeiten.

Wenn du aber arbeit weiter bringen willst, dann schau dir jQuery und die Selektoren an. Damit ist die DOM bearbeitung trivial.

das ziel ist es textknoten zu erstellen, einzufügen, verändern und wieder zu löschen. jquery möchte ich zurzeit nicht benutzen, der dom viewer könnte ne gute hilfe sein. auf der verlinkten seiten habe ich aber keine downloadmöglichkeit gefunden, ich werd mich mal nach nem plugin für den firefox umsehen.
jetzt aber noch einmal zum ziel, ich hab ne tabellen-zelle, zum üben gleich die erste der besagten tabelle:

<td><div><span></span></div></td>

das ziel: einfügen von textknoten. das gewünschte ergebnis:

<td><div>A<span>a</span></div></td>

was ich bisher versucht habe ist:

var table = document.getElementById ( "my_tab_id" ); 
var row = table.rows [ 0 ];
var col = row.cells [ 0 ];
var elem = col.firstChild;

if ( elem.nodeName == "DIV" && elem.firstChild.nodeName == "SPAN" )
{
	alert ( elem.nodeName == "DIV" && elem.firstChild.nodeName == "SPAN" ); // my debug output :)
	var span_text = document.createTextNode ( "A" );
	var div_text = document.createTextNode ( "a" );
	elem.appendChild(span_text);
	elem.firstChild.appendChild(div_text);
}

dummerweise steht jetzt das kleine a vor dem großen A. es soll aber genau andersrum sein. iwie mach ich da noch was falsch. bloß was?

[yadu]

so funzt das:

var div_text = document.createTextNode ( "A" );
	var span_text = document.createTextNode ( "a" );
	elem.insertBefore(div_text, elem.firstChild);
	elem.firstChild.nextSibling.appendChild(span_text);

jetzt muss man die knoten wieder löschen können. da werd ich auch noch meine freude mit haben. iwie ganz schön umständlich dieses dom zeugs naja.

[Shade Of Mine]

yadu schrieb:

iwie ganz schön umständlich dieses dom zeugs naja.

deshalb verwendet es ja auch niemand. Gerade das einfügen und löschen ist kompliziert.

idR macht man es dann so, dass man komplette bäume einhängt und aushängt. Und nicht so klein klein rum bastelt.

[yadu]

das klein rumbasteln muss sein. das wird nämlich mal ein spiel, wenns fertig ist.
da muss man dann buchstaben einfügen und wieder löschen können.

[Shade Of Mine]

yadu schrieb:

das klein rumbasteln muss sein. das wird nämlich mal ein spiel, wenns fertig ist.
da muss man dann buchstaben einfügen und wieder löschen können.

mit jQuery und konsorten hast du sowas in 5 Minuten fertig gebaut

Bedenke auch, dass jedes ändern des DOM Trees den Browser dazu zwingt den kompletten DOM Tree neu zu layouten. Du solltest also so wenig Änderungen wie möglich machen. Wie gesagt: normalerweise arbeitet man deshalb mit kompletten Subtrees.

Oft ist auch innerHTML viel besser - ist viel einfacher und schneller als einen ganzen DOM Subtree aufzubauen.

zB wenn wir ein Wort haben und wenn ich a Drücke verschwinden alle As aus dem Wort, würde man das so bauen, dass das Wort bei einem Druck auf a komplett aus dem DOM Tree ausgehängt wird und komplett neu erstellt wird. Vermutlich würde ich das dann sogar über innerHTML machen.

[yadu]

in 5 minuten, mag sein, wenn man sich erstmal auskennt. das benötigt aber auch eine gewisse einarbeitungszeit.
mit innerHTML hab ich es auch schon versucht. nicht weil ich wusste, das es effektiver ist, sondern weil es mir einfacher erschien, aber das hat iwie nicht gefunzt. das ganze enthält nämlich noch diverse css klassen, die ich hier zwecks vereinfachung weggelasen habe. vllt. sollte ich es dennoch noch einmal mit innerHTML versuchen.

das soll eine art scrabble spiel werden.
die tabelle ist 15*15 zellen groß und jede zelle hat den gleichen aufbau

<td><div>A<span>a</span></div></td>

meist wird dann die komplette div sequenz ausgetauchst werden also
dann steht da

<td><div>B<span>b</span></div></td>

oder

<td><div>X<span>x</span></div></td>

usw.
du meinst, es wäre effektiver, die komplette div sequenz separat zu generieren und dann mit innerHTML ans td element dran zu hängen? das erschien mir instinktiv eher nicht so, aber naja, ich hab auch keinen plan wie das intern gerendert wird uns so...
für tipps wie man sowas besser machen kann ( kein jquery :)) hab ich große offene ohren.

[SideWinder]

Du gehst überhaupt nicht auf DIE Empfehlung hier ein. Was spricht gegen den Einsatz von jQuery?

MfG SideWinder

[yadu]

SideWinder schrieb:

Du gehst überhaupt nicht auf DIE Empfehlung hier ein. Was spricht gegen den Einsatz von jQuery?

MfG SideWinder

doch, da bin ich schon mehrmals drauf eingegangen. dagegen spricht die einarbeitungszeit. ich habe damit noch nie was gemacht.
jetzt, wo ich mein ziel erreicht habe, wozu noch jquery?

[Shade Of Mine]

yadu schrieb:

in 5 minuten, mag sein, wenn man sich erstmal auskennt. das benötigt aber auch eine gewisse einarbeitungszeit.

Ja, etwa 10 Minuten. Es ist trvial.

für tipps wie man sowas besser machen kann ( kein jquery :)) hab ich große offene ohren.

Gib jeder td eine ID. zB Y_X also 0_0 für das erste Elemente, 0_1 für das 2. etc.
Dann kannst du ganz trivial über
document.getElementById(x+'_'+y).innerHTML = '<div>X<span>x</span></div>';
den Inhalt setzen.

Über jQuery wäre es zB trivial zu dem Element über .data() noch zusätliche Infos zu setzen. So dass zB $('#'+x+'_'+y).data('key') dann in diesem Fall zB x wäre.

[yadu]

mit innerHTML habe ich es noch einmal versucht. damit geht komplett die css formatierung flöten.
bleibt wohl doch nur die node hangelei.