Instance Methods
- MutationCallback Function: It is the callback function that is called automatically when a mutation of the target elements happens. It receives 2 parameters: first is a list of all the MutationObserverEntry objects of all the targeted elements that are to be observed. The MutationObserverEntry object has multiple properties to check whether mutations happened or not.
- Config: It tells the observer what we want to observe. The following options can be provided within the config parameter.
- childList:true -> This parameter is used to observe changes in the target or target’s direct children only. If True is set, then the callback function be triggered when nodes are added, updated or removed from the target or its direct children only.
- subtree: true -> used to detect changes in the entire subtree of the target element.
- attributes: true -> used to detect changes in the target element’s specified attributes.
- attributeFilter: [array of attributes] -> used to observe mutation only when the specified attributes of the target element change.
- characterData: true -> used to observe mutations in textContent, innerHTML, innerText, or nodeValue of the target element.
- observe() method: when the observe method is invoked, mutation observer API starts monitoring mutations of the target element.
- entries: It is an array of MutationObserverEntry objects maintained by observer API for each targeted element. MutationObserverEntry object holds useful information about all of the targeted elements whether they are mutating or not.
Some possible approaches to use Mutation Observer API are:
Web API Mutation Observer
Mutation Observer is a web API (web APIs are APIs provided by the browser itself) that is used to observe (i.e.; detect) the changes of the target HTML element within a web page. For example, when the user wants to know which element has recently been removed and which element has been added to the DOM, we can use Mutation Observer. In dynamic websites, we know that elements are added, removed, or modified dynamically, this API serves as a tool for tracking and reacting to these changes. In this article, we will see the Mutation Observer in the Web API, along with understanding its benefits, use cases, instance methods, & etc.