DOM-CRUD-Operationen

Das Document Object Model (DOM) ist die Art und Weise, wie Browser HTML darstellen. Es wandelt jedes Element, jedes Attribut und jedes Textstück in ein Objekt um. JavaScript nutzt diese Objekte, um das zu verändern, was Sie auf dem Bildschirm sehen.

Wenn Sie auf eine Schaltfläche klicken und sich eine Seite aktualisiert, ohne dass sie neu geladen werden muss, verändert JavaScript das DOM.

Mit diesen Methoden können Sie CRUD-Operationen (Create, Read, Update, Delete – Erstellen, Lesen, Aktualisieren, Löschen) durchführen.

  1. Zugriff auf Elemente (Read) Um etwas zu ändern, müssen Sie es zuerst finden. Verwenden Sie diese Methoden:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Erstellen von Elementen (Create) Sie können mit JavaScript neue HTML-Elemente generieren.
  • createElement("tagName") erstellt das Element im Speicher.
  • append() fügt Inhalt am Ende eines Elternelements hinzu.
  • appendChild() fügt einen einzelnen Knoten als letztes Kind hinzu.
  • prepend() fügt Inhalt am Anfang eines Elternelements hinzu.
  • before() fügt ein Element vor einem bestimmten Element ein.
  • after() fügt ein Element nach einem bestimmten Element ein.
  • insertBefore() platziert ein Element vor einem bestimmten Kindelement.

Hinweis: Ein Element verbleibt im Speicher, bis Sie es zur Seite hinzufügen.

  1. Aktualisieren von Elementen (Update) Sie können bestehende Inhalte mit diesen Eigenschaften ändern:
  • innerText: Ändert nur den sichtbaren Text.
  • textContent: Ändert den gesamten Text, einschließlich versteckter Texte.
  • innerHTML: Ändert den Inhalt und ermöglicht es Ihnen, HTML-Tags hinzuzufügen.
  1. Arbeiten mit Attributen (Update) Attribute liefern zusätzliche Informationen über Elemente.
  • setAttribute(name, value): Setzt oder ersetzt ein Attribut.
  • getAttribute(name): Ruft einen Attributwert ab.
  • removeAttribute(name): Löscht ein Attribut.
  • hasAttribute(name): Prüft, ob ein Attribut existiert.

Profi-Tipp: Verwenden Sie classList.add(), um eine Klasse hinzuzufügen, ohne alte zu entfernen. setAttribute() ersetzt den gesamten Wert.

  1. Entfernen von Elementen (Delete) Um ein Element von der Seite zu löschen, verwenden Sie:
  • remove()

Zusammenfassung eines CRUD-Ablaufs:

  • Create: createElement()
  • Update: innerText = "New text"
  • Add: appendChild()
  • Delete: remove()

Wenn Sie diese Methoden beherrschen, können Sie interaktive Anwendungen wie To-do-Listen oder Taschenrechner erstellen. Dies ist eine wesentliche Fähigkeit für die Front-End-Entwicklung.

Quelle: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka