Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

JavaScript/DOM/Document/getElementById

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Document
Wechseln zu: Navigation, Suche

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

  • DOM 1.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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[Bearbeiten]

Beispiel ansehen …
<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[Bearbeiten]

Weblinks[Bearbeiten]