DOM-Manipulation - Ausnahmen
1. Ausnahmen
... gibt es bei JavaScript immer wieder. Manche lassen sich historisch erklären, manche durch proprietäre Formate, die Hersteller (insbesondere die aus Redmond) in ihre Browser einbauen. Die für die DOM-Manipulation wichtigsten will ich hier der Vollständigkeit halber vorstellen.
2. Formulare
... stellen innerhalb des DOM eine kleine Besonderheit dar, da die Zugriffs- und Manipulationsmöglichkeiten ein wenig anders sein können.
Das Wurzelelement
Ist natürlich das Formular als Solches. Der Zugriff darauf kann ganz einfach über document[formularname] erfolgen.
Man benötigt also nicht das übliche document.getElementById. Das sähe bei folgendem Beispiel so aus:
<form action="irgendwas.php" method="post" name="suchform">
...
</form>
...
meinform = document.suchform;
Obacht!
Das ist nicht möglich, wenn man als DOCTYPE-Definition XHTML 1 in der
Variante strict nutzt. Denn da ist das name-Attribut bei Formularen verboten.
Weitere Elemente
Kann man entsprechend des obigen Schemas ansteuern, also document[formularname][elementname].
<form action="irgendwas.php" method="post" name="suchform">
<input name="bla" value="blubb" />
</form>
...
meinbla = document.suchform.bla.value;
select-Felder
option-Elemente werden innerhalb eines select-Feldes intern als Arrays verarbeitet. Daher reicht es
in diesem speziellen Fall aus, wenn man die Länge des Arrays einfach auf 0 setzt, und schwuppdiwupp, sind alle
verschwunden.
<form action="bla.php" method="post" name="suchformular">
<select name="auswahl">
<option value="1">Alles</option>
<option value="2">Einiges</option>
<option value="3">Garnichts</option>
</select>
</form>
...
document.suchformular.auswahl.length = 0;
3. innerMicrosoft
Hierbei handelt es sich um zwei Methoden, von denen die Herren Programmierer aus Redmond meinten, sie unbedingt in ihren Browser
einbauen zu müssen. Wahrscheinlich um diverse Mängel ihrer Produkte zu übertünchen. Eines von beiden hat sich aber als so
komfortabel herausgestellt, dass andere Hersteller dies ebenfalls in ihre Browser integrierten. Und das will ich euch jetzt
mal kurz vorstellen. Ach ja, das andere nennt sich innerText, aber damit musste ich mich noch nie beschäftigen.
Außerdem halte ich es für relativ nutzlos.
innerHTML
Dies ist eine einfache Möglichkeit, um kompletten HTML-Code in einen Elementknoten einzufügen. Dies ist auch oftmals der letzte Rettungsanker bei Problemen, da zum Beispiel der Internet Explorer manchmal Probleme mit dynamisch gesetzten Attributen hat.
<div id="rahmen">bla blubb jodelblah</div>
...
rahmi = document.getElementById('rahmen');
// Ersetzt bestehenden Inhalt
rahmi.innerHTML = '<h1>Dies ist eine Überschrift</h1>';
// Fügt Überschrift an Inhalt an
rahmi.innerHTML += '<h1>Dies ist eine Überschrift</h1>';
// Löscht alle bestehenden Kndelement
rahmi.innerHTML = '';
4. Fazit
So, das war die Theorie. Gar nicht so schwer, wenn man es einmal begriffen hat, oder? In den folgenden Tutorials werden wir das bisher Erlernte mal anhand einiger Beispiele durchgehen. Dann werdet ihr auch lernen, wann welcher Browser wo herumzickt.