DOM-Objekte neu erzeugen?
0 0 2 
molily
0 0 0 0 0 0 
Struppi
0
1 Fazit
JürgenB
DOM-Objekte neu erzeugen?
High!
Ich frage mich, ob und wie ich DOM-Objekte durch Javascript neu erzeugen kann (also nicht auf schon im HTML-Text vorhandene Objekte zugreifen)... wäre z. B. zur Erzeugung einer feststehenden Navigationsleiste
var navbar = new window.document.div();
zulässig?
Bis bald im Khyberspace!
Yadgar
-
Hi,
High!
and low. Hunting.
Ich frage mich, ob und wie ich DOM-Objekte durch Javascript neu erzeugen kann (also nicht auf schon im HTML-Text vorhandene Objekte zugreifen)...
Ja, mit den dazu vorgesehenen DOM-Methoden wie z.B. document.createElement().
wäre z. B. zur Erzeugung einer feststehenden Navigationsleiste
var navbar = new window.document.div();
zulässig?Nein. Nicht raten.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Morgen!
Mit etwas Recherche wärst du auf die entsprechende Befehle in SelfHTML gestossen:
document.createElementMfG
Rouven--
-------------------
ss:) zu:) ls:& fo:) de:< va:{ ch:? sh:) n4:( rl:? br:$ js:| ie:) fl:( -
Hallo,
Ich frage mich, ob und wie ich DOM-Objekte durch Javascript neu erzeugen kann (also nicht auf schon im HTML-Text vorhandene Objekte zugreifen)... wäre z. B. zur Erzeugung einer feststehenden Navigationsleiste
var navbar = new window.document.div();
var div_element = document.createElement("div");
Mit dem Element kannst du nun weiteres anstellen, z.B. weitere Elemente oder Textknoten erzeugen und an das erzeugte div-Element anhängen und schließlich das div-Element in den Elementenbaum einhängen.
var textknoten = document.createTextNode("Hallo!");
div_element.appendChild(textknoten);
document.body.appendChild(div_element);Siehe:
http://de.selfhtml.org/dhtml/modelle/dom.htm
speziell http://de.selfhtml.org/dhtml/modelle/dom.htm#neue_knoten
http://de.selfhtml.org/javascript/objekte/document.htm#create_element
http://de.selfhtml.org/javascript/objekte/document.htm#create_text_node
http://de.selfhtml.org/javascript/objekte/node.htm
speziell http://de.selfhtml.org/javascript/objekte/node.htm#append_childMathias
-
High!
var div_element = document.createElement("div");
Mit dem Element kannst du nun weiteres anstellen, z.B. weitere Elemente oder Textknoten erzeugen und an das erzeugte div-Element anhängen und schließlich das div-Element in den Elementenbaum einhängen.
var textknoten = document.createTextNode("Hallo!");
div_element.appendChild(textknoten);
document.body.appendChild(div_element);Die Passagen mit den Knoten im document-Text habe ich mir angesehen... wäre "style" dann ein Attribut-Knoten, dem man einen ValueNode hinzufügen müsste?
Bis bald im Khyberspace!
Yadgar
-
hi,
Die Passagen mit den Knoten im document-Text habe ich mir angesehen... wäre "style" dann ein Attribut-Knoten, dem man einen ValueNode hinzufügen müsste?
Jein.
Ein HTML-Elementobjekt hat automatisch ein Unterobjekt style, und dieses wiederum als Eigenschaften die in CSS verfügbaren Properties. Du kannst diese also direkt ansprechen/ihre Werte setzen.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
High!
Jein.
Ein HTML-Elementobjekt hat automatisch ein Unterobjekt style, und dieses wiederum als Eigenschaften die in CSS verfügbaren Properties. Du kannst diese also direkt ansprechen/ihre Werte setzen.Also sollte dann so etwas möglich sein:
var pframe1=document.createElement("div");
pframe.style.background-color="#324153";Bei mir klappte es nicht... und unter "Variablen" habe ich nichts darüber gefunden, wie man Farbwerte zuweist...
Bis bald im Khyberspace!
Yadgar
-
Hi,
Also sollte dann so etwas möglich sein:
sofern Du es richtig schreibst, ja.
pframe.style.background-color="#324153";
Bei mir klappte es nicht...Ganz kurz darüber nachgedacht: Das Zeichen "-" steht in JavaScript für eine Subtraktion. Hier versuchst Du also, dem Ergebnis der Rechnung "pframe.style.background minus color" einen Wert zuzuweisen, was in der Tat nicht klappen kann. Also muss die Schreibweise irgendwie anders sein. Und wie kriegt man raus, wie sie lautet?
und unter "Variablen" habe ich nichts darüber gefunden, wie man Farbwerte zuweist...
Die Fragestellung hat weder etwas mit Variablen zu tun, noch mit Farbwerten. Das Problem ist identisch, wenn die CSS-Eigenschaft z.B. "white-space" lautet.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Ganz kurz darüber nachgedacht: Das Zeichen "-" steht in JavaScript für eine Subtraktion. Hier versuchst Du also, dem Ergebnis der Rechnung "pframe.style.background minus color" einen Wert zuzuweisen, was in der Tat nicht klappen kann. Also muss die Schreibweise irgendwie anders sein. Und wie kriegt man raus, wie sie lautet?
Spontan dachte ich "backgroundColor"... und laut dem Kapitel "Eigenschaften" in Objektreferenz/style ist dem auch wirklich so!
Damit das <div> überhaupt halbwegs vollständig ist, habe ich noch ein paar style-Angaben hinzugefügt...
var pframe1=document.createElement("div");
pframe.style.top="0px";
pframe.style.left="0px";
pframe.style.width="500px";
pframe.style.height="400px";
pframe.style.backgroundColor="#990782";...es funktioniert aber trotzdem nicht! Was mache ich falsch?
Bis bald im Khyberspace!
Yadgar
-
Damit das <div> überhaupt halbwegs vollständig ist, habe ich noch ein paar style-Angaben hinzugefügt...
var pframe1=document.createElement("div");
pframe.style.top="0px";
pframe.style.left="0px";
pframe.style.width="500px";
pframe.style.height="400px";
pframe.style.backgroundColor="#990782";...es funktioniert aber trotzdem nicht! Was mache ich falsch?
Nichts, und es funktioniert auch.
Struppi.
-
Nichts, und es funktioniert auch.
Struppi.
Also, bei mir bleibt die Seite leer! Javascript ist in meinem Browser (Netscape 8.0) aktiv...
Bis bald im Khyberspace!
Yadgar
-
hi,
Also, bei mir bleibt die Seite leer!
Du hast die Maggi-Tütensuppe in kaltes Wasser eingerührt, aber das Kochen vergessen - kein Wunder also, dass du jetzt noch keine (mehr oder weniger) schmackhafte Mahlzeit hast.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
High!
Du hast die Maggi-Tütensuppe in kaltes Wasser eingerührt, aber das Kochen vergessen - kein Wunder also, dass du jetzt noch keine (mehr oder weniger) schmackhafte Mahlzeit hast.
Wieso Kochen? Ich dachte, das Skript wird doch eh automatisch beim Laden der Seite ausgeführt, ist doch keine Funktion...
Bis bald im Khyberspace!
Yadgar
-
-
-
-
hi,
Damit das <div> überhaupt halbwegs vollständig ist, habe ich noch ein paar style-Angaben hinzugefügt...
...es funktioniert aber trotzdem nicht! Was mache ich falsch?Du hast einen Maler ein Bild für dich malen lassen.
Du willst, dass andere Leute sich das Bild in deinem Haus ansehen können.
Möchtest du es dann nicht erst mal beim Maler abholen und in deiner Wohnung aufhängen ...?Falls ja, schau dir das Beispiel zu createElement in selfhtml doch noch mal an.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
High!
Falls ja, schau dir das Beispiel zu createElement in selfhtml doch noch mal an.
...da ist von appendChild die Rede... aber
var pframe1=document.createElement("div");
pframe.style.top="0px";
pframe.style.left="0px";
pframe.style.width="500px";
pframe.style.height="400px";
pframe.style.backgroundColor="#990782";
document.appendChild(pframe);funktioniert auch nicht!
Bis bald im Khyberspace!
Yadgar
-
hi,
...da ist von appendChild die Rede... aber
document.appendChild(pframe);
funktioniert auch nicht!Könntest du es jetzt bitte mal mit ein bisschen _Nachdenken_ versuchen, anstatt mit trial&error bzw. sinnfreier Herumstümperei?
Wird im Beispiel appendChild etwa als Methode des document-Objektes aufgerufen? Nein, wird es nicht.
Hat sich Yadgar mal die Beschreibung von appendChild angesehen? Nein, hat er vermutlich auch nicht.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
High!
Also, laut Text zu appendChild() wird ein Kindknoten an die letzte Stelle in den aufrufenden Hauptknoten gehängt...
...folglich müßte doch document.body.appendChild(pframe1) das oben definierte <div>-Objekt mit allen style-Angaben als Kindknoten von body einhängen!
Bis bald im Khyberspace!
Yadgar
-
hi,
Also, laut Text zu appendChild() wird ein Kindknoten an die letzte Stelle in den aufrufenden Hauptknoten gehängt...
Ja.
...folglich müßte doch document.body.appendChild(pframe1) das oben definierte <div>-Objekt mit allen style-Angaben als Kindknoten von body einhängen!
Ja.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
High!
hi,
Also, laut Text zu appendChild() wird ein Kindknoten an die letzte Stelle in den aufrufenden Hauptknoten gehängt...
Ja.
...folglich müßte doch document.body.appendChild(pframe1) das oben definierte <div>-Objekt mit allen style-Angaben als Kindknoten von body einhängen!
Ja.
var pframe1=document.createElement("div");
pframe1.style.position=fixed;
pframe1.style.top="0px";
pframe1.style.left="0px";
pframe1.style.width="500px";
pframe1.style.height="400px";
pframe1.style.backgroundColor="#990782";
document.body.appendChild(pframe1);Hier also der Code - trotzdem bleibt die Seite leer!
Bis bald im Khyberspace!
Yadgar
-
Hallo Yadgar.
Hier also der Code - trotzdem bleibt die Seite leer!
pframe1.style.position=fixed;
Wie lautet der Inhalt der Variable „fixed“?
Einen schönen Montag noch.
Gruß, Ashura
-
High!
pframe1.style.position=fixed;
DAS konnte ja nicht klappen... anscheinend muss alles, was nicht selbstdefinierte Variable oder reines Zahlenliteral ist, als String zugewiesen werden! Manchmal hilft eben doch ein Blick auf die Javascript-Konsole...
Jetzt funktioniert es!
Bis bald im Khyberspace!
-
hi,
pframe1.style.position=fixed;
DAS konnte ja nicht klappen... anscheinend muss alles, was nicht selbstdefinierte Variable oder reines Zahlenliteral ist, als String zugewiesen werden!
Welch erstaunliche Erkenntnis ...
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
-
High!
Könntest du es jetzt bitte mal mit ein bisschen _Nachdenken_ versuchen, anstatt mit trial&error bzw. sinnfreier Herumstümperei?
Nein, kann ich nicht, dazu verstehe ich anscheinend noch zu wenig von Javascript - ich bin Anfänger!
appendChild() wird in dem Beispiel einmal von myH1 (zur Einbindung des Textknotens) und einmal vom div-Objekt zur Einbindung von myH1! Heißt das, dass sich die einzelnen Attribute meines div-Objektes ebenfalls einen nach dem anderen mit appendChild() einhängen muss?
Bis bald im Khyberspace!
Yadgar
-
-
-
-
-
-
-
-
-
-
Hallo Yadgar,
mein Fazit:
Ca. 3,5 Stunden herumprobieren haben dir ca 30 Min. Lesen im Selfhtml erspart.
Gruß, Jürgen