HTML DOM Methoden

HTML-DOM-Methoden sind Aktionen, die wir auf Knoten (HTML-Elementen) ausführen können.

HTML-DOM-Eigenschaften sind Werte, die wir auf Knoten (HTML-Elementen) festlegen und ändern können.

Programmierschnittstelle

Auf das HTML DOM kann über JavaScript (und andere Programmiersprachen) zugegriffen werden.

Alle HTML-Elemente sind als Objekte definiert, und die Programmierschnittstelle besteht aus Objektmethoden und Objekteigenschaften.

Methoden sind Aktionen, die Sie ausführen können (z. B. Elemente hinzufügen oder ändern).

Eigenschaften sind Werte, die Sie abrufen oder festlegen können (z. B. den Namen oder Inhalt eines Knotens).

getElementById()-Methode

Die Methode getElementById() gibt das Element mit der angegebenen ID zurück:

Beispiel

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

Selbst ausprobieren »

HTML-DOM-Objekte - Methoden und Eigenschaften

Einige gängige HTML-DOM-Methoden:

  • getElementById(id) - ruft den Knoten (das Element) mit der angegebenen ID ab
  • appendChild(node) - fügt einen neuen Kindknoten (Element) ein
  • removeChild(node) - entfernt einen Kindknoten (Element)

Einige gängige HTML-DOM-Eigenschaften:

  • innerHTML - der Textwert eines Knotens (Elements)
  • parentNode - der Elternknoten eines Knotens (Elements)
  • childNodes - die Kindknoten eines Knotens (Elements)
  • attributes - die Attributknoten eines Knotens (Elements)

Mehr über Eigenschaften erfährst du im nächsten Kapitel dieses Tutorials.

Objekte aus dem echten Leben

Eine Person ist ein Objekt.

Die Methoden einer Person könnten eat(), sleep(), work(), play() und so weiter sein.

Alle Menschen haben diese Methoden, aber sie führen sie zu unterschiedlichen Zeiten aus.

Zu den Eigenschaften einer Person gehören name, height, weight, age, gender und so weiter.

Alle Menschen haben diese Eigenschaften, aber ihre Werte unterscheiden sich von Person zu Person.

Einige DOM-Objektmethoden

Hier sind einige gängige Methoden, die Sie in diesem Tutorial lernen werden:

Methode Beschreibung
getElementById() Gibt das Element mit der angegebenen ID zurück.
getElementsByTagName() Gibt eine Node-Liste (Sammlung/Node-Array) zurück, die alle Elemente mit dem angegebenen Tag-Namen enthält.
getElementsByClassName() Gibt eine Knotenliste zurück, die alle Elemente mit dem angegebenen Klassennamen enthält.
appendChild() Fügt einen neuen Kindknoten zum angegebenen Knoten hinzu.
removeChild() Entfernt einen Kindknoten.
replaceChild() Ersetzt einen Kindknoten.
insertBefore() Fügt einen neuen Kindknoten vor dem angegebenen Kindknoten ein.
createAttribute() Erstellt einen Attributknoten.
createElement() Erstellt einen Elementknoten.
createTextNode() Erstellt einen Textknoten.
getAttribute() Gibt den Wert des angegebenen Attributs zurück.
setAttribute() Legt das angegebene Attribut auf den angegebenen Wert fest oder ändert es.
Andere Erweiterungen