JavaScript-Programmierung von Kopf bis Fuß

240 Kapitel 6

Wie getElementById funktioniert

Was haben wir da gerade gemacht? Lassen Sie uns das noch einmal im Detail ansehen.

Mithilfe des document-Objekts können wir aus unserem Code auf das DOM zugreifen.

Das document-Objekt ist ein eingebautes Objekt mit einer Reihe von Eigenschaften

und Methoden, zu denen auch getElementById gehört und mit dem Sie auf ein

bestimmtes Element im DOM zugreifen können. getElementById übernimmt eine

ID und gibt das dazugehörige Element zurück. Vermutlich haben Sie IDs schon

einmal benutzt, um bestimmte Elemente per CSS auszuwählen und mit Stilen zu

versehen. Hier verwenden wir die ID, um an ein Element im DOM zu kommen (das

<p>-Element mit der ID "gruener_planet").

Sobald wir das richtige Element haben,

können wir es verändern. Mehr dazu in

einem Moment. Zunächst wollen wir uns

die Funktionsweise von getElementById

noch einmal Schritt für Schritt ansehen:

Mit getElementById auf ein Element zugreifen

var planet = document.getElementById("gruener_planet");

2

3

Sie haben mich gefunden! Ich

bin das <p>-Element mit der ID

"gruener_planet". Sagen Sie mir

einfach, was zu tun ist.

p

Hallo, hier ist der Browser.

Ich lese die Seite und

erstelle daraus ein DOM.

1

body

p id =”gruener_planet”

p id =”roter_planet”

p id =”blauer_planet”

Alles in

Ordnung

Nichts zu

berichten

Alle Systeme

OK

head

html

document

Hier ist unser Aufruf

von getElementById.

Und wir suchen nach einem Element

mit der ID »gruener_planet«.

Das zurückgegebene Element

wird zur späteren Verwendung

der Variablen planet

zugewiesen.

Wir benutzen das document-Objekt,

um auf das DOM zuzugreifen.

Hier ist der JavaScript-

Code. Ich suche im DOM

nach einem Element mit der

ID "gruener_planet".

Folgen Sie den Schritten

1

, 2, 3.