DOM-Manipulation ist der Zugriff auf die Baumstruktur, die der Browser aus dem Dokument gebaut hat, um sie zu ändern.
- DOM-Manipulation
Das Ändern der Baumstruktur, die der Browser aus dem Dokument aufgebaut hat.
Beispiel: „Eine DOM-Manipulation ändert die Seite, nicht den Quelltext.“
Die gebräuchlichen Mittel
const el = document.createElement('li');
el.textContent = 'Neuer Eintrag';
el.classList.add('treffer');
liste.append(el);textContent setzt Text sicher, innerHTML setzt Markup und ist bei fremden Daten eine Einfallstelle für fremden Code. Wer Nutzereingaben einsetzt, nimmt textContent.
Warum viele kleine Änderungen teuer sind
Jede Änderung kann den Browser zwingen, Layout und Darstellung neu zu berechnen. Hundert Einträge einzeln einzufügen ist deutlich langsamer, als sie zu sammeln und einmal einzusetzen. Besonders teuer ist es, abwechselnd zu ändern und Maße abzufragen.