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

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht