Seiten

Sonntag, 16. Mai 2021

JavaScript - DOM-Manipulationen mittels purem JavaScript

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.

DOM-Knotenbaum einer Webseite

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

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