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 So sieht's ausQuellcode

<main id="main">
  <button data-attribut="hinweis">Hinweis</button>
  <button data-attribut="empfehlung">Empfehlung</button>
  <button data-attribut="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 der Attribut id="unentschlossen" und drei Buttons mit data-Attributen.

  
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('main').addEventListener('click', ändereKlasse);
  
  function ändereKlasse(event) {
    var button = event.target,
    name = button.getAttribute('data-attribut'),
    elem = document.getElementById('unentschlossen');
    elem.className = name;
  }
  
});

Das DOMContentLoaded-Ereignis ruft eine anonyme Funktion auf, in der ein Eventhandler an das main-Element gehängt wird. Wenn dies angeklickt wird, wird die Funktion ändereKlasse() aufgerufen.

Dort wird mit Event.target ermittelt, welcher der Buttons angeklickt wurde. Mit getAttribute wird das entsprechende data-Attribut ausgelesen.

Jetzt wird mit document.getElementById('unentschlossen') auf das div mit dieser id zugegriffen. Die Funktion weist der Eigenschaft className den jeweils übergebenen Wert zu. Dadurch wird die Klasse und damit auch die Darstellung dynamisch geändert.
Die anderen divs bleiben unverändert.

Beachten Sie: Die Methode getElementById() regelt lediglich den Zugriff auf HTML-Elemente. Weitere Möglichkeiten, um HTML-Elemente dynamisch zu beeinflussen, bietet das Node-Objekt an.

Sie können 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/Grundlagen des DOM: Ansprechen eines Elements
  Helferfunktion zum Ausgeben von Text

Weblinks

• W3C: getElementById
• MDN: Document.getElementById