JavaScript getElementById Methode

GetElementById ist eine Methode des in JavaScript vordefinierten Objekts Document. Mit dieser Methode kann man ein einzelnes HTML-Element ansprechen, indem man es über dessen ID-Eigenschaft adressiert. Es wird ein Verweis (JavaScript Node-Objekt) auf das ausgewählte Objekt zurückgeliefert, über den man die Eigenschaften des HTML-Elements ansprechen kann. Dies gilt sowohl für die eigentlichen HTML-Attribute, wie auch für die StyleSheet-Definitionen (unter Verwendung des Style-Objekts) des jeweiligen HTML-Elements.

Als Parameter erwartet die Methode getElementById das ID-String des anzusprechenden HTML-Elements. Der Rückgabewert ist ein Verweis auf das entsprechende Element-Objekt bzw. "null", wenn kein Objekt mit dieser ID existiert. Wurden mehrere Elemente mit der ID gekennzeichnet, so wird stets das Element zurückgeliefert, welches als erstes erzeugt wurde (im HTML-Dokument als erstes definiert wurde oder das erste per JavaScript erzeugte).

Die Methode getElementById wird auch in anderen JavaScript Beispielen wie unter setInterval, clearInterval oder clearTimeout genutzt.

JavaScript getElementById Beispiel 1: Zugriff auf den Inhalt eines HTML-Elements

Das folgende Beispiel soll den lesenden Zugriff auf den Inhalt eines HTML-Elements und die Möglichkeiten der Manipulation des Inhalts von HTML-Elementen demonstrieren. Dazu werden die Inhaltsdaten (der im SPAN-Element enthaltene Text) ausgelesen und angezeigt. Die Änderung des Inhalts erfolgt durch die Funktion setContent, in der ein vom Benutzer eingegebener Text zugewiesen wird.

Im HTML-Code des Beispiels wird zunächst ein SPAN-Element definiert, dessen Inhalt später durch den JavaScript-Code ausgelesen und verändert werden soll. Es erhält über das HTML-Attribut ID eine eindeutige ID (span-element) und kann von da an über diese ID mit der JavaScript-Methode getElementById angesprochen werden. Darauf folgen die Links zur interaktiven Bedienung, die beim Anklicken die entsprechende JavaScript-Funktion ausführen.

Nun folgt der Script-Teil mit dem JavaScript-Code, der die gewünschten Aktionen durchführt. Aufgabe der Funktion showContent ist es den Text, welcher im SPAN-Element gespeichert ist, in einer Alert-Box anzuzeigen. Zu diesem Zweck wird mit Hilfe der Methode getElementById das HTML-Element mit der ID span-element ermittelt und ein Verweis auf dieses HTML-Element in der Variable no gespeichert. Es handelt sich dabei um einen Verweis vom Typ Node, einem vordefinierten JavaScript-Objekt, über welches unter anderem der Zugriff auf die einzelnen HTML-Attribute ermöglicht wird. Den Inhalt des SPAN-Elements erhält man durch den darauf folgenden Zugriff, in dem mit der Eigenschaft firstChild auf das erste Kind-Element zugegriffen wird und dessen Inhalt – der in der darunter liegenden Data-Eigenschaft gespeichert ist – in der Variable content gespeichert wird. Mit dem darauf folgenden Alert-Aufruf wird der zuvor gespeicherte Inhalt dann in einer Alert-Box angezeigt.

Die zweite Funktion in diese Beispiel ändert den Inhalt des SPAN-Elements. Der zuzuweisende Inhalt wird zuvor vom Benutzer in einem Eingabe-Dialog eingegeben. Dazu wird die Methode prompt des Window-Objekts bemüht. Sie wird unter JavaScript dazu verwendet, eine Benutzereingabe zu ermöglichen und liefert die eingegebene Zeichenkette als Rückgabewert – der hier zur weiteren Verarbeitung in der Variable content gespeichert wird. Am Ende der Funktion wird der eingegebene String im SPAN-Element gespeichert. Wie in der Funktion showContent wird auch hier das entsprechende über getElementById ermittelt und die Zeichenkette direkt im darunterliegenden Node-Objekt gespeichert.

<!-- SPAN-Element mit der ID "span-element" definieren
     Der Inhalt des Elements soll vom Script manipuliert werden -->
<span id="span-element">Initialer Inhalt des SPAN-Elements</span><br>
<!-- Links, über welche die Manipulation des SPAN-Elements
     eingeleitet werden kann -->
<a href="javascript:showContent ()">Zeige Inhalt des Tags</a> /
<a href="javascript:setContent ()">Inhalt &auml;ndern</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Die Funktion ermittelt den Inhalt des SPAN-Tags mit der ID
// "span-element" und zeigt diesen dann in einem Alert-Dialog an
function showContent () {
  // HTML-Element mit der ID "span-element" ermitteln und
  // in der Variable no (Node-Objekt) speichern
  no = document.getElementById ('span-element');
  // Inhalt des HTML-Elements auslesen
  content = no.firstChild.data;
  // Alert-Box mit dem Inhalt des HTML-Elements anzeigen
  alert ('Inhalt des SPAN-Tags mit der ID span-element: ' + content);
}

// Funktion fordert dien Benutzer zur Eingabe eines Textes ein, der
// dann im SPAN-Element mit der ID "span-element" ausgegeben wird
function setContent () {
  // Eingabe-Dialogfenster mit einer entsprechenden Aufforderung
  // zur Eingabe eines Anzeigetextes anzeigen
  content = window.prompt ('Bitte geben Sie den neuen Inhalt\n' +
                           'des SPAN-Tags ein.');
  // Eingabe des Benutzers im SPAN-Element mit der ID "span-element"
  // ausgeben
  document.getElementById ('span-element').firstChild.data = content;
}
// -->
</script>

Initialer Inhalt des SPAN-Elements
Zeige Inhalt des Tags / Inhalt ändern

weiter zu Seite 2 »