DOM - ist das nicht furchtbar?

[Andreas Lindig]

Hallo Forum,

Ich krebs mir hier gerade einen ab, weil ich mein neues Programm auch für den Opera tauglich machen will (warum eingentlich?). Und der versteht scheint's kein innerHTML. Also mach ich immer ne Zweige: innerHTML für IE und DOM für Mozilla und Opera, obwohl es im Mozilla ja auch mit innerHTML ginge. Aber das DOM ist ja wohl umständlich bis sonstwohin. Da haben mal so richtige Schreibtischtäter voll auf die Kacke gehaun. Was ich mit innerHTML in ein/zwei Zeilen schreibe, dafür brauch ich im DOM eine ganze Seite: createElement, createTextNode, createHasteNichGeseh'n, dann die Attribute auch noch alle schön einzeln createn und allen schön (immer einzeln versteht sich) Werte zuweisen und dann (etwa wenn Weihnachten ist) alles schön einzeln in den DOM-Baum einhängen. Haben die se eigentlich noch alle? Wenn man sich so die Seiten vom W3C ansieht, erkennt man ja auch schnell, daß die sich mit der Erstellung von Webseiten scheinbar nicht sonderlich beschäftigen... ;-) Wofür haben die diesen Mist eigentlich entworfen? Langeweile?

Gruß, Andreas

[Tobias Müller]

Hallo Andreas,

Ich krebs mir hier gerade einen ab, weil ich mein neues Programm auch für den Opera tauglich machen will (warum eingentlich?). Und der versteht scheint's kein innerHTML. Also mach ich immer ne Zweige: innerHTML für IE und DOM für Mozilla und Opera, obwohl es im Mozilla ja auch mit innerHTML ginge. Aber das DOM ist ja wohl umständlich bis sonstwohin. Da haben mal so richtige Schreibtischtäter voll auf die Kacke gehaun. Was ich mit innerHTML in ein/zwei Zeilen schreibe, dafür brauch ich im DOM eine ganze Seite: createElement, createTextNode, createHasteNichGeseh'n, dann die Attribute auch noch alle schön einzeln createn und allen schön (immer einzeln versteht sich) Werte zuweisen und dann (etwa wenn Weihnachten ist) alles schön einzeln in den DOM-Baum einhängen. Haben die se eigentlich noch alle? Wenn man sich so die Seiten vom W3C ansieht, erkennt man ja auch schnell, daß die sich mit der Erstellung von Webseiten scheinbar nicht sonderlich beschäftigen... ;-) Wofür haben die diesen Mist eigentlich entworfen? Langeweile?

Ich gebe dir vollkommen recht, dass innerHTML eine tolle Sache ist, aber deinen Ärger kann ich deinem Fall nicht nachvollziehen, weil mittlerweile _alle_ bedeutsamen Browser dies beherrschen: Opera 7+, Safari/KHTML, Mozilla/Netscape6+ und der IE natürlich sowieso. :-)

MfG, Mülli

[Andreas Lindig]

Hallo Tobias,

deinen Ärger kann ich deinem Fall nicht nachvollziehen, weil mittlerweile _alle_ bedeutsamen Browser dies beherrschen: [...] der IE natürlich sowieso. :-)

mein IE 5.5 kann es nicht, jedenfalls nicht ausreichend. Z.B. kann er kein createAttribute(). Ich hab nicht alle Einzelheiten überprüft, was noch alles nicht geht, jedenfalls kann ich damit mein Projekt nicht realisieren. Ich will doch nicht wieder mit lauter Workarounds anfangen wie zu schäbigen NS 4.x-Zeiten, also muß ich für ihn sowiso innerHTML anbieten.

Und: die Zuverlässigkeit des DOM mag ja schön und gut sein, aber muß das deswegen so umständlich sein?

Gruß, Andreas

[Tobias Müller]

Hallo Andreas,

mein IE 5.5 kann es nicht, jedenfalls nicht ausreichend. Z.B. kann er kein createAttribute(). Ich hab nicht alle Einzelheiten überprüft, was noch alles nicht geht, jedenfalls kann ich damit mein Projekt nicht realisieren. Ich will doch nicht wieder mit lauter Workarounds anfangen wie zu schäbigen NS 4.x-Zeiten, also muß ich für ihn sowiso innerHTML anbieten.

ähm. hab ich mich wohl missverständlich ausgedrückt? Ich meinte, dass diese  Browser alle innerHTML können! Auch Opera. :-)

Und: die Zuverlässigkeit des DOM mag ja schön und gut sein, aber muß das deswegen so umständlich sein?

Warum das so sein muss, weiss ich auch nicht. Aber

Da haben mal so richtige Schreibtischtäter voll auf die Kacke gehaun.

könnte es ganz gut treffen. Wobei ich die Existenz der beklagten DOM-Methoden für durchaus richtig und wichtig halte. Der Fehler liegt imho in der nicht vorhandenen einfachen Alternative/Ergänzung. Da musste dann ausgerechnet Microsoft kommen und es besser machen. Glücklicherweise haben die anderen Browserhersteller nachgezogen und innerHTML ebenfalls implementiert.

MfG, Mülli

[Andreas Lindig]

ähm. hab ich mich wohl missverständlich ausgedrückt? Ich meinte, dass diese  Browser alle innerHTML können! Auch Opera. :-)

Ach so,
da mußt Du mir aber mal ne gute Quelle und _Beispiele_ zeigen. In meinem Programm kackt Opera immer ab, wenn ich innerHTML verwende. Leider sehr krytische Fehlermeldungen. Er erkennt dann irgendwelche Methoden meiner selbstgeschriebenen Objekte nicht mehr. Zusammenhänge sind da nicht erkennbar. Und die "Fehler" werden sonst nirgends gemeldet. Mozilla z.B. ist da ja eigentlich immer sehr genau.

Wobei ich die Existenz der beklagten DOM-Methoden für durchaus richtig und wichtig halte. Der Fehler liegt imho in der nicht vorhandenen einfachen Alternative/Ergänzung.

da geb ich Dir Recht. Alle Einzelheiten bearbeiten zu _können_ ist ja ganz fein, aber jedesmal zu _müssen_ ist Schwachsinn. Ein Formular z.B. braucht immer ein "action" oder ein "method" und hat in der Regel auch einen submit-Button. Sowas könnte man einfach in einer Methode unterbringen.

Gruß, Andreas

[molily]

Hallo,

ähm. hab ich mich wohl missverständlich ausgedrückt? Ich meinte, dass diese  Browser alle innerHTML können! Auch Opera. :-)

Ach so,
da mußt Du mir aber mal ne gute Quelle und _Beispiele_ zeigen. In meinem Programm kackt Opera immer ab, wenn ich innerHTML verwende.

Dann musst du dein Programm zeigen, nicht wir irgendwelche irrelevanten Beispiele.

Leider sehr krytische Fehlermeldungen.

Wäre sinnvoller, wenn du sie posten würdest, ansonsten kann man dir schlecht dabei helfen, sie zu entschlüsseln.

Er erkennt dann irgendwelche Methoden meiner selbstgeschriebenen Objekte nicht mehr. Zusammenhänge sind da nicht erkennbar.

Das sieht eher danach aus, dass deine Analysen nicht ausreichend waren, um das Problem einzugrenzen.

Mathias

[Andreas Lindig]

Hallo mathias,

Dann musst du dein Programm zeigen,

wenn Du unbedingt willst, bitte: Ich befürchte nur, daß es bei der Länge, die es mittlerweile hat, für Außenstehende nichts bringt. Obacht: was Du dort siehst ist nicht der Quelltext des Programms, sondern irgendeine beliebige Testseite.

Man muß zum Start des Programms in die Seite doppelklicken, dann geht ein Fenster mit Links auf - _da_ ist das Programm drin. Es ist jetzt so eingerichtet, daß es im Opera funktioniert. Das läßt sich aber leicht ändern (siehe weiter unten).

nicht wir irgendwelche irrelevanten Beispiele.

äh, Du warst gar nicht angesprochen :-) - Du _mußt_ mir nichts zeigen :-)

Wäre sinnvoller, wenn du sie [Fehlermeldungen] posten würdest, ansonsten kann man dir schlecht dabei helfen, sie zu entschlüsseln.

bitte:

diese Meldung tritt auf, wenn man im Palettenfenster auf einen Link der oberen drei Blöcke klickt (sofern das Programm mit innerHTML läuft - ist jetzt nicht der Fall, kannst Du aber einrichten, siehe unten). Wenn man sich im Opera die Linkadressen ansieht, dann hat er die nur halb geschrieben. Aber bedenke: Der String der in diese Links geschrieben wird, wird mit einer Funktion generiert und ist im Prinzip immer gleich - es werden nur Parmeter ausgetauscht. Wenn man sich diese Strings mit alert() ausgeben läßt, gibt auch der Opera die korrekten Strings aus, aber er schreibt sie mit innerHTML scheinbar unvollständig ins Dokument.

Man kann den Unterschied testen, wenn man die Variable 'this.IE' im Konstruktor 'function Palette' auf true setzt, dann geht auch der Opera jeweils in den innerHTML-Zweig.

Der Witz ist: wenn ich das Programm für Opera korrekt laufen lasse (also mit DOM), kann ich in der initialisierungsfunktion des Programms ('dokumentEinlesen()') am Schluß noch irgendwas mit innerHTML ins dokument schreiben, z.B.: "document.getElementById('inhalt').innerHTML = 'Nachtrag'", und dann sind die Links auch wieder kaputt, obwohl dieses innerHTML erst ausgeführt wird, _nachdem_ alle Links zunächst korrekt ins Dokument geschrieben wurden.

Die nötigen Änderungen zum Testen stehen schon als Kommentare im Programm:
Zeile: 187, Zeile 554
einfach Auskommentieren und wundern...

Das sieht eher danach aus, dass deine Analysen nicht ausreichend waren, um das Problem einzugrenzen.

Ich gehe - gutgläubig, wie ich bin - mal davon aus, daß keine Syntax-Fehler mehr vorhanden sind, wenn der Mozilla nichts mehr meldet und das Programm von ihm und vom IE fehlerfrei ausgeführt wird... Zudem fürhrt auch der Opera fehlerfrei aus, solange kein innerHTML vorkommt. Wenn ich es aber an irgendeiner unverfänglichen Stelle probehalber wieder einfüge (s.o.), kackt eben das ganze Programm ab.

Gruß, Andreas

[molily]

Hallo,

Man kann den Unterschied testen, wenn man die Variable 'this.IE' im Konstruktor 'function Palette' auf true setzt, dann geht auch der Opera jeweils in den innerHTML-Zweig.

Der Witz ist: wenn ich das Programm für Opera korrekt laufen lasse (also mit DOM), kann ich in der initialisierungsfunktion des Programms ('dokumentEinlesen()') am Schluß noch irgendwas mit innerHTML ins dokument schreiben, z.B.: "document.getElementById('inhalt').innerHTML = 'Nachtrag'", und dann sind die Links auch wieder kaputt, obwohl dieses innerHTML erst ausgeführt wird, _nachdem_ alle Links zunächst korrekt ins Dokument geschrieben wurden.

Vielleicht mache ich etwas falsch, aber ich bin nach deiner Anleitung vorgegangen und mein Opera 7.54 führt die innerHTML-Zweige jeweils problemlos aus (soweit ich den Zweck richtig verstanden habe - die Farben im Ursprungsfenster ändern sich gemäß meinen Erwartungen). Es kommen auch keine Fehlermeldungen in der JavaScript-Konsole.

Mathias

[Andreas Lindig]

Vielleicht mache ich etwas falsch, aber ich bin nach deiner Anleitung vorgegangen und mein Opera 7.54 führt die innerHTML-Zweige jeweils problemlos aus (soweit ich den Zweck richtig verstanden habe - die Farben im Ursprungsfenster ändern sich gemäß meinen Erwartungen). Es kommen auch keine Fehlermeldungen in der JavaScript-Konsole.

also: Du hast mal die genannten Kommentare entfernt? Und hast dann als erstes mal auf einen oberen Link geklickt (z.B. DIV) - nicht auf eine Farbe? Und Du hast _nach_ der Änderung im Script den Cache gelöscht? WICHTIG - der Opera benutzt mit Vorliebe das alte JS weiter.

ich habe übgrigens Version 7.23 - WIN98

Gruß, Andreas

[Thomas J.S.]

Hallo,

also: Du hast mal die genannten Kommentare entfernt? Und hast dann als erstes mal auf einen oberen Link geklickt (z.B. DIV) - nicht auf eine Farbe? Und Du hast _nach_ der Änderung im Script den Cache gelöscht? WICHTIG - der Opera benutzt mit Vorliebe das alte JS weiter.

Ich kann schon das ganze nicht nachvollziehen, ich habe den Quelltext vom popup.html bei mir abgelegt, aber wenn ich die Datei öffen, passiert gar nix, ich sehe nur das Formular und da Dateien einlesen geht so oder so nicht, so weiss ich auch nicht was eigentlich passieren soll (deine test popup.html an deinem server tut bei mir auch nichs)

Grüße
Thomas

[Andreas Lindig]

Ich kann schon das ganze nicht nachvollziehen,

Du darfst nicht popup.html starten, sondern index(/quelltext).htm. Du mußt also alle Dateien runterladen, entpacken, ins gleiche Verzeichnis legen und index.htm öffnen und doppelklicken. popup.htm geht dann auf und liest index.htm ein. Den upload-Button vergiß mal. Die Funktion steht noch nicht.

Gruß, Andreas

[molily]

Hallo,

also: Du hast mal die genannten Kommentare entfernt?

Ja.

Und hast dann als erstes mal auf einen oberen Link geklickt (z.B. DIV) - nicht auf eine Farbe?

Ja.

Und Du hast _nach_ der Änderung im Script den Cache gelöscht? WICHTIG - der Opera benutzt mit Vorliebe das alte JS weiter.

Meine Tests liefen über die Festplatte und es waren keine externen Scripte und kein Cache involviert, also ja. Habe natürlich immer darauf geachtet, das Dokument neuzuladen.

Mathias

[Andreas Lindig]

Meine Tests liefen über die Festplatte und es waren keine externen Scripte und kein Cache involviert, also ja. Habe natürlich immer darauf geachtet, das Dokument neuzuladen.

trotzdem. Versuchs mal. Du kannst ja z.B. in den Body-Teil von popup.htm irgendwas reinschreiben, um zu sehen, ob wirklich die neue Version geladen wird. Die Hauptseite neu zu laden bringt nichts, da steht das Script nicht drin. Ich muß hier lokal nach jeder Änderung den Cache löschen.

Gruß, Andreas

[molily]

Hallo,

Dein Kernproblem lässt sich anscheinend relativ einfach lokalisieren:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>...</title>
<script type="text/javascript">
var string1 = '<p><a href="javascript:alert('bla')">klick mich</a> - <a title="bla ' bla ' bla">title</a></p>';
string1 += "<p><a href='javascript:alert("bla")'>klick mich</a> - <a title='bla " bla " bla'>title</a></p>";
var string2 = "bla";

function schreiben () {
 inhalt.innerHTML += string1;
}
function hinzufuegen () {
 inhalt.innerHTML += string2;
}
window.onload = function () {
 inhalt = document.getElementById("inhalt");
 ausgabe = document.getElementById("ausgabe");
 schreiben();
}
function zeigeinnerhtml () {
 ausgabe.innerText = inhalt.innerHTML;
}
</script>
</head>

<body>

<div id="inhalt"></div>

<p><a href="javascript:hinzufuegen()">hinzufügen</a></p>
<p><a href="javascript:zeigeinnerhtml();">zeige innerHTML</a></p>

<p id="ausgabe"></p>

</body>
</html>

Nach dem Hinzufügen werden alle Attribute mit einfachen Anführungszeichen geschrottet. Das lässt sich dadurch erklären, dass beim Serialisieren immer einfache Anführungszeichen verwendet werden. Bei .innerHTML+= wird nicht einfach der Code angehängt, sondern erst der gesamte Knotenbaum serialisiert, der Codestring angehängt und der gesamte String neu eingeparst.

Das Ergebnis der Serialisierung ist etwa
<A HREF='javascript:alert('bla')'>klick mich</A>
Dies wird beim erneuten Parsen zu
<A HREF='javascript:alert('>klick mich</A>
weil nach dem zweiten »'« das Attribut zuende ist und das darauffolgende »bla')'« für den Parser nur Müll ist.

Das Problem kommt mir sogar bekannt vor, wahrscheinlich sogar aus diesem Forum. Es ist eben ein Opera-Bug, der in neueren Versionen bereits gefixt ist.

Mathias

[Andreas Lindig]

Dein Kernproblem lässt sich anscheinend relativ einfach lokalisieren:

für Dich wahrscheinlich, hehe ;-) Ich wär da im Leben nicht drauf gekommen...

[...quelltext...]

vielen Dank, daß Du Dir nochmal so viel Mühe gemacht hast. Nach Umschreiben der Syntax funktioniert es jetzt bei mir auch im Opera mit innerHTML. :-)

Gruß, Andreas

[Bio]

Sup!

Könnte man da nicht eine Funktion schreiben, die einen String voll HTML parst, zusammenbaut und dann mit replaceNode/insertNode einhängt?

Gruesse,

Bio

[Thomas J.S.]

Hallo,

Ich krebs mir hier gerade einen ab,

und wie machst du das? ;-)

Aber das DOM ist ja wohl umständlich bis sonstwohin.

Nein! Nicht! No! Net! ;-)
Im ernst, ich mag Javascript wirklich nicht besonders, eben weil da mehr denn sonst wo alles durcheinander ist. Sie ist eine ganz arge "Sprache" ohne vernünftigen Syntax. Mit DOM bin ich dagegen sehr zufrieden :-), es hat Hand und Fuss, ist logisch, sprich: ich kann es verstehen :-)

Da haben mal so richtige Schreibtischtäter voll auf die Kacke gehaun. Was ich mit innerHTML in ein/zwei Zeilen schreibe, dafür brauch ich im DOM eine ganze Seite: createElement, createTextNode, createHasteNichGeseh'n, dann die Attribute auch noch alle schön einzeln createn und allen schön (immer einzeln versteht sich) Werte zuweisen und dann (etwa wenn Weihnachten ist) alles schön einzeln in den DOM-Baum einhängen.

Dafür gibt's doch appendChild.

Wofür haben die diesen Mist eigentlich entworfen? Langeweile?

Ne ... das war so, dass man sich zusammengesetzt und gefragt hat, womit man die Leute am besten dazubringen kann, dass sie sich einen abkrebsen ;-þ

Grüße
Thomas

[Andreas Lindig]

Hallo Thomas,

Im ernst, ich mag Javascript wirklich nicht besonders, eben weil da mehr denn sonst wo alles durcheinander ist. Sie ist eine ganz arge "Sprache" ohne vernünftigen Syntax.

muß ich Dir leider Recht geben.

Mit DOM bin ich dagegen sehr zufrieden :-), es hat Hand und Fuss, ist logisch, sprich: ich kann es verstehen :-)

hab ich ja alles gar nicht angezweifelt :-)

und dann (etwa wenn Weihnachten ist) alles schön einzeln in den DOM-Baum einhängen.
Dafür gibt's doch appendChild.

ja klar, wie sollte man es auch sonst machen? Aber stell Dir mal ne Mutter mit 100 Kindern vor, es gibt Mittagessen und sie muß jedes Kind einzeln rufen: "kind1, Mittagessen", "kind2, Mittagessen"... Bis die alle da sind, ist das Essen kalt. Bis ich alles ins DOM eingehängt habe, habe ich keine Lust mehr ;-)

Ne ... das war so, dass man sich zusammengesetzt und gefragt hat, womit man die Leute am besten dazubringen kann, dass sie sich einen abkrebsen ;-þ

so muß es gewesen sein :-)

Gruß, Andreas

[Thomas J.S.]

Hallo Andreas,

Dafür gibt's doch appendChild.

ja klar, wie sollte man es auch sonst machen? Aber stell Dir mal ne Mutter mit 100 Kindern vor, es gibt Mittagessen und sie muß jedes Kind einzeln rufen: "kind1, Mittagessen", "kind2, Mittagessen"... Bis die alle da sind, ist das Essen kalt. Bis ich alles ins DOM eingehängt habe, habe ich keine Lust mehr ;-)

Ich weiss nicht, aber vielleicht machst du was falsch?
Das Kind-Element mit allen Attributen, Inhalt etc. sollte schon vorher erzeugt werden. Wenn es mehrere sind nimmt man dafür eine Schleife. Dann wird das Ergebnis in die "Ausgabe" geschrieben.
Nur ein Bsp.:
HTMLAusgabe = xsltProcessor.transformToFragment(XMLEingabe, document);

document.getElementById("ausgabe").innerHTML  = HTMLAusgabe; oder
document.getElementById("ausgabe").appendChild(HTMLAusgabe);

Grüße
Thomas

[Andreas Lindig]

Ich weiss nicht, aber vielleicht machst du was falsch?

hmm...
in Deinem Beispiel bekommst Du ja schon einen fertigen String, wenn ich das richtig sehe.

mal ein Beispiel von mir

ins Dokument soll eingefügt werden:

<form action="script.php" method="post">
   <input type="text" value="mein_wert">
</form>

mit innerHTML schreib ich das als String einfach so hin.

mit DOM:

var formular = document.createElement("form");
var action = document.createAttribute("action");
    action.nodeValue = "script.php";
    formular.setAttributeNode(action);
var method = document.createAttribute("method");
    method.nodeValue = "post";
    formular.setAttributeNode(method);
var input = document.createElement("input");
var type = document.createAttribute("type");
    type.nodeValue = "text";
    input.setAttributeNode(type);
var value = document.createAttribute("value");
    value.nodeValue = "mein_wert";
    input.setAttributeNode(value);
formular.appendChild(input);

kann man das abkürzen?

Gruß, Andreas

[Thomas J.S.]

Hallo,

Ich weiss nicht, aber vielleicht machst du was falsch?

hmm...
in Deinem Beispiel bekommst Du ja schon einen fertigen String, wenn ich das richtig sehe.

Ja, aber ich mache auch sowas:
HTMLAusgabe = "Fehler beim Parsen der " + strFehlerQuelle + ": <br />"

• "Fehler Nr.: "   + errorCode + "<br />"
• "Beschreibung: " + reason + "<br />"
• "URL: "          + url + "<br />"
• line + linepos + filepos + srcText;

document.getElementById("ausgabe").innerHTML  = HTMLAusgabe;

mal ein Beispiel von mir

ins Dokument soll eingefügt werden:

<form action="script.php" method="post">
   <input type="text" value="mein_wert">
</form>

mit innerHTML schreib ich das als String einfach so hin.

mit DOM:

kann man das abkürzen?

Was hält dich von ein:
HTMLAusgabe = "<form action="script.php" method="post">
   <input type="text" value="mein_wert">
</form>"
ab?

Grüße
Thomas

[Andreas Lindig]

Was hält dich von ein:
HTMLAusgabe = "<form action="script.php" method="post">
   <input type="text" value="mein_wert">
</form>"
ab?

???
daß ich das mit appendChild nicht in den Knoten reinkriege.

folgendes Script z.B. funktioniert wie erwartet nicht:

<html>
<head>
    <script type="text/javascript">

function schreibeHallo()
        {

var hallo = "<p>hallo</p>";
            document.getElementsByTagName("body")[0].appendChild(hallo);
        }

</script>
</head>

<body onLoad="schreibeHallo()">
    <p>erster Absatz</p>
</body>

</html>

habe ich Dich da jetzt total falsch verstanden?

Gruß, Andreas

[Thomas J.S.]

Hallo,

Was hält dich von ein:
HTMLAusgabe = "<form action="script.php" method="post">
   <input type="text" value="mein_wert">
</form>"
ab?

???
daß ich das mit appendChild nicht in den Knoten reinkriege.

Ich dachte du wolltest innerHTML ;-)
---

Dein Problem mit Opera 7.23 kann ich nachvollziehen. Mit 7.54 nicht, da funktioniert alles wie beabsichtigt. Vielleicht ein Bug beim JS-Interpräter von 7.23?

Grüße
Thomas

[Thomas J.S.]

Hallo,

Was hält dich von ein:
HTMLAusgabe = "<form action="script.php" method="post">
   <input type="text" value="mein_wert">
</form>"
ab?

???
daß ich das mit appendChild nicht in den Knoten reinkriege.

Ich dachte du wolltest innerHTML ;-)

Und wenn ich jetzt alles nochmal lese, dann fällt mir auf, dass ich/wir aneinander vorbeigeredet haben.

Grüße
Thomas

[Andreas Lindig]

Dein Problem mit Opera 7.23 kann ich nachvollziehen. Mit 7.54 nicht, da funktioniert alles wie beabsichtigt. Vielleicht ein Bug beim JS-Interpräter von 7.23?

fein. Dann hab ich mir das wenigstens nicht eingebildet ;-)

Gruß, Andreas

[Thomas Meinike]

Hallo,

mit DOM:
...
kann man das abkürzen?

Ja:

var formular = document.createElement("form");
var input = document.createElement("input");
formular.setAttribute("action","script.php");
formular.setAttribute("method","post");
input.setAttribute("type","text");
input.setAttribute("value","mein_wert");
formular.appendChild(input);

MfG, Thomas

[Andreas Lindig]

Hallo Thomas,

mit DOM:
...
kann man das abkürzen?

Ja:
...

tja,... das muß ich wohl übersehen haben ;-) setAttribute() sah mir wohl verdächtig änlich zu setAttributeNode() aus. Danke schön. Damit wirds jedenfalls schonmal kompakter.

Gruß, Andreas

[JürgenB]

Hallo Thomas,

formular.setAttribute("action","script.php");

was spricht eigentlich gegen   formular.action="script.php"

Gruß, Jürgen

[Thomas Meinike]

Hallo,

formular.setAttribute("action","script.php");
was spricht eigentlich gegen   formular.action="script.php"

AFAIK nichts aus HTML-Sicht, aber in anderen DOM-Kontexten ist das Scheitern vorprogrammiert, z. B. bei SVG:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
  <rect x="0" y="0" width="100" height="50" onload="evt.target.fill='red'"/>
  <rect x="0" y="50" width="100" height="50" onload="evt.target.setAttribute('fill','red')"/>
</svg>

Das erste Rechteck wird nicht rot, aber das zweite mit setAttribute() behandelte ...

MfG, Thomas

[Struppi]

kann man das abkürzen?

Klar, einfach eine Funktion schreiben:

function createElement(wo, e)
{
    if(!wo) wo = window.document;
    if(!e) return alert ('usage: createElement(document, "element")');
    var o = wo.createElement(e);
    if(!o) return alert('Konnte Element ' + e + ' nicht erzeugen!');
    for(var i = 2; i < (arguments.length ); i++,i++)
        o.setAttribute(arguments[i], arguments[i+ 1]);
    return o;
}

var form = createElement(null, 'form', 'action', 'script.php', 'method', 'post');
var input = createElement(null, 'input', 'type', 'text', 'value', 'mein_wert');
form.appendChild(input);

Und noch was zu innerHTML, probier mal das folgende aus:

window.onload = function()
{
var t1 = new Date();
for(var i = 0; i < 100; i++)
{
// dom();
inner();
}
var t2 = new Date();
alert(t2 - t1);

}

function dom()
{
var form = createElement(null, 'form', 'action', 'script.php', 'method', 'post');
var input = createElement(null, 'input', 'type', 'text', 'value', 'mein_wert');
form.appendChild(input);
window.document.body.appendChild(form);
}
function inner()
{
   var html = '<form action="script.php" method="post">   <input type="text" value="mein_wert"></form>';
   window.document.body.innerHTML += html;
}

Die innerHTML Funktion braucht bei mir ca. 10,000 ms die DOM Methoden ca. 250 ms. Das finde ich durchaus ein schlagendes Argument für diese. Auch wenn ich oft gerne innerHTML benutze weil es wirklich einfacher ist, aber je nachdem wie komplex deine HTML Struktur ist, ist eine Funktion u.U. besser, da du dadurch auch eher  Fehler vermeiden kannst.

Struppi.

[Andreas Lindig]

Hallo Struppi,

heute habe ich mir mal von meinem Programm frei genommen und mich endlich mit Deiner Funktion beschäftigt. Ist wirklich interessant. Besonders diese Reihe von Attribut-Argument-Paren gefällt mir. Ich wußte gar nicht, daß man in JS einfach mehr Argumente übergeben, als die Funktion eigentlich ausweist. Das ist ja schon fast wie überladen. Ich mach sowas bisher ja immer umständlich mit Arrays.

Würde gern noch ein paar Details nachfragen:

if(!e) return alert ('usage: createElement(document, "element")');

hab' ich noch nie gesehen. Warum gibts Du das alert da zurück? Damit in der Funktion nicht weitergemacht wird?

und hier:

for(var i = 2; i < (arguments.length ); i++,i++)

i++, i++ soll bedeuten: i += 2 ja?

Die Zeitmessung habe ich auch mal gemacht. Hab wg. langsamem Rechner erheblich höhere Zeiten, aber auch ein überzeugendes Verhältnis von 5-25 : 1 zungunsten von innerHTML. Es kommt sehr darauf an, wieviele Schleifendurchläufe man macht.

Gruß, Andreas

[Struppi]

Würde gern noch ein paar Details nachfragen:

if(!e) return alert ('usage: createElement(document, "element")');

hab' ich noch nie gesehen. Warum gibts Du das alert da zurück? Damit in der Funktion nicht weitergemacht wird?

Ja, es soll ein element erzeugt werden, aber wenn der funktion kein 2. Parameter übergeben wird ist die Funktion falsch aufgerufen worden. Das alert()   soll dann ein hinweis sein, was falsch ist.

und hier:

for(var i = 2; i < (arguments.length ); i++,i++)

i++, i++ soll bedeuten: i += 2 ja?

Ja, ++/-- sind (normalerweise) sehr schnelle Operationen, daher hab ich diesen den Vorzug gegeben. Das dürfte aber mit JS egal sein. (das kommt ncoh aus der Zeit als ich C programmiert habe, ++/-- sind auf CPU ebene ein Byte Befehle, während eine Addition mindestens zwei braucht, du sparst dadurch ein paar CPU Takte ;-) )

Die Zeitmessung habe ich auch mal gemacht. Hab wg. langsamem Rechner erheblich höhere Zeiten, aber auch ein überzeugendes Verhältnis von 5-25 : 1 zungunsten von innerHTML. Es kommt sehr darauf an, wieviele Schleifendurchläufe man macht.

Der Punkt dabei ist, wie hier schon erklärt wurde, das innerHTML intern das ganze parsen muss um dann mit den DOM Methoden die Elemente einzufügen. innerHTML ist also lediglich ein Umweg

Das mit den arguments hättest du auch in selfhtml nachlesen können http://de.selfhtml.org/javascript/objekte/function.htm#arguments ;-)

Struppi.

[Andreas Lindig]

Das alert()   soll dann ein hinweis sein, was falsch ist.

das ist mir schon klar. Verwundert hat mich, daß Du das _zurückgibst_. Es wird ja scheinbar außerhalb der Funktion erst ausgegeben.

du sparst dadurch ein paar CPU Takte ;-) )

supi, wieder was gespart ;-)

Das mit den arguments hättest du auch in selfhtml nachlesen können http://de.selfhtml.org/javascript/objekte/function.htm#arguments ;-)

äh, ja... mittlerweile hab ich das auch getan. Aber keiner kennt SelfHTML auswendig und die Sache ist ja immer, drauf zu kommen, daß es das gibt :-) Deswegen finde ich Beispiele immer sehr nützlich und nicht, wie hier von Manchen gern behauptet wird, nur was für Denk- und Schreibfaule... Ich stoße fast jedesmal auf Sachen, die ich nicht kenne und kann dann viel gezielter nachschlagen.

Gruß, Andreas

[Dracophagos]

Hallo Forum,

Moin.

Ich krebs mir hier gerade einen ab, weil ich mein neues Programm auch für den Opera tauglich machen will (warum eingentlich?).

Du Ärmster.

Und der versteht scheint's kein innerHTML.

Du bist "Programmierer"?

Also mach ich immer ne Zweige: innerHTML für IE und DOM für Mozilla und Opera, obwohl es im Mozilla ja auch mit innerHTML ginge.

Für Laien: das DOM ist eine API (Application Programmers Interface), also eine genormte und auf einer inneren Logik basierende Code-Definition. Darin ist beschrieben, wie man auf XML-Elemente (also seit neuestem auch HTML, weil das ein XML-Dialekt ist) zugreifen kann - und zwar überall in gleicher Art, nicht nur in Browsern.

"innerHTML" ist eine Browserinterne und elementerzeugende Funktion des IE, die - eben mithilfe des DOM - ein XML-Bäumchen erzeugt. Weil der IE dabei kein Script abarbeiten muß, geht es relativ schnell. Es spricht aber nichts dagegen, sich in einem Script eine Funktion "innerHTML()" zu schreiben, die dasselbe tut - eben mithilfe der API des DOM.

Besser wäre übrigens eine Funktion "innerXML()", denn das "innerHTML" der Mozilla-Familie meint auch wirklich "HTML" und verweigert bei XML-Daten den Dienst.

Aber das DOM ist ja wohl umständlich bis sonstwohin. Da haben mal so richtige Schreibtischtäter voll auf die Kacke gehaun.

Nein. Das waren "conceptionists", die sich einer systematischen Logik verpflichtet fühlen, welche sich auf jeder Plattform nachvollziehen läßt. An dilettantische "Homepagedesigner" haben sie dabei zugegebenermaßen weniger Gedanken verschwendet.

Was ich mit innerHTML in ein/zwei Zeilen schreibe, dafür brauch ich im DOM eine ganze Seite: createElement, createTextNode, createHasteNichGeseh'n, dann die Attribute auch noch alle schön einzeln createn und allen schön (immer einzeln versteht sich) Werte zuweisen und dann (etwa wenn Weihnachten ist) alles schön einzeln in den DOM-Baum einhängen.

Tja. Dann machst Du was verkehrt und hast wohl irgendwas nicht ganz verstanden :-) :-) :-)

[Andreas Lindig]

Du Ärmster.
Du bist "Programmierer"?
Für Laien:...
dilettantische "Homepagedesigner"

zeig her was du kannst, du Profi :-)
mit Vorurteilen scheint's sich ganz bequem zu leben, gell?

Gruß, Andreas

[Dracophagos]

zeig her was du kannst, du Profi :-)

Was willst Du? Von mir erfahren, wie es geht?

Ganz einfach:

Du schreibst einer rekursive, also sich selbst aufrufende Funktion, die den XML-Baum runterkrabbelt, dabei zwei Vektoren als Variablenpuffer verwendet und nennst sie "innerXML(p)"

mit Vorurteilen scheint's sich ganz bequem zu leben, gell?

Da muß ich als "Schreibtischtäter" Dir voll und ganz recht geben :-) :-) :-)

Gruß, Andreas

Beate Paupert Spirituell

[Gunnar Bittersmann]

Dracophagos,

HTML, weil das ein XML-Dialekt ist

Nicht wirklich. Wirklich nicht.
Gunnar

[Chräcker Heller]

Hallo,

ich kann Dich gut verstehen. Ich hatte lange eine Opera-Vertrösterseite, allerdings eben "auch", weil Opera lange überhaubt keine "einmal gesendete" Seitenelemente per JS dynamisch ändern konnte. (Habe dafür viele wirklich freundliche Post von Opera-Nutzern bekommen)

Mittlerweile arbeite ich auch so leidlich mit diesem Knotenjedöns. Ich denke, das das alles sicherlich logisch ist ;-) Und diese "Verknotung" von "Dingen" sicherlich die wahrste richtigste abzuleitende Art und Weise war, das "organisch" und ableitenderweise einen beschreiben zu lassen. (Also so, wie gerade mein letzter Satz, nur "richtiger"). Es ist für Normalsterbliche nur eben wirklich schwerer zu verstehen. Es bedarf Übung in abstraieren von Regeln und übertragen von Regeln und eine Art "vierdimensionale" Denke die Programmierer so verinnerlicht haben. Wie diese document.dieses.fenster.jenes.funktion.welches()-Ketten, da bin ich schon immer gescheitert.

Mittlerweile arbeite ich wie gesagt leidlich gut mit diesem Modell und schreibe nur noch ab und an für den IE Ausnahmefunktionen, der kann nämlich manches noch nicht... (Wie immer eben....)

Chräcker

[Cyx23]

Hallo Andreas,

DOM könnte in der Form allerdings auch als massiver Rückschritt gesehen werden, zumal "kurze Wege" naheliegen wenn es bereits möglich ist Elemente über ihre ID direkt anzusprechen und nicht wie bei Netscape 4 durch die Seitenhierachie hangeln zu müssen.

Die Verwendung von "innerHTML" ist aber leider auch beim Mozilla immer wieder problematisch, sodass im Einzelfall, wie im o.g. Beispiel per "createTextNode", nachgeholfen werden muss. "innerHTML" ist also trotz der breiten Unterstützung durch die meisten Browser kein Allheilmittel.

Komplett mit DOM einheitlich zu arbeiten ist nach meinen Erfahrungen (besonders mit den IEs) leider auch nicht immer möglich, und auch beim IE6 gibt es offenbar kleine Abweichungen sodass ggf. auch da (IE 6 vs. Mozilla) noch eine Browserweiche nötig werden kann.

Grüsse

Cyx23

[Christian Kruse]

你好 Andreas,

Aber das DOM ist ja wohl umständlich bis sonstwohin. Da haben mal so
richtige Schreibtischtäter voll auf die Kacke gehaun. Was ich mit
innerHTML in ein/zwei Zeilen schreibe, dafür brauch ich im DOM eine
ganze Seite: createElement, createTextNode, createHasteNichGeseh'n,
dann die Attribute auch noch alle schön einzeln createn und allen
schön (immer einzeln versteht sich) Werte zuweisen und dann (etwa
wenn Weihnachten ist) alles schön einzeln in den DOM-Baum einhängen.
Haben die se eigentlich noch alle?

DOM ist nicht (nur) fuer Browser entwickelt worden. Es bietet eine
standardtisierte API zum Zugriff auf (XML-)Dokumente. Deshalb kann es im
DOM auch kein innerHTML geben: wenn ich ein C-Programm fuer die
Kommandozeile schreibe, dass einen DOM-Parser benutzt um XML zu
verarbeiten, dann ist innerHTML da ziemlich sinnbefreit. Es bildet halt
den kleinsten gemeinsamen Nenner.

Wenn man sich so die Seiten vom W3C ansieht, erkennt man ja auch
schnell, daß die sich mit der Erstellung von Webseiten scheinbar
nicht sonderlich beschäftigen... ;-) Wofür haben die diesen Mist
eigentlich entworfen? Langeweile?

Nicht (nur) fuer JavaScript.

再见,
 CK