JavaScript MutationObserver function

The ability to track DOM tree modifications is provided via the MutationObserver interface. It is intended to take the place of the previous Mutation Events functionality, which was included in the DOM3 Events definition.

The DOM can often change in complex web projects. Because of this, there are times when your app may need to react to a particular modification to the DOM. Listening to DOM changes is possible via the MutationObserver interface.

JavaScript MutationObserver Syntax

The use of MutationObserver is straightforward. A callback function should be used to create an observer as the initial stage, like in:

Adding it to a DOM node is the next step, which is as follows:

Config is an object with parameters defining the changes to respond to and is returned by the function.

childList: alterations to the node's immediate children.
subtree: every descendent of a node.
attributes: characteristics of the node.
attributeFilter: A list of attribute names that allows you to see the ones you want to see.
characterData: for node observation.

The callback follows any modifications. The observer becomes the second object, and the modifications are passed on to the first argument as a list of MutationRecord objects.

How to operate JavaScript MutationObserver

To use the MutationObserver API, you must first:

The callback method that will be called when the DOM changes must first be defined:

function callback(mutations) {
    // JavaScript program
}

Next, make a MutationObserver object and send the callback to the function of the object using the MutationObserver() method:

let observer = new MutationObserver(callback);

Third, start tracking the DOM changes by calling the observe() method.

observer.observe(targetNode, observerOptions);

There are two parameters in the observe() function. The target is the root of the node subtree that needs to be watched for changes. What DOM changes should be communicated to the observer's callback are specified by the parameters in the observerOptions parameter.

Call the disconnect() method to end watching the DOM updates.

observer.disconnect();

Examples

The following examples show the javascript mutationobserver api with a different type of data.

Example1

The following example shows the basic javascript mutationobserver api with simple information.

<!DOCTYPE html>
<html>
  <body>
<h2> JavaScript MutationObserver Function</h2>
    <div contentEditable id="elemobsId"> Click here and <b> ADD </b>...</div>
    <script>
      let observer_var = new MutationObserver(mutationdata => {
        alert("changes happen"); 
      });
      // observe each data of the changes except attributes
      observer_var.observe(elemobsId, {
        childList: true, // observe direct children list
        subtree: true, // observe direct lower descendants
        characterDataOldValue: true, // pass old data to callback
      });
    </script>
  </body>
</html>

Output

The following image shows basic javascript mutationobserver output.

Output 1

Insert the characters in the input field

Output 2

After inserting the characters

Example 2

The following example shows the basic javascript mutationobserver api with a false option.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript MutationObserver Function</h2>
<div contentEditable id="elemobsId"> Click here and <b> ADD </b>...</div>
<script>
let optiondata = {
childList: false, // observe direct children list
subtree: false, // observe direct lower descendants
characterDataOldValue: false, // pass old data to callback
}
let observer_var = new MutationObserver(mutationdata => {
alert("changes happen");
});
// observe each data of the changes except attributes
observer_var.observe(elemobsId, optiondata);
</script>
</body>
</html>

Output

The following image shows basic JavaScript mutationobserver output.

JavaScript MutationObserver options

You can define options to characterize the MutationObserver by passing them as the second argument to the observe() method:

let choices= {
    childList: true,
    attributes: true,
    characterData: false,
    subtree: false,
    characterDataOldValue: false
   attributeFilter: ['attr1', 'attr2'],
    attributeOldValue: false,
};

Not every choice has to be chosen. However, at minimum, one childList, attributes, or characterData must be set to true for the MutationObserver to function; otherwise, the observer() method will return an error.

The following properties are included in the MutationRecord object:

type: The mutation's type. It is either "characterData," "attributes," or "childList."
target: where the change takes place.
addedNodes/removedNodes: the newly or recently added nodes.
The added or removed nodes' previousSibling or nextSibling, respectively.
attributeName/attributeNamespace: the new name or namespace for the attribute.
oldValue: The previous value is only for text or attribute changes if attributeOldValue/characterDataOldValue is set as the matching option.

Example

The following example shows the basic javascript mutationobserver api with multiple options.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript MutationObserver Function</h2>
<div id = "elemobsId"> Click here and <b> ADD </b></div>
 <ul contentEditable id = "programming_language">
        <li> Java </li>
        <li> PHP </li>
        <li> JavaScript </li>
        <li> PYTHON </li>
        <li> PERL </li>
    </ul>
<script>
let list_data = document.querySelector('#programming_language');
let option_data = {
  childList: true,
  attributes: true,
  characterData: false,
  subtree: false,
  attributeFilter: ['one', 'two'],
  attributeOldValue: false,
  characterDataOldValue: false
};
let observer_var = new MutationObserver(mutationdata => {
alert("changes happen");
});
// observe each data of the changes except attributes
observer_var.observe(list_data, option_data);
</script>
</body>
</html>

Output

The following image shows basic JavaScript mutationobserver output.

Observe the changes in a child element

The mutation method can show the child element start, stop, add, and remove functionality. The following steps help to show changes in the child element of the function.

Here, we can create a list of the data in html.

<ul id = "programming_language">
        <li> Java </li>
        <li> PHP </li>
        <li> JavaScript </li>
        <li> PYTHON </li>
        <li> PERL </li>
    </ul>

Create buttons for the functionality in the html.

Create a variable of the buttons and data tag using the query selector of javascript.

let list_data = document.querySelector('#programming_language');
      let dataStart = document.querySelector('#dataStart');

Use the mutation function and callback with the variable

function log_data(mutation data) {
    for (let mutation of mutation data) {
        if (mutation.type === 'childList') {
            console.log(mutation);
        }
    }
}
let observer_var = new MutationObserver(log_data);

Add required operation with mutationobserver variable and JavaScript function

dataStart.addEventListener('click', function () {
    // create a new item element
    let item_value = document.createElement('li');
    item_value.textContent = `Bootstrap version ${counter++}`;
    // append it to the child nodes of list
    list_data.appendChild(item_value);
});

Examples

The following examples show the child list and its data with different operations.

Example 1

The example shows the basic changes in the child element of the parent element.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript MutationObserver Function</h2>
<ul id = "programming_language">
<li> Java </li>
<li> PHP </li>
<li> JavaScript </li>
<li> PYTHON </li>
<li> PERL </li>
</ul>
<div  id = "elemobsId"> Click on the button </div>
<button id = "dataStart"> Start Button </button>
<button id = "dataStop"> Stop Button </button>
<script>
let list_data = document.querySelector('#programming_language');
let dataRemove = document.querySelector('#dataRemove');
let dataStop = document.querySelector('#dataStop');
function log_data(mutation data) {
for (let mutation of mutation data) {
if (mutation.type === 'childList') {
console.log(mutation);
}
}
}
let observer_var = new MutationObserver(log_data);
dataStop.addEventListener('click', function () {
observer_var.disconnect();
// set button states to disconnect MutationObserver Function
dataStart.disabled = false;
dataStop.disabled = true;
});
dataStart.addEventListener('click', function () {
observer_var.observe(list_data, {
childList: true
});
dataStart.disabled = true;
dataStop.disabled = false;
});
</script>
</body>
</html>

Output

The image shows the output of the javascript mutationobserver with the child element.

Output1

Click start button

Output2

Click stop button

Example 2

The example shows the insert data in the child element of the parent element.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript MutationObserver Function</h2>
<ul id = "programming_language">
<li> Java </li>
<li> PHP </li>
<li> JavaScript </li>
<li> PYTHON </li>
<li> PERL </li>
</ul>
<div  id = "elemobsId"> Click on the button </div>
<button id = "dataStart"> Add Button </button>
<script>
let list_data = document.querySelector('#programming_language');
let dataStart = document.querySelector('#dataStart');
function log_data(mutation data) {
for (let mutation of mutation data) {
if (mutation.type === 'childList') {
console.log(mutation);
}
}
}
let observer_var = new MutationObserver(log_data);
let counter = 1;
dataStart.addEventListener('click', function () {
alert('New Child element is added');
// create a new item element
let item_value = document.createElement('li');
item_value.textContent = `Bootstrap version ${counter++}`;
// append values to the child nodes of a given list
list_data.appendChild(item_value);
});
</script>
</body>
</html>

Output

The given image shows the output of the javascript mutationobserver with the child element.

Output1

Before inserting the last element

Output2

After inserting the last element

Example 3

The example shows the deleted data in the child element of the parent element.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript MutationObserver Function</h2>
<ul id = "programming_language">
<li> Java </li>
<li> PHP </li>
<li> JavaScript </li>
<li> PYTHON </li>
<li> PERL </li>
</ul>
<div  id = "elemobsId"> Click on the button </div>
<button id = "dataRemove">Remove Button </button>
<script>
let list_data = document.querySelector('#programming_language');
let dataRemove = document.querySelector('#dataRemove');
function log_data(mutation data) {
for (let mutation of mutation data) {
if (mutation.type === 'childList') {
console.log(mutation);
}
}
}
let observer_var = new MutationObserver(log_data);
dataRemove.addEventListener('click', function () {
// Delete the last item element of the list
alert('Child element is removed);
list_data.lastElementChild ?
list_data.removeChild(list_data.lastElementChild) :
alert('No more child element to remove');
});
</script>
</body>
</html>

Output

The given image shows the output of the deleted last value of the list.

Output1

Before removing the last element

Output2

After removing the last element

Keep in mind the mutationObserver crucial details.

The callback function, which I've given the name mCallback to demonstrate that you may give it any name, will activate every time a valid mutation is discovered and following the conclusion of the watch() method.
Since childList is the only "kind" of acceptable mutation, it makes sense to search for it when looping through the MutationRecord. In this case, searching for any other type would be useless.
A text node can be added or removed from the targeted element using childList, which would also count. This means that it is not necessary to add or remove an element.

Conclusion

The javascript mutationobserver method observes and operates the list. Here, we can operate and work on the list and its child data with multiple options.

Next TopicNpm uninstall command

← prev next →