JavaScript HTML DOM

Über das HTML DOM kann JavaScript auf alle Elemente eines HTML-Dokuments zugreifen.

HTML DOM (Document Object Model)

Wenn eine Webseite geladen wird, erstellt der Browser das Document Object Model der Seite.

HTML DOMDas Modell wird als einObjektbaum konstruiert:

HTML-DOM-Baum

DOM HTML tree

Durch das programmierbare Objektmodell hat JavaScript genügend Leistungsfähigkeit erlangt, um dynamisches HTML zu erzeugen.

  • JavaScript kann alle HTML-Elemente auf der Seite ändern
  • JavaScript kann alle HTML-Attribute auf der Seite ändern
  • JavaScript kann alle CSS-Stile auf der Seite ändern
  • JavaScript kann auf alle Ereignisse auf der Seite reagieren

HTML-Elemente finden

Typischerweise müssen Sie über JavaScript HTML-Elemente manipulieren.

Dazu müssen Sie zuerst das Element finden. Es gibt drei Möglichkeiten, dies zu tun:

  • HTML-Elemente anhand von id finden
  • HTML-Elemente anhand des Tag-Namens finden
  • HTML-Elemente anhand des Klassennamens finden

HTML-Elemente anhand der id finden

Der einfachste Weg, ein HTML-Element im DOM zu finden, ist die Verwendung der id des Elements.

Dieses Beispiel findet das Element mit id="intro":

Beispiel

var x=document.getElementById("intro");

Selbst ausprobieren »

Wenn das Element gefunden wird, gibt die Methode das Element als Objekt zurück (in x).

Wenn das Element nicht gefunden wird, enthält x null.

HTML-Elemente anhand des Tag-Namens finden

Dieses Beispiel findet das Element mit id="main" und findet dann alle <p>-Elemente innerhalb des Elements mit id="main":

Beispiel

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

Selbst ausprobieren »

HTML-Elemente anhand des Klassennamens finden

Dieses Beispiel verwendetgetElementsByClassNameeine Funktion, um Elemente mit class="intro" zu finden:

Beispiel

var x=document.getElementsByClassName("intro");

Selbst ausprobieren »

HTML-DOM-Tutorial

Im weiteren Verlauf dieses Tutorials lernen Sie:

  • Wie Sie den Inhalt von HTML-Elementen ändern (innerHTML)
  • Wie Sie den Stil von HTML-Elementen ändern (CSS)
  • Wie Sie auf HTML-DOM-Ereignisse reagieren
  • Wie Sie HTML-Elemente hinzufügen oder löschen
Andere Erweiterungen