per DOM-2 zwei Attribute einhängen

[Chräcker Heller]

Hallo,

zuerst: ich bin in der Terminologie noch nicht ganz sattelfest ;-) also: ich habe im Body ein Div. In dieses möchte ich ein weiteres einhängen, das wiederum mit zwei Attributen versehen wird. (Und damit man was sieht, hänge ich auch noch einen Text mitten rein....)

ich habe es wie gleich folgt gemacht und habe folgende Probleme: der IE schaft nur ein Atrtribut (wenn ich also die andere Zuweisung aus dem Quelltext entferne), ansonsten "findet er einen Member nicht"... Der Opera läuft zwar durch, aber das zweite Attribut "onClick" nimmt er scheinbar nicht. Mozilla machts so, wie ich es mir dachte. Nun könnte ich natürlich die Stempelseite nur noch für den Mozilla öffnen, aber.... ;-)

Wo liegt mein Fehler? (Ach ja: das onClick nehme ich deswegen, weil der IE ja mit dem eventListener Probleme hat... freundlich ausgedrückt...)

Hier mein Script, das per onload aufgerufen wird...

<script type="text/javascript">
<!--
function init(){
  neuesdiv=document.createElement("div");
  erstesattribut = document.createAttribute("style");
  erstesattribut.nodeValue = "position:absolute; top:20px; left:20px;"
  neuesdiv.setAttributeNode(erstesattribut);

zweitesattribut = document.createAttribute("onClick");
  zweitesattribut.nodeValue ="test()";
  neuesdiv.setAttributeNode(zweitesattribut);

Text = document.createTextNode("neues Div eingefügt");
  neuesdiv.appendChild(Text);

document.getElementById("test").appendChild(neuesdiv);
}

function test(){
  alert("hm");}
//-->
</script>

und im Body liegt natürlich mein Div mit der id "test"

Danke,

Chräcker

[Christian Seiler]

Hallo Chräcker,

Wo liegt mein Fehler? (Ach ja: das onClick nehme ich deswegen, weil der IE ja mit dem eventListener Probleme hat... freundlich ausgedrückt...)

Warum nimmst Du nicht http://selfhtml.teamone.de/javascript/objekte/node.htm#set_attribute anstelle von createAttribute/setAttributeNode?

Klappt bei mir im Mozilla 1.3, Konqueror 3.1 und Opera 7 Beta 1; der IE kann es laut SELFHTML auch.

Viele Grüße,
Christian

[Chräcker Heller]

Hallo,

Warum nimmst Du nicht

ach frag nicht ;-)))) Ne, im Ernst, soweit hatte ich gar nicht gewühlt, weil ja eigentlich auch mein erstes Script schon hätte laufen sollen ;-)

Auf jedenfall habe ich versucht, das Bsp. zu interpolieren ,-) und kam auf folgende Attributzuweisung:

document.getElementById("test").lastChild.setAttribute("style","position:absolute; top:100px; left:100px;");

was Opera und mozilla schlucken und der IE mal wieder nicht. Dann kam ich aber auf folgende Lösung, was zwar mir ein Ergebnis beschert, aber keine Energie-des-Verstehens ,-)

document.getElementById("test").lastChild.style.position="absolute";
document.getElementById("test").lastChild.style.top="200px";
document.getElementById("test").lastChild.style.left="200px";
document.getElementById("test").lastChild.onclick=test;

Würde jetzt nur gerne zum verständnis wissen, warum mein erster Versuch aus dem Ausgangsposting, Attribute zuzuordnen, scheiterten... Fürs Ergebnis hast Du mir auf jedenfall fürs erste geholfen ;-)

Jetzt muß ich nur noch schauen, wie ich bei 100 dynamisch erzeugten Div's nach einem onClick ohne EventListener herausbekomme, welches Div da angeklickt wurde.... ach, ich liebe den IE.

Danke

Chräcker

[Michael Schröpl]

Hi Chräcker,

nicht, daß ich etwa mehr Ahnung von DOM hätte als Du - weit gefehlt ...

Aber ich will auch etwas ganz anderes dazwischen fragen:

document.getElementById("test").lastChild.style.position="absolute";
document.getElementById("test").lastChild.style.top="200px";
document.getElementById("test").lastChild.style.left="200px";
document.getElementById("test").lastChild.onclick=test;

Mußt Du das eigentlich so notieren?

Was liefert denn so ein "document.getElementById()" als Ergebnis zurück? Könnte das eine Referenz auf ein Objekt sein, mit der man das einmal gefundene Objekt dann im vollen Umfang ansteuern kann?

Kann man das nicht z. B. in eine lokale Variable X speichern und dann relativ _dazu_ ein X.lastChild.irgendwas abfragen - oder sogar zuweisen?

getElementById muß das Element aus der Menge sämtlicher bekannter IDs heraussuchen. Dafür muß es sehr wahrscheinlich einen Baum traversieren - das kann ziemlich langsam sein, verglichen mit der direkten Dereferenzierung einer lokalen Variable.
Ich würde solche DOM-API-Aufrufe auf das absolut mögliche Minimum zu reduzieren versuchen.

Viele Grüße
      Michael

[Chräcker Heller]

Hallo,

Kann man das nicht z. B. in eine lokale Variable X speichern und
dann relativ _dazu_ ein X.lastChild.irgendwas abfragen - oder
sogar zuweisen?

Vielleicht ;-)))) Also um ehrlich zu sein, würde ich mich auf keinen "Dom-Verständniswettstreit" einlassen, auch nicht mit Dir, denn ich habe da kaum Ahnung von, das was ich mache verstehe ich immer nur so atmosphärisch und klebe eben eine Tesafilmschicht um die nächste, irgendwann hält dann das Regal. Aber Was Du sagst klingt ziemlich ziemlich logisch (das "wie immer" spar ich mir mal) und ich werde mal daran denken, das ganze momentane Werkstück diesbezüglich noch mal neu aufzuspannen. (ich schreib grad den eher organisch gewachsenen Stempelseitencode neu, auf das zwar NS4 rausfliegt (laß ich eh nicht mehr auf die Seite), dafür aber Opera7 vielleicht endlich mal reinkommt. (Und der Code-Dschungel sich etwas lichtet und der Dschungel in meinem Hirn weiter zuwächst ;-))

Chräcker

[Michael Schröpl]

Hi Chräcker,

Kann man das nicht z. B. in eine lokale Variable X speichern und
dann relativ _dazu_ ein X.lastChild.irgendwas abfragen - oder
sogar zuweisen?
Vielleicht ;-)))) Also um ehrlich zu sein, würde ich mich auf keinen "Dom-Verständniswettstreit" einlassen, auch nicht mit Dir,

ich habe irgendwie das Gefühl, Deine DOM-Kenntnisse bequem unterbieten zu können. ;-)

Aber mich interessiert generell die interne Architektur der Implementierung einer solchen Funktion.
Ich habe eine konkrete Vorstellung, wie ich ein 'document.getElementById()' bauen würde - und es würde selbst mit erheblichem Aufwand nicht annähernd so schnell wie das Weiter-Adressieren von einer Objekt-Referenz.

Ein Kollege von mir macht gerade ein paar 'Turnübungen' in Deine Richtung (wir versuchen, eine Art Desktop in DHTML zu bauen - stell Dir vor, an 'Deinem Kühlschrank' würden nicht Schilder kleben, sondern richtige Fenster mit sämtlichen widgets, und der jeweilige Zustand könnte serverseitig mit Benutzer-Authentifizierung in einer mySQL-Datenbank gespeichert werden ...), und bei hinreichend vielen hinreichend komplexen Objekten auf einem hinreichend langsamen Rechner ... Du verstehst?

Viele Grüße
      Michael

[Thomas Meinike]

Hallo,

Aber mich interessiert generell die interne Architektur der Implementierung einer solchen Funktion.
Ich habe eine konkrete Vorstellung, wie ich ein 'document.getElementById()' bauen würde - und es würde selbst mit erheblichem Aufwand nicht annähernd so schnell wie das Weiter-Adressieren von einer Objekt-Referenz.

Man macht das durchaus so wie von Dir vermutet:

var d=document.getElementById("eineID");
d.style.property="value";
d.firstChild...
usw.

Ein alert(d) gibt ja auch etwas wie [object] aus.

Ein Kollege von mir macht gerade ein paar 'Turnübungen' in Deine Richtung (wir versuchen, eine Art Desktop in DHTML zu bauen - stell Dir vor, an 'Deinem Kühlschrank' würden nicht Schilder kleben, sondern richtige Fenster mit sämtlichen widgets, ...

Etwas in der Art des "DHTML-Nachbaus" von MacOS? Immer wieder nett anzuschauen: http://www.yaromat.de/macos8/.

MfG, Thomas

[Michael Schröpl]

Hi Thomas,

Etwas in der Art des "DHTML-Nachbaus" von MacOS? Immer wieder nett anzuschauen: http://www.yaromat.de/macos8/.

hm ... das würde mich ja wirklich interessieren ... aber als ich mir diese Seite anzeigen lassen wollte, zeigte sie mir nur ein (nicht existentes!) Bild und meinte, ich solle mir einen moderneren Browser installieren. Und welcher wäre das, bitte?

Viele Grüße
      Michael (immer noch mit Mozilla 1.4a und nun reichlich verwirrt)

[Thomas Meinike]

Hallo,

hm ... das würde mich ja wirklich interessieren ... aber als ich mir diese Seite anzeigen lassen wollte, zeigte sie mir nur ein (nicht existentes!) Bild und meinte, ich solle mir einen moderneren Browser installieren. Und welcher wäre das, bitte?

Offenbar haben die das seit Jahren nicht mehr gepflegt. Ich kenne das seit mind. 3 Jahren und habe die Seite oft in Kursen gezeigt ;-).

Unter Mozilla 1.3 bekomme ich auch keinen Zugang. Ohne in den Code geschaut zu haben: es wird wohl nur auf IE (document.all) oder Netscape 4.x (document.layers) geprueft ...

Natuerlich koennte man das heute alles mit document.getElementById() und Co. besser machen. Schau Dir das Teil aber dennoch mal woanders an, allein die "Deinstallation" von Windows ist 'ne Messe ;-).

MfG, Thomas

[Michael Schröpl]

Hallo Thomas,

Unter Mozilla 1.3 bekomme ich auch keinen Zugang. Ohne in den Code geschaut zu haben: es wird wohl nur auf IE (document.all) oder Netscape 4.x (document.layers) geprueft ...

ich habe inzwischen "auf einen neueren Browser hochgerüstet" (M$IE 5.0) und mir das Ding angesehen ... ja doch, sehr hübsch. ;-)

Allerdings ist wohl der wesentlichen Grund dafür, weshalb es so schnell ist, daß eine große Graphik verwendet wird, wo alles Wichtige schon drauf ist.

Stell Dir mal vor, auf diesem Desktop würden tatsächlich 10 solcher Fenster gleichzeitig herum fliegen, und alle mit resizer und iconfier und fuller und closer und sämtlichen Widgets, die man so gewohnt ist ... und mit automatischer Berechnung der Position, wo die iconified windows gestapelt werden etc. Und natürlich läuft in jedem dieser Fenster eine eigene "Applikation" (ein URL), und der Benutzer soll selbstverständlich auch noch selbst solche Fenster erzeugen können ... und der Zustand muß personalisiert auf dem Server abgespeichert werden, damit sich dieses "Desktop" nach dem nächsten Login automatisch wieder aufbaut. Das ist es, wo wir eigentlich hin wollen.

Viele Grüße
      Michael

[Thomas Meinike]

Hallo,

Wo liegt mein Fehler? (Ach ja: das onClick nehme ich deswegen, weil der IE ja mit dem eventListener Probleme hat... freundlich ausgedrückt...)

Mit Mozilla und IE klappt es so (Opera mag den Event-Handler nicht aktivieren):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 05/03</title>
<script type="text/javascript">
<!--
function init(){
  var neuesdiv,Text;

neuesdiv=document.createElement("div");
  neuesdiv.setAttribute("style","position:absolute; top:20px; left:20px;");
  neuesdiv.setAttribute("onclick","test()");

Text = document.createTextNode("neues Div eingefügt");
  neuesdiv.appendChild(Text);

document.getElementById("test").appendChild(neuesdiv);

if(document.getElementById("test").innerHTML)document.getElementById("test").innerHTML=document.getElementById("test").innerHTML;
}

function test(){
  alert("hm");
}

//-->
</script>
</head>
<body onload="init()">
<div id="test"></div>
</body>
</html>

MfG, Thomas

[Chräcker Heller]

Hallo,

ah, ja, da komme ich ja noch weiter ;-) (Nur das ich noch nicht weiß, wo bei meinem Weg der fehler ist ,-)))

Aber: bei Deiner lösung positioniert der IE bei mir (zumindest) nicht richtig. Erst wenn ich die positionierung per:

neuesdiv.style.position="absolute";
neuesdiv.style.top="200px";
neuesdiv.style.left="200px";

vornehme, positioniern alle (opera, moz und ie) richtig. Opera jedoch nur ohne die Zeile:

if(document.getElementById("test").innerHTML)document.getElementById("test").innerHTML=document.getElementById("test").innerHTML;

Dann löst aber der IE kein onClick aus. Meine Frage: diese Zeile habe ich eh nicht verstanden ,-) der Inhalt von innerHTML wird in innerHTML geschrieben? Hilfe ,-) Wofür ist diese Zeile da?

Chräcker

[Thomas Meinike]

Hallo,

Dann löst aber der IE kein onClick aus. Meine Frage: diese Zeile habe ich eh nicht verstanden ,-) der Inhalt von innerHTML wird in innerHTML geschrieben? Hilfe ,-) Wofür ist diese Zeile da?

Um dem IE eine Art "DOM-Baum-Refresh" zu verabreichen.

MfG, Thomas

[Chräcker Heller]

Hallo,

Um dem IE eine Art "DOM-Baum-Refresh" zu verabreichen.

ich liebe diesen Browser.... nur blöd, das das den Opera ins schleudern bringt, der hat ja allerdings eh seine Macken bei innerHTML (wer immer da für die implentierung zuständig war....) - Also doch wieder wie in guten Zeiten eine Browser/Funktionsweiche fürs Sorgenkind IE...

Danke auf jedenfall....

Chräcker

PS. Ach ja. Weist Du vielleicht, ob ich bei meiner allerersten Version, zwei atribute einzuhängen, einen Fehler gemacht habe?

____hier noch mal, nur falls Du eine Idee hast________

neuesdiv=document.createElement("div");
  erstesattribut = document.createAttribute("style");
  erstesattribut.nodeValue = "position:absolute; top:20px; left:20px;"
  neuesdiv.setAttributeNode(erstesattribut);

zweitesattribut = document.createAttribute("onClick");
  zweitesattribut.nodeValue ="test()";
  neuesdiv.setAttributeNode(zweitesattribut);

Text = document.createTextNode("neues Div eingefügt");
  neuesdiv.appendChild(Text);

document.getElementById("test").appendChild(neuesdiv);

[Thomas Meinike]

Hallo,

PS. Ach ja. Weist Du vielleicht, ob ich bei meiner allerersten Version, zwei atribute einzuhängen, einen Fehler gemacht habe?

Nein hast Du nicht. Unter Mozilla funktioniert es ja auch problemlos. Der IE kommt aber mit diesem Code nicht klar, deshalb hatte ich ja auf die Alternative mit setAttribute("attrname","attrvalue") hingewiesen.

MfG, Thomas

[Thomas Meinike]

Hallo,

ich liebe diesen Browser.... nur blöd, das das den Opera ins schleudern bringt, der hat ja allerdings eh seine Macken bei innerHTML (wer immer da für die implentierung zuständig war....) - Also doch wieder wie in guten Zeiten eine Browser/Funktionsweiche fürs Sorgenkind IE...

Probiere es mal mit dieser Alternative fuer das Setzen von onclick=function(){...} und das mit style.position... hattest Du ja bereits probiert. So klappt das bei mir unter IE, Mozilla und Opera (7):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 05/03</title>
<script type="text/javascript">
<!--
function init(){
  var neuesdiv,Text;

neuesdiv=document.createElement("div");
  neuesdiv.style.position="absolute";
  neuesdiv.style.top="120px";
  neuesdiv.style.left="120px";

neuesdiv.onclick=function(){test()};

Text = document.createTextNode("neues Div eingefügt");
  neuesdiv.appendChild(Text);

document.getElementById("test").appendChild(neuesdiv);
}

function test(){
  alert("hm");
}

//-->
</script>
</head>
<body onload="init()">
<div id="test"></div>
</body>
</html>

MfG, Thomas

[Chräcker Heller]

Hallo,

Danke, auch für die beruhigenden Worte zu meinem ersten Versuch ,-) Deine letzte Lösung werde ich heute abend ausprobieren, jetzt muß ich wieder in die Sonne (igit) ;-)))

Danke auf jedenfall, alle Infos haben mir, wie immer, sehr geholfen. (Muß jetzt aus den 1000 funktionierenden Kombinationen nur noch eine aussuchen ,-))))

Chräcker