Skip to main content

Mutation Observer

Miscellaneous: Mutation Observer

What is a Mutation Observer? How does it interact with a DOM tree?​

View Answer:
Interview Response: MutationObserver is a built-in object that observes a DOM element and fires a callback when it detects a change. It was designed to replace the older Mutation Events feature, part of the DOM3 Events specification.

Syntax: let observer = new MutationObserver(callback);

What is a Mutation Record, and how does it interact with a Mutation Observer?​

View Answer:
Interview Response: A MutationRecord represents an individual DOM mutation, and it is the object that gets passed to MutationObserver's callback.

Can you give a use case for a MutationObserver?​

View Answer:
Interview Response: A good use case is when you need to add a third-party script that contains proper functionality and does something unwanted, like injecting unwanted HTML elements. Naturally, the third-party script provides no mechanisms to remove it. Using MutationObserver, we can detect when the unwanted element appears in our DOM and remove it.

Is there a way to stop observing or disconnecting the MutationObserver?​

View Answer:
Interview Response: Yes, you can stop or disconnect the observer by calling the `disconnect()` method. It tells the observer to stop watching for mutations. We can reuse the observer by calling its `observe()` method again.

Syntax: mutationObserver.disconnect();

Is there a way to ensure the processing of changes when there is a disconnect?​

View Answer:
Interview Response: When we cease observing, it's conceivable that the observer hasn't yet processed some changes. In such instances, we employ the observer. `observer.takeRecords()` returns a list of unprocessed mutation records that occurred but remained handled by the callback.

Code Example:

// get a list of unprocessed mutations
// should be called before disconnecting,
// if you care about possibly unhandled recent mutations
let mutationRecords = observer.takeRecords();

// stop tracking changes
observer.disconnect();

How does garbage collection work with Observers?​

View Answer:
Interview Response: Internally, observers employ weak references to nodes. A node can be trash collected if it is deleted from the DOM and becomes inaccessible, and the observation of a DOM node does not stop garbage collection.