DOM-Manipulation JavaScript - Praxistutorial 2 - Inhalte einfügen
1. Die Abschnitte
- Einführung
- Die Initialisierung
- Anfrage vorbereiten
- Daten zusammenstellen
- Anfrage senden
- Der PHP-Code
- Das Ergebnis auswerten
- Die select-Felder manipulieren
- Die Ergebnisse ausgeben
- Die Links generieren
- Noch eine Anfrage
- Inhalte einfügen
- Ein paar Anmerkungen
2. Die Methode showDetails
Was jetzt kommt, ist nicht mehr besonders schwer, da wir ja einiges davon schon gemacht haben und nun damit auch vertraut sein sollten. Darum werde ich hier meine Erläuterungen auch auf das Wesentliche beschränken.
function showDetails ()
{
var detail = document.getElementById('details');
while (detail.hasChildNodes())
{
var wech = detail.firstChild;
detail.removeChild (wech);
}
var ref_logo = xml.getElementsByTagName('logo')[0];
var ref_adresse = xml.getElementsByTagName('adresse')[0];
}
Erläuterung
Eigentlich sollte ich hierzu gar nichts mehr sagen. Wir entfernen zuerst in der while alle enthaltenen Kindknoten
(wie schon bei den Links) und holen uns dann die Verweise auf die beiden XML-Tags.
3. Wenn ein Bild vorhanden ist
Absatz erzeugen
function showDetails ()
{
...
if (ref_logo.firstChild)
{
var absatz = document.createElement ('p');
var logo_class = document.createAttribute ('class');
logo_class.nodeValue = 'logo'
absatz.setAttributeNode (logo_class);
}
}
Erläuterung
Zunächst überprüfen wir, ob das XML-Tag überhaupt einen Bildnamen beinhaltet. Dabei suchen wir einfach nach dem ersten Kindknoten
(der in diesem Fall ja ein Textknoten wäre) mittels if (ref_logo.firstChild). Was nun kommt, ist ja bekannt.
Absatzknoten erzeugen, Attributknoten für class erzeugen, Klassennamen ('logo') in Attributknoten einhängen und
zu guter Letzt Attributknoten in Absatzknoten einhängen.
Bild erzeugen
if (ref_logo.firstChild)
{
...
var logo = ref_logo.firstChild.nodeValue;
var bild = document.createElement ('img');
bild.setAttribute ('src', 'pics/' + logo);
bild.setAttribute ('alt', logo);
absatz.appendChild (bild);
detail.appendChild (absatz);
}
Erläuterung
Aus nicht wirklich weltbewegendes. Zunächst holen wir uns mit var logo = ref_logo.firstChild.nodeValue; den Namen
des Bildes. Anschließend kommt das übliche Procedere, Bild erzeugen (var bild = document.createElement ('img');),
Pfad im src-Attribut anlegen (bild.setAttribute ('src', 'pics/' + logo);), alt-Attribut
festsetzen, Bild in Absatz einhängen (absatz.appendChild (bild);) und damit man auch was zu sehen bekommt, den Absatz
in das div-Element hineinsetzen (absatz.appendChild (bild);). Das war es auch schon.
4. Wenn eine Adresse vorhanden ist
if (ref_adresse.firstChild)
{
var adresse = ref_adresse.firstChild.nodeValue;
var absatz = document.createElement ('p');
var text = document.createTextNode (adresse);
absatz.appendChild (text);
if (ref_logo.firstChild && ref_logo.firstChild.nodeValue)
{
var adr_class = document.createAttribute('class');
adr_class.nodeValue = 'einrueck';
absatz.setAttributeNode (adr_class);
}
detail.appendChild (absatz);
}
Also hierzu sage ich gar nichts mehr! Wer den Codeschnipsel immer noch nicht begreift, sollte doch noch mal ganz von vorne anfangen und dann später wiederkommen.