JavaScript/DOM/Document/getElementById

Die Methode Document.getElementById() greift auf ein HTML- oder SVG-Element zu, das ein eindeutiges id-Attribut besitzt.

Syntax

element = document.getElementById(id);

• id: eindeutige id, mit der sich das Element identifizieren lässt.
  (JavaScript beachtet Groß und Kleinschreibung!)

• element: Referenz auf ein Element-Objekt oder null, wenn keine id exisitiert.

Anwendungsbeispiel

Beispiel ansehen …

<main id="main">
  <button data-aussehen="hinweis">Hinweis</button>
  <button data-aussehen="empfehlung">Empfehlung</button>
  <button data-aussehen="aside">noch mal anders</button>
 
  <div>
    <h2>Überschrift</h2>
    <p>Dieser div-Container ist wie alle anderen.</p>  
  </div>
  <div id="unentschlossen">
    <h2>Überschrift</h2>
    <p>Dieser div-Container wird individuell gestaltet.</p>  
  </div>

Das Beispiel enthält mehrerere divs, davon eins mit dem Attribut id="unentschlossen" und drei Buttons mit data-Attributen.

  
document.addEventListener('DOMContentLoaded', function () {
  const unentschlossenesElement = document.getElementById('unentschlossen');

  document.getElementById('main')
          .addEventListener('click', aktualisiereAussehen);

  function aktualisiereAussehen(event) {
    const geklickterButton = event.target,
          aussehenKlasse = geklickterButton.dataset.aussehen;

    unentschlossenesElement.className = aussehenKlasse;
  }
});

Das DOMContentLoaded-Ereignis ruft eine anonyme Funktion auf. Dort wird mit Hilfe der getElementById()-Funktion das div-Element mit der id 'unentschlossen' ermittelt und in einer Variablen gespeichert.

Als zweite Aktion wird ein click-Eventhandler auf dem Element mit der id 'main' registriert. Sie sehen hier, wie man das von getElementById() ermittelte Element direkt weiterverwenden kann, ohne es zuerst in einer Variablen zu speichern. Der Aufruf von addEventListener ist der Lesbarkeit halber in einer eigenen Zeile notiert, für JavaScript gehören beide Zeilen zusammen.

Ein Klick auf irgendeinen der Buttons löst dort ein click-Event aus, durch das Event-Bubbling gelangt das Event zum main-Element und ruft dann die registrierte Funktion auf.

Im Eventhandler wird zunächst die target-Eigenschaft des Eventobjekts ausgelesen, um zu erfahren, welcher der Buttons geklickt wurde. Vom Button wird dann mit Hilfe der dataset Eigenschaft das data-Attribut data-aussehen ausgelesen.

Das div-Element mit id='unentschlossen' steht in der Variablen unentschlossenesElement zur Verfügung. Um das vom Button gewünschte Aussehen zu erreichen, erhält es den Inhalt des data-aussehen Attributs als Klasse. Durch die im CSS bereitgestellten Regeln erhält das div-Element das gewünschte Aussehen. Die anderen div-Elemente bleiben unverändert.

Die Variable unentschlossenesElement könnte Ihnen merkwürdig vorkommen. Wenn ein Klick behandelt wird, ist die Funktion, die bei DOMContentLoaded aufgerufen wurde, doch längst beendet. Wieso ist die Variable noch verfügbar? Warum das so ist, finden Sie unter dem Stichwort Closures.

Beachten Sie: Die Methode getElementById() dient lediglich dazu, ein HTML Element an Hand seiner ID zu finden. Man erhält von ihr ein Element-Objekt, das seinerseits eine Vielzahl von Eigenschaften zur Verfügung stellt, um das Aussehen des gefundenen Elements zu beeinflussen.

Natürlich können Sie an diese Methode auch Variablen übergeben. Dazu notieren Sie einfach den Variablennamen ohne Anführungszeichen anstatt eines festen Wertes z. B. getElementById(Variablenname). Voraussetzung ist jedoch, dass die Variable auch existiert.

Siehe auch

• JavaScript/Tutorials/Einstieg/Was ist das DOM: Ansprechen eines Elements
  Helferfunktion zum Ausgeben von Text

Weblinks

• W3C: getElementById
• MDN: Document.getElementById