Signatur
Beschreibung
disconnect() meldet den MutationObserver von allen Knoten ab, die zuvor mit observe() registriert wurden. Einzelne Ziele lassen sich nicht gezielt abmelden. Wer nur einen Knoten nicht mehr beobachten will, ruft disconnect() auf und registriert die übrigen Knoten danach neu.
Die Methode ist wichtig, um Speicherlecks und unnötige Rechenarbeit zu vermeiden, etwa wenn eine Komponente entfernt wird (z. B. in disconnectedCallback eines Custom Elements oder in der Aufräumfunktion eines Frameworks), wenn ein erwartetes Element aufgetaucht ist oder wenn eine Wartezeit abgelaufen ist.
Wichtig: Mutationen, die schon erkannt, aber dem Callback noch nicht übergeben wurden, werden beim Aufruf von disconnect() verworfen. Wer sie noch verarbeiten muss, holt sie vorher mit takeRecords() ab.
Die Observer-Instanz selbst bleibt dabei erhalten. Sie kann später mit observe() wieder verwendet werden, auch mit einem anderen Ziel oder anderen Optionen.
Rückgabewert
undefined).Beispiele
Auf ein Element warten und danach die Beobachtung beenden
const waitForElement = (selector, root = document.body) =>
new Promise((resolve) => {
const existing = root.querySelector(selector);
if (existing) return resolve(existing);
const observer = new MutationObserver(() => {
const el = root.querySelector(selector);
if (el) {
observer.disconnect(); // Ziel gefunden – Überwachung stoppen
resolve(el);
}
});
observer.observe(root, { childList: true, subtree: true });
});
// Anwendung
setTimeout(() => {
const div = document.createElement('div');
div.id = 'banner';
document.body.append(div);
}, 500);
const banner = await waitForElement('#banner');
console.log('Gefunden:', banner.id);Ausstehende Mutationen mit takeRecords() vor disconnect() verarbeiten
const list = document.createElement('ul');
document.body.append(list);
const handle = (records) =>
records.forEach((r) => console.log('Hinzugefügt:', r.addedNodes.length));
const observer = new MutationObserver(handle);
observer.observe(list, { childList: true });
list.append(document.createElement('li'));
list.append(document.createElement('li'));
// Ohne takeRecords() gingen diese beiden Records verloren
handle(observer.takeRecords());
observer.disconnect();Aufräumen in einem Custom Element
class LiveCounter extends HTMLElement {
#observer = new MutationObserver(() => this.#update());
connectedCallback() {
this.#observer.observe(this, { childList: true });
this.#update();
}
disconnectedCallback() {
// Element wurde aus dem DOM entfernt – Observer abmelden
this.#observer.disconnect();
}
#update() {
this.dataset.count = this.children.length;
console.log('Kinder:', this.children.length);
}
}
customElements.define('live-counter', LiveCounter);
const counter = document.createElement('live-counter');
document.body.append(counter);
counter.append(document.createElement('span'));
// Nach dem Entfernen erfolgen keine weiteren Aufrufe mehr
setTimeout(() => counter.remove(), 0);// Wichtig · Fallstricke
- Ausstehende Records gehen verloren: Mutationen, die noch in der Warteschlange stehen, werden verworfen. Wer sie braucht, ruft vorher
takeRecords()auf. - Kein gezieltes Abmelden:
disconnect()betrifft immer alle beobachteten Ziele. Einzelne Ziele müssen danach mitobserve()neu registriert werden. - Der Aufruf innerhalb des eigenen Callbacks ist erlaubt und üblich, etwa für eine einmalige Beobachtung.
- Ein mehrfacher Aufruf oder ein Aufruf ohne vorheriges
observe()ist harmlos und wirft keinen Fehler. - Wird ein beobachteter Knoten aus dem DOM entfernt, endet die Beobachtung nicht automatisch, solange der Observer noch Verweise hält. Deshalb sollte man
disconnect()ausdrücklich aufrufen, damit keine Speicherlecks in langlebigen Single-Page-Apps entstehen. - Browser-Kompatibilität: Die Methode wird von allen modernen Browsern unterstützt (auch ab IE 11). In Node.js gibt es sie nur über DOM-Umgebungen wie jsdom.