Das Document Object Model (DOM) beschreibt die Spezifikation einer Programmierschnittstelle, hierbei werden HTML- oder XML-Dokumente als Baumstruktur darstellt. Dabei repräsentiert jeder Knoten ein Objekt, welches wiederum ein Teil eines Dokumentes (z.B. eine Webseite) repräsentiert. In dem Beitrag möchte ich kurz auf die Möglichkeiten der DOM-Manipulationen per purem JavaScript eingehen.
Das Document Object Model (DOM) wird vom World Wide Web Consortium (W3C) definiert.
Mitte der 1990er Jahre wurde die Skriptsprache JavaScript erfunden, die Browser boten aber nur rudimentäre Möglichkeiten um auf das HTML-Dokument zuzugreigen oder das DOM zu manipulieren.
Dies führte zu einer Verbreitung von Bibliotheken wie zum Beispiel jQuery.
Mittlerweile kann man aber immer öfter auf JavaScript-Bibliotheken, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellen, verzichten!
Die folgenden Webseiten unterstützen dabei, Probleme von Frontend-Developern in purem JavaScript (ohne jQuery) lösen zu können
- HTML DOM - Manage HTML DOM with vanilla JavaScript
- Cheat sheet for moving from jQuery to vanilla JavaScript
Hierdurch ist es möglich Webseiten von überflüssigen Bibliotheken zu befreien.
Siehe nachfolgendes Beispiel:
// With jQuery
// Update the text of a .button
$(".button").text("New text");
// Read the text of a .button
$(".button").text(); // Returns "New text"
// Without jQuery
// Update the text of a .button
document.querySelector(".button").textContent = "New text";
// Read the text of a .button
document.querySelector(".button").textContent; // Returns "New text"
Quelle: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#updating-the-dom
Keine Kommentare:
Kommentar veröffentlichen