HTML5-Handbuch - die neuen Features von HTML5

in den drei Variablen
rp
,
bp
und
ich
, um die darauffolgenden Zugriffe auf diese Elemente zu verkürzen. Da alle drei
div
-Bereiche ein
id
-Attribut haben, ist der Zugriff auf den entsprechenden Elementknoten mit
getElementById("roterPunkt")
usw. möglich. Anschließend lässt sich mit beispielsweise
rp
genauso arbeiten, als wenn man jedes Mal wieder
document.getElementById("roterPunkt")
notieren würde.
    Über die Variablen
rp
,
bp
und
ich
ist dann auch das
style
-Objekt ansprechbar. Die Funktion
Init()
stattet die drei
div
-Bereiche erst einmal mit anfänglichen CSS-Eigenschaften aus. Alle drei Bereiche werden mit
style.position = "absolute"
absolut im Browserfenster positioniert, also aus dem übrigen Elementfluss herausgelöst. Die linke obere Ecke jedes Bereichs wird mit
style.left
und
style.top
bestimmt. Der Inhalt des
ich
-Bereichs, also das Wort ICH, wird groß und auffällig formatiert.
    Am Ende ruft die Funktion
Init()
die beiden anderen Funktionen
rpKreis()
und
bpKreis()
auf. Jede dieser beiden Funktionen kontrolliert die Kreisbewegung eines der beiden Punkte, indem sie letztlich die linke obere Ecke des
div
-Bereichs, der die jeweilige Grafik enthält, neu berechnet. Dabei kommen die Kreisfunktionen für Sinus (
Math.sin()
) und Cosinus (
Math.cos()
) zum Einsatz. Am Ende ruft jede der beiden Funktionen sich selber rekursiv mit
window.setTimeout()
wieder auf. Damit ist es möglich, die nächste Position des
div
-Bereichs mit der Grafik zu setzen. Die Variablen wie
bpGrad
,
bpGeschw
usw., mit denen diese Funktionen arbeiten, wurden zuvor im globalen Bereich des Scripts initialisiert.
10.3.7      Elemente, Attribute und Text im DOM erzeugen
    DOM-Scripting besteht nicht nur darin, auf bereits in HTML vorhandene Elemente zuzugreifen, sondern auch neue zu erzeugen und in den Strukturbaum einzuhängen. Wie das funktioniert, zeigt das folgende Beispiel. Es stellt einen primitiven Webseiten-Editor dar.
Beispiel
    
    
    
    
    
    
    
    
    

    
    Überschrift 1
    Überschrift 2
    Überschrift 3
    Textabsatz
    Trennlinie
    
    
    
    

    
    
    
    Bild 10.9: Hier kann der Anwender den Seiteninhalt selber schreiben.
Erläuterung
    Das Beispiel enthält im Dokumentkörper ein Formular mit einer Auswahlliste, einem Eingabefeld und einem Button. Unterhalb ist noch ein
div
-Bereich mit
id="User"
notiert, der jedoch noch keinen konkreten Inhalt hat. In der Auswahlliste des Formulars kann der Anwender einen HTML-Elementtyp auswählen – in den
value
-Attributen der
option
-Elemente sind die tatsächlichen HTML-Elementnamen der jeweiligen Auswahl gespeichert. Im Eingabefeld des Formulars kann der Anwender einen Textinhalt für das ausgewählte Element eingeben. Wenn er dann auf den Button klickt, ruft der Event-Handler
onclick
die Funktion
Hinzufuegen()
auf, die im Dokumentkopf in einem Script-Bereich notiert ist.
    Im Script-Bereich im Dokumentkopf werden in den Variablen
Elementtyp
und
Elementinhalt
erst einmal die DOM-Objekte des
select
-Elements zur Elementtypauswahl und des
input
-Elements für den vom Anwender eingegebenen Elementinhalt gespeichert.
    Die Anweisung
var Typ = Elementtyp.options[Elementtyp.selectedIndex]. value;
initialisiert eine Variable namens
Typ
mit dem vom Anwender ausgewählten Eintrag aus der Auswahlliste. In
Typ
ist anschließend – je nach Auswahl – so etwas wie
h1
,
h2
,
h3
,
p
oder
hr
gespeichert.
    Mit
document.createElement(Typ) 
wird dann ein leeres, neues Element vom Typ
Typ
erzeugt, also je nach Wert der Variablen z. B. ein
h1
-Element oder ein
p
-Element. Damit wird das Element aber