Der Befehl: document.getElementById("").

Wo gehöre ich eigentlich hin?




Zunächst einmal wieder der Code:

function ausrichten (wie)
{
  document.getElementById("unentschlossen").align = wie;
}

Ein neuer Befehl: document.getElementById("").

Wir untersuchen den Aufbau des Befehls:

  1. Der Befehl besteht aus 2 Teilen, die durch einen Punkt getrennt sind. Dies kennst du schon von window.irgendein Befehl.
    Allerdings darfst du den Befehlsteil document. nicht weglassen!!!
  2. Achte bei document. auf die Schreibung!
    Hier kommt es jetzt auch sehr genau auf die Groß-/Kleinschreibung an.
    Viele Befehle in Java-Script haben vor dem eigentlichen Befehl das Wort document, vom Befehl durch eine Punkt getrennt.
  3. Klicke einmal folgenden Link an. de.selfHtml.org/javascript/objekte/document.htm
    Hier wird dir gezeigt, welche Befehle nach document möglich sind. Vergiß den Punkt nicht!
  4. Wir benutzen hier den Befehl getElementById("").
  5. In die Klammer zwischen die Anführungszeichen wird nun wiederum etwas Neues eingeben: eine ID. ID bedeutet identity, also so viel wie Identität.
  6. Dann bedeutet also getElementById("Bild") so viel wie: "Such im <body> das Element mit der Identität Bild".
  7. Also müssen wir einem Html-AG, das Attribut id="Bild" geben.

    Der Parameter von id="", in unserem Beispiel "Bild" ist frei wählbar.
  8. In unserem Fall wurde dem TAG der Zeile "Wo gehöre ich eigentlich hin" die ID "unentschlossen" gegeben.
  9. Das sieht dann so aus:
    <h1 id="unentschlossen">Wo gehöre ich eigentlich hin?</h1>
  10. Dem HTML-TAG <<h1> wird also das Attribut id="" gegeben. Also: <h1 id=""> Dem Attribut wird ein Parameter, in diesem Falle "unentschlossen" zugeordnet. Also <h1 id="unentschlossen">
  11. Mit dem "onClick"-Befehl in dem ersten button-TAG im body wird die Funktion "ausrichten('center')" aufgerufen.
    So wird der Funktion ausrichten(wie) das Wort 'center' an die Variable wie übergeben. Das kennst du nun schon.
    In unserem Falle also ein HTML-Attribut-Wort für den Befehl align="".
  12. Der Befehl getElementById("unentschlossen") (achte auf Groß-/Kleinschreibung!) sucht nach dem HTML-Befehl,
    in dem das id-Attribut "unentschlossen" steht. Also: <h1 id="unentschlossen">
  13. An getElementById("unentschlossen") wird mit einem Punkt der align-Befehl angehängt.
    Hier wird also aus einem Html-Attribut ein Java-Script-Befehl - einfach durch Anhängen mit einem Punkt! Das geht leider nicht mit allen Html-Attributen!!!
  14. document.getElementById("unentschlossen").align = "center" gibt also über die id dem TAG <h1> das Attribut aligen ="center"
  15. Ebenso übergeben die anderen Buttons die Wörter 'right' und 'left'.
  16. Man kann auch sagen: Dem h1-TAG wird das HTML-Attribut align mit dem zugehörigen Parameter zugefügt.

Hier das Übergabeschema grafisch.

Werteübergabe

Kurztest:
Schreib genau ab: document.getElementById().
Hier diesmal nichts eintragen!