Das Document Object Model (DOM) ist eine fundamentale Schnittstelle für Webentwicklung, die HTML-Dokumente als strukturierte Baumstruktur repräsentiert. Als programmierbares Interface ermöglicht das DOM die dynamische Manipulation von Webseiten durch JavaScript und andere Programmiersprachen. In diesem umfassenden Glossarartikel erfahren Sie alles Wissenswerte über das DOM, seine Funktionsweise, praktische Anwendungen und die Bedeutung für moderne Webentwicklung.
Was ist das DOM (Document Object Model)?
Das Document Object Model, kurz DOM, ist eine plattform- und sprachneutrale Programmierschnittstelle, die HTML- und XML-Dokumente als hierarchische Baumstruktur darstellt. Es definiert die logische Struktur von Dokumenten und die Art und Weise, wie auf diese zugegriffen und sie manipuliert werden können. Das DOM wurde vom World Wide Web Consortium (W3C) standardisiert und bildet die Grundlage für dynamische Webseiten und moderne Webanwendungen.
Kernkonzept des DOM
Das DOM wandelt jedes Element eines HTML-Dokuments in ein Objekt um, das programmatisch zugänglich ist. Diese Objekte sind in einer Baumstruktur organisiert, wobei jedes Element (Node) Eigenschaften und Methoden besitzt, die dessen Manipulation ermöglichen. Das DOM ist live – Änderungen am DOM werden sofort im Browser sichtbar.
Die Struktur des DOM-Baums
Der DOM-Baum ist eine hierarchische Darstellung eines HTML-Dokuments, bei der jedes HTML-Element als Knoten (Node) repräsentiert wird. Die Struktur beginnt mit dem Document-Objekt als Wurzel und verzweigt sich über verschiedene Knotentypen.
Knotentypen im DOM
Element Nodes
Repräsentieren HTML-Tags wie <div>, <p>, <span>. Sie sind die am häufigsten verwendeten Knotentypen und bilden die Struktur der Webseite. Element Nodes können Attribute und Kind-Knoten enthalten.
Text Nodes
Enthalten den tatsächlichen Textinhalt innerhalb von Elementen. Jeder Text zwischen HTML-Tags wird als separater Text Node behandelt, einschließlich Leerzeichen und Zeilenumbrüchen.
Attribute Nodes
Repräsentieren die Attribute von HTML-Elementen wie class, id, src oder href. Sie sind direkt mit ihren Element Nodes verbunden und definieren zusätzliche Eigenschaften.
Comment Nodes
Stellen HTML-Kommentare dar und werden oft für Debugging-Zwecke oder zur Dokumentation verwendet. Sie sind Teil des DOM-Baums, werden aber im Browser nicht gerendert.
Document Node
Der Wurzelknoten des gesamten Dokuments. Er bietet Zugriff auf alle anderen Elemente und stellt globale Methoden zur Dokumentenmanipulation bereit.
Document Type Node
Repräsentiert die DOCTYPE-Deklaration am Anfang eines HTML-Dokuments und definiert den Dokumenttyp und die verwendete HTML-Version.
DOM-Manipulation mit JavaScript
Die wahre Stärke des DOM liegt in der Möglichkeit, Webseiten dynamisch zu verändern. JavaScript bietet eine umfangreiche API zur Interaktion mit dem DOM, die von einfachen Element-Selektionen bis zu komplexen Strukturänderungen reicht.
Element-Selektion
Bevor Sie ein Element manipulieren können, müssen Sie es zunächst im DOM finden. Moderne Browser bieten verschiedene Methoden zur Element-Selektion:
| Methode | Beschreibung | Rückgabewert |
|---|---|---|
| getElementById() | Findet ein Element anhand seiner ID | Einzelnes Element oder null |
| getElementsByClassName() | Findet alle Elemente mit einer bestimmten Klasse | HTMLCollection (live) |
| getElementsByTagName() | Findet alle Elemente eines bestimmten Tag-Typs | HTMLCollection (live) |
| querySelector() | Findet das erste Element, das einem CSS-Selektor entspricht | Einzelnes Element oder null |
| querySelectorAll() | Findet alle Elemente, die einem CSS-Selektor entsprechen | NodeList (statisch) |
// Beispiele für Element-Selektion
const header = document.getElementById('main-header');
const buttons = document.getElementsByClassName('btn');
const paragraphs = document.getElementsByTagName('p');
const firstArticle = document.querySelector('.article');
const allLinks = document.querySelectorAll('a[href^="https"]');
Inhalte ändern und erstellen
Nach der Selektion können Elemente auf vielfältige Weise manipuliert werden. Das DOM bietet zahlreiche Eigenschaften und Methoden zur Inhaltsänderung:
innerHTML
Ermöglicht das Lesen und Setzen des HTML-Inhalts eines Elements. Praktisch für komplexe HTML-Strukturen, aber potenziell anfällig für XSS-Angriffe bei unsanitisiertem Input.
textContent
Gibt den reinen Textinhalt zurück oder setzt ihn, ohne HTML zu interpretieren. Sicherer als innerHTML und performanter für reine Textoperationen.
createElement()
Erstellt ein neues HTML-Element im Speicher, das anschließend in den DOM-Baum eingefügt werden kann. Grundlage für dynamisches HTML.
appendChild()
Fügt ein Element als letztes Kind-Element eines anderen Elements hinzu. Eine der grundlegenden Methoden zur DOM-Manipulation.
// Element erstellen und hinzufügen
const newDiv = document.createElement('div');
newDiv.className = 'container';
newDiv.textContent = 'Neuer Inhalt';
document.body.appendChild(newDiv);
// Inhalt ändern
const heading = document.querySelector('h1');
heading.innerHTML = 'Neuer <span>Titel</span>';
heading.textContent = 'Sicherer Titel ohne HTML';
Attribute und Styles manipulieren
Das DOM ermöglicht die vollständige Kontrolle über HTML-Attribute und CSS-Styles zur Laufzeit:
// Attribute setzen und auslesen
const image = document.querySelector('img');
image.setAttribute('src', 'neues-bild.jpg');
image.setAttribute('alt', 'Beschreibung');
const altText = image.getAttribute('alt');
// Direkte Attributzugriffe
image.src = 'anderes-bild.jpg';
image.id = 'hauptbild';
image.className = 'responsive-image';
// CSS-Styles ändern
const box = document.querySelector('.box');
box.style.backgroundColor = '#3b82f6';
box.style.padding = '20px';
box.style.borderRadius = '10px';
Event-Handling im DOM
Events sind ein zentraler Bestandteil der DOM-Interaktion. Sie ermöglichen es, auf Benutzeraktionen und Browser-Ereignisse zu reagieren und schaffen so interaktive Webseiten.
Event-Listener registrieren
Die moderne Methode zur Event-Behandlung ist addEventListener(), die mehrere Vorteile gegenüber älteren Methoden bietet:
addEventListener()
Ermöglicht das Registrieren mehrerer Event-Handler für dasselbe Event auf einem Element. Unterstützt Event-Capturing und -Bubbling sowie einmalige Event-Handler.
removeEventListener()
Entfernt einen zuvor registrierten Event-Listener. Wichtig für Performance und Speicherverwaltung, besonders bei Single-Page-Applications.
Event-Objekt
Wird automatisch an Event-Handler übergeben und enthält Informationen über das Event wie Typ, Ziel-Element, Mausposition oder gedrückte Tasten.
Event-Delegation
Effiziente Technik, bei der ein Event-Listener auf einem Eltern-Element alle Events seiner Kind-Elemente behandelt. Reduziert die Anzahl der Listener erheblich.
// Einfacher Event-Listener
const button = document.querySelector('#submit-btn');
button.addEventListener('click', function(event) {
console.log('Button wurde geklickt');
event.preventDefault();
});
// Event-Delegation
const list = document.querySelector('#item-list');
list.addEventListener('click', function(event) {
if (event.target.matches('li')) {
console.log('List-Item geklickt:', event.target.textContent);
}
});
Häufige DOM-Events
| Event-Typ | Auslöser | Anwendungsfall |
|---|---|---|
| click | Mausklick auf ein Element | Button-Aktionen, Navigation, Interaktionen |
| input | Änderung in Eingabefeldern | Live-Validierung, Suchfunktionen |
| submit | Formular wird abgeschickt | Formular-Validierung, AJAX-Übermittlung |
| DOMContentLoaded | HTML vollständig geladen und geparst | Initialisierung von Scripts |
| scroll | Seite oder Element wird gescrollt | Lazy Loading, Scroll-Animationen |
| resize | Browserfenster wird verändert | Responsive Anpassungen |
DOM-Navigation und Traversierung
Die Navigation durch den DOM-Baum ist essentiell für komplexe Manipulationen. Das DOM bietet verschiedene Eigenschaften, um zwischen verwandten Knoten zu navigieren:
Eltern-Kind-Beziehungen
parentNode / parentElement
Gibt das Eltern-Element eines Knotens zurück. parentElement gibt null zurück, wenn der Elternknoten kein Element ist, während parentNode auch andere Knotentypen zurückgeben kann.
childNodes / children
childNodes gibt alle Kind-Knoten einschließlich Text- und Kommentar-Knoten zurück. children gibt nur Element-Knoten zurück und ist meist praktischer.
firstChild / lastChild
Zugriff auf das erste bzw. letzte Kind-Element. Vorsicht: firstChild kann ein Textknoten sein. Verwenden Sie firstElementChild für garantierte Element-Knoten.
nextSibling / previousSibling
Navigation zu benachbarten Geschwister-Elementen auf derselben Hierarchieebene. Auch hier gibt es die Element-Varianten nextElementSibling und previousElementSibling.
// DOM-Navigation Beispiele
const element = document.querySelector('.content');
// Nach oben navigieren
const parent = element.parentElement;
const grandparent = element.parentElement.parentElement;
// Nach unten navigieren
const children = element.children;
const firstChild = element.firstElementChild;
const lastChild = element.lastElementChild;
// Seitwärts navigieren
const nextElement = element.nextElementSibling;
const prevElement = element.previousElementSibling;
Vorteile und Anwendungsfälle des DOM
Hauptvorteile des DOM
Das DOM revolutioniert die Webentwicklung durch seine Flexibilität und Zugänglichkeit. Es ermöglicht die Erstellung hochdynamischer Webanwendungen, die auf Benutzereingaben reagieren, Inhalte in Echtzeit aktualisieren und komplexe Benutzeroberflächen ohne Seitenneuladung bereitstellen.
Praktische Anwendungsfälle
Single-Page-Applications
Moderne Webanwendungen wie Gmail oder Facebook nutzen intensive DOM-Manipulation, um Inhalte dynamisch zu laden und zu aktualisieren, ohne die gesamte Seite neu zu laden. Dies schafft ein flüssiges, app-ähnliches Benutzererlebnis.
Formular-Validierung
Echtzeit-Validierung von Benutzereingaben durch DOM-Manipulation verbessert die Benutzererfahrung erheblich. Fehler können sofort angezeigt werden, bevor das Formular übermittelt wird.
Dynamische Inhalte
Laden und Anzeigen von Daten aus APIs ohne Seitenneuladung. Ideal für Social-Media-Feeds, Kommentarsysteme oder Live-Updates von Sportergebnissen und Börsenkursen.
Animationen und Effekte
Durch Manipulation von CSS-Eigenschaften über das DOM können komplexe Animationen und visuelle Effekte erstellt werden, die die Benutzerinteraktion verbessern.
Barrierefreiheit
Das DOM ermöglicht die dynamische Anpassung von ARIA-Attributen und Fokus-Management, was essentiell für zugängliche Webanwendungen ist.
Responsive Anpassungen
JavaScript kann DOM-Strukturen basierend auf Bildschirmgröße oder Geräteeigenschaften anpassen und so komplexere responsive Layouts ermöglichen als CSS allein.
Performance-Optimierung bei DOM-Operationen
DOM-Operationen können rechenintensiv sein und die Performance beeinträchtigen. Hier sind bewährte Strategien zur Optimierung:
Batch-Updates
Fassen Sie mehrere DOM-Änderungen zusammen, bevor Sie sie anwenden. Jede DOM-Änderung kann ein Reflow oder Repaint auslösen, was kostspielig ist. DocumentFragment oder das Ändern von Elementen außerhalb des DOM-Baums minimiert diese Effekte.
Caching von Selektionen
Speichern Sie häufig verwendete DOM-Referenzen in Variablen, anstatt sie wiederholt zu selektieren. Eine einzelne querySelector-Operation ist schnell, aber tausende summieren sich zu messbaren Verzögerungen.
Event-Delegation
Verwenden Sie Event-Delegation, um die Anzahl der Event-Listener zu reduzieren. Ein Listener auf einem Eltern-Element ist effizienter als hunderte Listener auf Kind-Elementen.
Virtuelle DOM-Konzepte
Frameworks wie React verwenden einen virtuellen DOM, um nur notwendige Änderungen am echten DOM vorzunehmen. Dieses Konzept kann auch in Vanilla JavaScript durch sorgfältige Planung nachgeahmt werden.
Performance-Tipp
Verwenden Sie requestAnimationFrame() für DOM-Änderungen, die mit Animationen oder Scrolling zusammenhängen. Dies synchronisiert Ihre Änderungen mit dem Browser-Rendering-Zyklus und verhindert Layout-Thrashing.
// Ineffizient: Mehrere einzelne DOM-Operationen
for (let i = 0; i < 1000; i++) {
const div = document.createElement('div');
div.textContent = 'Item ' + i;
document.body.appendChild(div); // Reflow bei jeder Iteration!
}
// Effizient: Batch-Operation mit DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const div = document.createElement('div');
div.textContent = 'Item ' + i;
fragment.appendChild(div);
}
document.body.appendChild(fragment); // Nur ein Reflow!
Modern DOM APIs und Browser-Unterstützung
Das DOM entwickelt sich kontinuierlich weiter. Moderne Browser unterstützen zahlreiche neue APIs, die die Arbeit mit dem DOM vereinfachen und erweitern:
Moderne DOM-Features (2024)
Intersection Observer API
Ermöglicht effizientes Tracking, wann Elemente im Viewport sichtbar werden. Perfekt für Lazy Loading, Infinite Scrolling und Scroll-Animationen ohne Performance-Einbußen durch ständige Scroll-Event-Handler.
Mutation Observer API
Beobachtet Änderungen am DOM-Baum und benachrichtigt über Hinzufügungen, Löschungen oder Attributänderungen. Essentiell für Frameworks und komplexe Anwendungen, die auf DOM-Änderungen reagieren müssen.
Resize Observer API
Überwacht Größenänderungen einzelner Elemente, nicht nur des Viewports. Ermöglicht element-basierte responsive Designs und ist performanter als window.resize-Events.
Custom Elements API
Teil der Web Components-Spezifikation, ermöglicht die Erstellung eigener HTML-Tags mit encapsuliertem Verhalten. Erweitert das DOM um wiederverwendbare Komponenten.
Shadow DOM
Erstellt isolierte DOM-Teilbäume mit eigenem Scope für CSS und JavaScript. Verhindert Style-Konflikte und ermöglicht echte Komponentenkapselung.
Element.classList
Moderne API zur Manipulation von CSS-Klassen mit Methoden wie add(), remove(), toggle() und contains(). Eleganter und fehlerresistenter als direkte className-Manipulation.
Browser-Kompatibilität
Die Kern-DOM-APIs werden von allen modernen Browsern vollständig unterstützt. Chrome, Firefox, Safari und Edge implementieren den DOM-Standard konsistent. Für ältere Browser-Versionen (insbesondere Internet Explorer) können Polyfills notwendig sein, wobei der Bedarf dafür seit 2024 stark zurückgegangen ist.
Wichtiger Hinweis zur Kompatibilität
Seit der Einstellung des Internet Explorer im Juni 2022 können Entwickler sich auf moderne DOM-APIs verlassen. Die Unterstützung für querySelector, addEventListener und moderne Event-Handling-Methoden ist universell. Prüfen Sie dennoch spezifische Features auf caniuse.com, besonders bei sehr neuen APIs.
DOM vs. Virtual DOM
Der Aufstieg von JavaScript-Frameworks hat das Konzept des Virtual DOM populär gemacht, das eine Abstraktionsschicht über dem echten DOM darstellt:
Unterschiede und Anwendungsfälle
| Aspekt | DOM | Virtual DOM |
|---|---|---|
| Definition | Browser-native Repräsentation des Dokuments | JavaScript-Objekt, das DOM-Struktur abbildet |
| Performance | Direkte Manipulation kann bei vielen Updates langsam sein | Batched Updates und Diffing optimieren Performance |
| Verwendung | Vanilla JavaScript, direkte Browser-API | React, Vue, andere Frameworks |
| Komplexität | Einfach zu verstehen, direkt | Zusätzliche Abstraktionsschicht |
| Bundle-Größe | Keine zusätzlichen Bibliotheken nötig | Erfordert Framework-Code |
Der Virtual DOM ist keine Ersetzung des echten DOM, sondern eine Optimierungsstrategie. Er minimiert teure DOM-Operationen durch intelligentes Diffing und Batching. Für kleinere Projekte oder gezielte Manipulationen ist direktes DOM-Handling oft ausreichend und performant.
Best Practices für DOM-Manipulation
1. Minimieren Sie DOM-Zugriffe
Cachen Sie DOM-Referenzen in Variablen. Jeder Zugriff auf das DOM ist relativ langsam. Speichern Sie häufig verwendete Elemente und vermeiden Sie wiederholte Selektionen.
2. Verwenden Sie DocumentFragment
Für das Hinzufügen mehrerer Elemente verwenden Sie DocumentFragment, um Reflows zu minimieren. Dies ist besonders wichtig bei Listen oder Tabellen mit vielen Einträgen.
3. Vermeiden Sie Layout-Thrashing
Trennen Sie Lese- und Schreiboperationen. Das Lesen von Layout-Eigenschaften (offsetHeight, scrollTop) direkt nach dem Schreiben erzwingt einen Reflow. Gruppieren Sie alle Lese-, dann alle Schreiboperationen.
4. Nutzen Sie Event-Delegation
Statt Event-Listener auf viele einzelne Elemente zu setzen, nutzen Sie einen Listener auf einem gemeinsamen Elternelement. Dies spart Speicher und verbessert die Performance.
5. Arbeiten Sie mit CSS-Klassen
Ändern Sie Styles über CSS-Klassen statt einzelner Style-Eigenschaften. Dies ist wartbarer, performanter und trennt Logik von Präsentation sauberer.
6. Berücksichtigen Sie Accessibility
Bei dynamischen DOM-Änderungen aktualisieren Sie ARIA-Attribute, managen Sie den Fokus korrekt und stellen Sie sicher, dass Screen Reader die Änderungen wahrnehmen können.
Debugging und Entwickler-Tools
Moderne Browser bieten leistungsstarke Tools zur Untersuchung und Manipulation des DOM während der Entwicklung:
Browser DevTools für DOM-Arbeit
Chrome DevTools und DOM-Inspektion
Die Elements-Ansicht in Chrome DevTools (F12) zeigt den Live-DOM-Baum und ermöglicht direkte Manipulation. Sie können Elemente inspizieren, Attribute ändern, Styles testen und Event-Listener analysieren. Die Console bietet Zugriff auf $0 (zuletzt selektiertes Element) und praktische Shortcuts wie $() für querySelector.
Element-Inspektion
Rechtsklick auf beliebige Elemente und „Untersuchen“ wählen, um direkt zum entsprechenden DOM-Knoten zu springen. Zeigt alle CSS-Regeln, berechnete Styles und Box-Model-Informationen.
Break on DOM Changes
Setzen Sie Breakpoints auf DOM-Änderungen (Subtree modifications, Attribute changes, Node removal), um zu debuggen, welcher Code bestimmte DOM-Manipulationen auslöst.
Performance-Profiling
Der Performance-Tab zeigt detailliert, welche DOM-Operationen zu Reflows und Repaints führen. Identifizieren Sie Performance-Engpässe durch Layout-Thrashing oder excessive DOM-Manipulation.
Console-Utilities
Nutzen Sie $(), $$(), $x() für schnelle DOM-Queries in der Console. inspect(element) öffnet das Element im Elements-Panel, getEventListeners(element) zeigt alle registrierten Events.
Sicherheitsaspekte bei DOM-Manipulation
Die Manipulation des DOM birgt potenzielle Sicherheitsrisiken, insbesondere bei der Verarbeitung von Benutzereingaben:
Cross-Site Scripting (XSS) vermeiden
Das größte Sicherheitsrisiko bei DOM-Manipulation ist XSS. Verwenden Sie niemals innerHTML mit unsanitisierten Benutzereingaben. Nutzen Sie stattdessen textContent für reinen Text oder sanitisieren Sie HTML-Input mit bewährten Bibliotheken wie DOMPurify.
Sichere DOM-Manipulation
// UNSICHER: XSS-anfällig
const userInput = getUserInput();
element.innerHTML = userInput; // Gefährlich!
// SICHER: Nur Text, kein HTML
element.textContent = userInput;
// SICHER: Strukturierte Element-Erstellung
const div = document.createElement('div');
div.textContent = userInput;
element.appendChild(div);
// Bei Bedarf für HTML: Sanitisierung
const cleanHTML = DOMPurify.sanitize(userInput);
element.innerHTML = cleanHTML;
Zukunft des DOM
Das DOM entwickelt sich kontinuierlich weiter, um den Anforderungen moderner Webanwendungen gerecht zu werden. Aktuelle und zukünftige Entwicklungen umfassen:
Declarative Shadow DOM
Ermöglicht die Definition von Shadow DOM direkt im HTML, ohne JavaScript. Verbessert Server-Side Rendering von Web Components und macht sie SEO-freundlicher.
Container Queries
Obwohl primär ein CSS-Feature, erfordern Container Queries enge Integration mit dem DOM. Sie ermöglichen element-basierte statt viewport-basierte responsive Designs.
View Transitions API
Neue API für flüssige Übergänge bei DOM-Änderungen und Navigation. Macht komplexe Animationen zwischen verschiedenen DOM-Zuständen einfacher und performanter.
Imperative Slot API
Erweitert Web Components um programmatische Kontrolle über Slot-Zuweisungen, macht komplexe Komponentenstrukturen flexibler.
Die Standardisierungsbemühungen des W3C und der WHATWG stellen sicher, dass das DOM auch in Zukunft die Grundlage für Webentwicklung bleibt, während es sich an neue Anforderungen anpasst.
Was ist das DOM und wofür wird es verwendet?
Das Document Object Model (DOM) ist eine Programmierschnittstelle, die HTML-Dokumente als Baumstruktur repräsentiert. Es wird verwendet, um Webseiten dynamisch zu manipulieren, Inhalte zu ändern, Elemente hinzuzufügen oder zu entfernen und auf Benutzerinteraktionen zu reagieren. Das DOM bildet die Grundlage für interaktive Webanwendungen und ermöglicht JavaScript den Zugriff auf alle Elemente einer Webseite.
Wie unterscheidet sich das DOM vom HTML-Code?
HTML ist die statische Markup-Sprache, die die Struktur einer Webseite definiert, während das DOM die Live-Repräsentation dieser Struktur im Browser ist. Der Browser parst den HTML-Code und erstellt daraus das DOM, das dann programmatisch verändert werden kann. Änderungen am DOM werden sofort im Browser sichtbar, ohne dass der ursprüngliche HTML-Code geändert wird.
Welche Methoden gibt es zur Element-Selektion im DOM?
Die wichtigsten Methoden sind getElementById() für einzelne Elemente mit ID, querySelector() für CSS-Selektor-basierte Suche und querySelectorAll() für mehrere Elemente. Zusätzlich gibt es getElementsByClassName() und getElementsByTagName(). Moderne Entwicklung bevorzugt querySelector und querySelectorAll wegen ihrer Flexibilität und CSS-Selektor-Unterstützung.
Was sind die häufigsten Performance-Probleme bei DOM-Manipulation?
Die größten Performance-Probleme entstehen durch excessive Reflows und Repaints, Layout-Thrashing durch gemischte Lese-/Schreiboperationen und zu viele Event-Listener. Vermeiden Sie wiederholte DOM-Zugriffe, nutzen Sie DocumentFragment für Batch-Updates und implementieren Sie Event-Delegation. Cachen Sie DOM-Referenzen in Variablen statt sie wiederholt zu selektieren.
Wie verhindere ich XSS-Angriffe bei DOM-Manipulation?
Verwenden Sie niemals innerHTML mit unsanitisierten Benutzereingaben. Nutzen Sie stattdessen textContent für reinen Text oder erstellen Sie Elemente mit createElement() und setzen Sie Inhalte über sichere Eigenschaften. Bei notwendiger HTML-Verarbeitung verwenden Sie Sanitisierungs-Bibliotheken wie DOMPurify, um schädlichen Code zu entfernen.
Letzte Bearbeitung am Dienstag, 28. Oktober 2025 – 13:14 Uhr von Alex, Webmaster für Google und Bing SEO.
