Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

JavaScript/Tutorials/DOM/Was ist das DOM

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
10-15min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Kenntnisse in
● HTML
● JavaScript

Das DOM ist eigentlich eine Schnittstelle zwischen JavaScript und HTML-Dokumenten, sein Name Document Object Model gründet sich auf das ihr zugrundeliegende Objektmodell.

Ein HTML-Dokument besteht ja eigentlich nur aus reinem Text, der erst vom Browser ausgelesen und geparst wird. Die einzelnen Elemente werden so in einer Baumstruktur als Unterobjekte des window-Objekts dargestellt.

DOM - Baumstruktur einer Webseite

Mit JavaScript können Sie nun beliebige Elemente im Elementbaum ansprechen, sie verändern oder entfernen und mit Anwenderereignissen verknüpfen.

Elementknoten ansprechen

Erinnern Sie sich noch an unser "Hallo Welt"-Beispiel? Die Nachteile einer Textausgabe mittels alert sind vor allem die Speicherbelastung des Browsers sowie die mangelnde Gestaltungsmöglichkeit des Ausgabefensters.

Beispiel ansehen …
<output id="info"></output>


<script>
  'use strict';
  var text = 'Hallo Welt!';
  
  document.getElementById('info').innerText = text;
  
</script>
Das Script ist nun in eine Webseite eingebunden. Teil dieser Webseite ist ein (noch) leeres output-Element mit der id info.

Anstelle der Ausgabe mit alert wird mit document.getElementById das output-Element über seine id info angesprochen und mit innerText mit dem auszugebenden Text gefüllt.

Ein weiterer Vorteil dieser Methode ist die Möglichkeit den Ausgabetext beliebig mit CSS zu gestalten.

Dies war die früher übliche Methode, mit JavaScript auf einzelne Elemente zuzugreifen. Da man nicht genau wusste, welche Elemente später als Zugriffspunkte benötigt würden, wurden sicherheitshalber viele id-Attribute vergeben, die das HTML-Markup(womöglich noch in Verbindung mit präsentationsbezogenen Klassennamen ) unnötig aufblähten.

Empfehlung: Versuchen Sie semantisches Markup zu verwenden.
  • Verwenden Sie die passenden Elemente und nutzen Sie deren browsereigene Funktionalität!
  • Setzen Sie ids und Klassennamen nur sparsam ein.

Da diese Art des Elementzugriffs eigentlich umständlich war, entwickelten Frameworks wie jQuery eine Methode, die den direkten Zugriff auf Elemente über ihrem Tag-Namen oder über Klassen und Attribute ermöglichte. Diese querySelector-Methode wurde in natives JavaScript übernommen und wird von allen Browsern (selbst dem fast ausgestorbenen IE8) verstanden.

Im Folgenden verwenden wir die vielseitigere querySelector-Methode:

Beispiel ansehen …
<output></output>

<script>
  'use strict';
  var text = 'Hallo Welt!';
  
  document.querySelector('output').innerText = text;
  
</script>
Das (noch) leere output-Element wird über die querySelector-Methode angesprochen und mit innerText mit dem auszugebenden Text gefüllt.
Empfehlung: Gegenüber document.getElementById(), das nur Elemente anspricht, die ein eindeutiges, unverwechselbares id-Universalattribut besitzen, sucht die querySelector-Methode nach den im CSS üblichen Selektoren wie Elementen, Klassen und IDs, aber auch ARIA-Attributen, wie wir später sehen werden.
Sie spricht das erste gefundene Element an. Mit QuerySelectorAll könnten Sie alle vorhandenen Vorkommen ansprechen.


Mit diesen Methoden können Sie auf das DOM (und dessen Elementknoten) einer Webseite zugreifen:

  • querySelector: gibt das erste Element zurück, das dem angegebenen CSS-Selektor entspricht
  • querySelectorAll: gibt eine Liste von Elementen zurück, die dem angegebenen CSS-Selektor entsprechen
  • getElementsByClassName: gibt eine Liste von Elementen zurück, die der angegebenen Klasse entsprechen
  • getElementById: gibt das Element zurück, das die angegebene id besitzt.
  • getElementsByTagName: greift auf ein beliebiges Element im Elementenbaum des Dokuments zu.

Textknoten ansprechen

Die meisten Elemente wie Überschriften, Absätze, Links und Buttons enthalten neben möglichen Kind-Elementen noch Textknoten mit dem eigentlichen Inhalt der Webseite.

Im oberen Beispiel wurde dieser Textknoten mit innerText verändert:

Beispiel: innerText
  document.getElementById('info').innerText = text;

Diese Eigenschaft wurde von Microsoft für den Internet Explorer entwickelt, von Firefox aber erst mit der Version 45 im März 2016 übernommen.

Deshalb findet sich in vielen älteren Beispielen eine etwas umständlichere Methode:

Beispiel: firstChild.nodeValue
  document.getElementById('info').firstChild.nodeValue = text;
In diesem Beispiel wird mit Node.firstChild der erste Kindknoten des Elements mit der id info ermittelt und dann dessen Wert mit Node.nodeValue geändert.

Des Weiteren existiert mit innerHTML eine weitere Methode, mit der Sie nicht nur Text, sondern sogar weitere HTML-Kindelemente einfügen können.

Beispiel: innerHTML
  document.getElementById('info').innerHTML = '<strong>' + text + '</strong>';
In diesem Beispiel wird die Variable text von zwei Zeichenketten umschlossen, in denen sich das Markup für ein strong-Element befindet. Wenn der Code ausgeführt wird, ändert sich nicht nur der Textknoten, sondern es wird ein strong-Element in den Elementbaum eingefügt.
Beachten Sie: Durch die Verwendung von innerHTML könnten hier auch weitere HTML-Elemente beinhaltet sein. Dies wird jedoch als unsicher angesehen, da so unter Umständen Benutzereingaben mit schädlichen Skripten in die Webesite eingefügt werden können.