Details of MutationObServer monitoring DOM elements in JavaScript

Details of MutationObServer monitoring DOM elements in JavaScript

1. Basic Use

It can be instantiated through the MutationObserver constructor, and the parameter is a callback function.

let observer = new MutationObserver(() => console.log("change"));

console.log(observer);

The prototype chain of the observer object is as follows:

MutationObserver instance:

You can see that there are disconnect , observer , and takeRecords methods.

1. Observer method monitoring

observer method is used to associate DOM elements and listen according to related settings.

The syntax is as follows:

// Receive two parameters observer (DOM element, MutationObserverInit object);

in:

  • The first parameter DOM element is the page element, such as body, div, etc.
  • The second parameter is to set the range to be monitored. For example: attributes, text, child nodes, etc., is an array of key-value pairs.

Example 1: monitor changes in the body element class:

let observer = new MutationObserver(() => console.log("change"));

//Monitor the attribute changes of the body element observer.observe(document.body, {

    attributes: true

});

// Changing the class of the body element will asynchronously execute the callback function passed in when creating the MutationObserver object document.body.className = "main";

console.log("body attributes modified");

// Console output:

// Modified the body attributes // change

The output of the above change is after body attribute is modified. It can be seen that the registered callback function is executed asynchronously and is executed later.

2. Add MutationRecord instance array parameter to callback function

Now the callback function is very simple, it just outputs a string, and it is unclear what changes have taken place.

In fact, the callback function receives an array of MutationRecord instances, which can be used to view detailed information in practice.

let observer = new MutationObserver(

    // The callback function is an array of MutationRecord instances. The format is as follows:

    // [MutationRecord, MutationRecord, MutationRecord, ...]

    (mutationRecords) => console.log(mutationRecords)

);

observer.observe(document.body, {

    attributes: true

});

document.body.className = "main";

console.log("body attributes modified");

// Console output:

// Modified the body attributes // (1) [MutationRecord]

The mutationRecords information is as follows:

MutationRecord example :

Some of the more key information:

  • attributeName indicates the name of the attribute to be modified
  • targetModify the target
  • type

If you modify the attributes of the body multiple times, there will be multiple records:

// MutationRecord

let observer = new MutationObserver(

    // The callback function receives a MutationRecord instance, which is an array.

    (mutationRecords) => console.log(mutationRecords)

);

observer.observe(document.body, {

    attributes: true

});

 

// Modify three times document.body.className = "main";

document.body.className = "container";

document.body.className = "box";

 

// The console prints the following:

// (3) [MutationRecord, MutationRecord, MutationRecord]

Notice:

Here, the callback is not executed once for each modification. Instead, a MutationRecord instance is added to the mutationRecords parameter each time a modification is made, and finally a callback is executed to print it out.

If a callback is executed once for each modification, the performance will be poor.

3. Disconnect method terminates callback

If you want to terminate the callback, you can use the disconnect method.

let observer = new MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

observer.observe(document.body, {

    attributes: true

});

// First modification document.body.className = "main";

 

//Terminate observer.disconnect();

 

// Second modification document.body.className = "container";

 

// No log output

There is no log output here, including the first modification, because the callback function is executed asynchronously and is executed last. observer is terminated later, so it will not be executed.

You can use setTimeout to control the final termination, so that the callback will be executed normally.

let observer = new MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

observer.observe(document.body, {

    attributes: true

});

// First modification document.body.className = "main";

 

// Terminate setTimeout(() => {

    observer.disconnect();

    // The third modification, the following modification will not be called back document.body.className = "container";

}, 0);

 

// Second modification document.body.className = "container";

 

// Page output:

// (2) [MutationRecord, MutationRecord]

Reactivate after termination

After terminating, you can restart it, see the following example:

let observer = new MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

observer.observe(document.body, {

    attributes: true

});

// The first modification will be entered into the mutationRecords array document.body.className = "main";

// Terminate setTimeout(() => {

    observer.disconnect();

    // Second modification, because it is terminated, the following modifications will not be entered into the mutationRecords array document.body.className = "container";

}, 0);

setTimeout(() => {

    // Enable observer again.observe(document.body, {

        attributes: true

    });

    // Modify the body attributes and enter the mutationRecords array document.body.className = "container";

}, 0);

 

// Console output:

// [MutationRecord]

// [MutationRecord]

The callback function here is executed twice and prints two values:

  • The first output is the first modification. There is no synchronization code afterwards, so the callback is executed.
  • The second output is the third modification. Because it is re-enabled, the callback is executed normally.

In the second modification, because observer is terminated, the modified body attributes will not be included in the mutationRecords array.

4. takeRecords method obtains modified records

If you want to process the existing mutationRecords before terminating observer , you can use the takeRecords method to obtain them.

let observer = new MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

observer.observe(document.body, {

    attributes: true

});

 

// The first modification will be entered into the mutationRecords array document.body.className = "main";

// The second modification will be entered into the mutationRecords array document.body.className = "container";

// The third modification will be entered into the mutationRecords array document.body.className = "box";

// Get the modification record and process it let mutationRecords = observer.takeRecords();

console.log(mutationRecords);

// Console print:

// (3) [MutationRecord, MutationRecord, MutationRecord]

console.log(observer.takeRecords());

// Console print:

// []

//Terminate observer.disconnect();

2. Listening to multiple elements

The above monitoring only has one element. If you want to monitor multiple elements, you can reuse MutationObserver instance

let observer = new MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

// Create div1 element and listen let div1 = document.createElement("div");

observer.observe(div1, {

    attributes: true

});

div1.id = "box1";

 

// Create div2 and listen let div2 = document.createElement("div");

observer.observe(div2, {

    attributes: true

});

div2.id = "box2";

 

// Console print:

// (2) [MutationRecord, MutationRecord]

The console prints two MutationRecords, including:

  • The first MutationRecord is the modification record of the id attribute of div1.
  • The second MutationRecord is the modification record of the id attribute of div2.

Other usages are similar to the above.

3. Monitoring scope MutationObserverInit object

The above monitoring is to monitor attributes, of course, you can also monitor other things, such as: text, child nodes, etc.

1. Observe properties

The above examples all observe the attributes of the element itself. Here is another example of custom attributes.

let observer = new MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

observer.observe(document.body, {

    attributes: true

});

// Modify custom attributes document.body.setAttribute("data-id", 1);

 

// Console print:

// [MutationRecord]

Modifying custom attributes will also be added to the mutationRecords array.

It is also worth mentioning that data-id is often used to mark elements with data or something. If there is a change, the program can monitor it and process some corresponding logic.

attributeFilter filtering:

If you want to monitor changes in specified attributes, you can use attributeFilter to filter.

let observer = new MutationObserver(

    (mutationRecords) => console.log(mutationRecords)

);

observer.observe(document.body, {

    attributes: true,

    // Set whitelist attributeFilter: ["data-id"]

});

 

// Modify the attributes in the whitelist attributeFilter and enter mutationRecords

document.body.setAttribute("data-id", 1);

 

// Modify the attributes that are not in the whitelist attributeFilter and will not be entered into mutationRecords

document.body.setAttribute("class", "main");

 

// Console print:

// [MutationRecord]

attributeOldValue records the old value :

If you want to record the old value, you can set attributeOldValue to true .

let observer = new MutationObserver(

    // oldValue in the MutationRecord object represents the old value (mutationRecords) => console.log(mutationRecords.map((x) => x.oldValue))

);

observer.observe(document.body, {

    attributes: true,

    attributeOldValue: true,

});

// First modification, because there is no value originally, the old value oldValue = null

document.body.setAttribute("class", "main");

// Second modification, because it has been modified once before, the old value oldValue = main

document.body.setAttribute("class", "container");

 

// Console print:

// (2) [null, 'main']

2. Observe the text

To observe the text, set characterData to true , but only text nodes can be observed.

Consider the following example:

<!-- A sexy div -->

<div id="box">Hello</div>

<script type="text/javascript">

    let observer = new MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

    // Get the text node let textNode = document.getElementById("box").childNodes[0];

    observer.observe(textNode, {

        //Observe text changes characterData: true

    });

    // Modify the text textNode.textContent = "Hi";

 

    // Console print:

    // [MutationRecord]

</script>

If you listen to the div element directly, it will not work:

<!-- A sexy div -->

<div id="box">Hello</div>

<script type="text/javascript">

    let observer = new MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

    // Listening to div will not take effect let box = document.getElementById("box");

    observer.observe(box, {

        characterData: true

    });

    box.textContent = "Hi";

 

    //No output in console</script>

characterDataOldValue records the old value:

If you want to record the old value of the text, you can set characterDataOldValue to true .

<!-- A sexy div -->

<div id="box">Hello</div>

 

<script type="text/javascript">

    let observer = new MutationObserver(

        (mutationRecords) => console.log(mutationRecords.map((x) => x.oldValue))

    );

    // Get the text node let textNode = document.getElementById("box").childNodes[0];

    observer.observe(textNode, {

        //Observe text changes characterData: true,

        // Keep old data characterDataOldValue: true,

    });

    // Modify the text twice textNode.textContent = "Hi";

    textNode.textContent = "Nice";

 

    // Console print:

    // (2) ['Hello', 'Hi']

</script>

Because the original content in the div was Hello, it was first changed to Hi and then changed to Nice, so the old values ​​after the two modifications are: Hello and Hi.

3. Observe child nodes

MutationObserver instances can also observe changes in the target node's child nodes.

<!-- A sexy div -->

<div id="box">Hello</div>

<script type="text/javascript">

    let observer = new MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

    // Get the div

    let box = document.getElementById("box");

    observer.observe(box, {

        //Observe changes in child nodes childList: true,

    });

    // Add element let span = document.createElement("span")

    span.textContent = "world";

    box.appendChild(span);

 

    // Console print:

    // [MutationRecord]

</script>

The addedNodes attribute in MutationRecord records the added nodes.

To remove a node:

<!-- A sexy div -->

<div id="box">Hello</div>

 

<script type="text/javascript">

    let observer = new MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

 

    // Get the div

    let box = document.getElementById("box");

    observer.observe(box, {

        //Observe changes in child nodes childList: true,

    });

    // Remove the first child node, which is the Hello text node box.removeChild(box.childNodes[0]);

 

    // Console print:

    // [MutationRecord]

</script>

removedNodes property in MutationRecord records the removed nodes.

Mobile Node:

If an existing node is moved, two MutationRecord records will be recorded, because moving an existing node means first deleting it and then adding it.

<!-- A sexy div -->

<div id="box">Hello<span>world</span></div>

 

<script type="text/javascript">

    let observer = new MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

 

    // Get the div

    let box = document.getElementById("box");

    observer.observe(box, {

        //Observe changes in child nodes childList: true,

    });

    // Move the span node to the front of the Hello node box.insertBefore(box.childNodes[1], box.childNodes[0]);

    // Moving a node actually means deleting it first and then adding it.

 

    // Console print:

    // (2) [MutationRecord, MutationRecord]

</script>

4. Observe the subtree

The nodes observed above are all currently set target nodes. For example, for body , you can only observe changes in body element and its child nodes.

If you want to observe changes to body and all its descendant nodes, you can set subtree property to true .

<!-- A sexy div -->

<div id="box">Hello<span>world</span></div>

 

<script type="text/javascript">

    let observer = new MutationObserver(

        (mutationRecords) => console.log(mutationRecords)

    );

 

    let box = document.getElementById("box");

    observer.observe(box, {

        attributes: true,

        //Observe the changes of subtree subtree: true

    });

    // Changes in the id attribute of the span element can be observed box.childNodes[1].id = "text";

    // Console print:

    // [MutationRecord]

</script>

After subtree is set to true , not only the div element itself but also span element can be observed.

Summarize:

  • 1. MutationObserver instances can be used to observe objects.
  • 2. The MutationRecord instance records every change.
  • 3. The callback function will be executed only after all script tasks are completed, that is, it uses an asynchronous method.
  • 4. The observable accesses are attributes, text, child nodes, and subtrees.

This is the end of this article about the details of MutationObServer monitoring DOM elements in JavaScript . For more relevant content about MutationObServer monitoring DOM elements in JavaScript, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • JavaScript monitors a DOM element size change
  • Details of MutationObServer monitoring DOM elements in JavaScript
  • Introduction to Javascript DOM, nodes and element acquisition
  • Detailed explanation of JavaScript WebAPI, DOM, events and operation element examples

<<:  Solve the matching problem in CSS

>>:  FlashFXP ftp client software registration cracking method

Recommend

Several scenarios for using the Nginx Rewrite module

Application scenario 1: Domain name-based redirec...

Interpretation of CocosCreator source code: engine startup and main loop

Table of contents Preface preparation Go! text St...

How to use Vue3 asynchronous data loading component suspense

Table of contents Preface Creating Components Sum...

How to package the docker image, push it to the remote server and deploy it to k8s

Table of contents 1. Dockerfile 2. pom configurat...

Several ways to add timestamps in MySQL tables

Scenario: The data in a table needs to be synchro...

How to use the Linux nl command

1. Command Introduction nl (Number of Lines) adds...

Alibaba Cloud OSS access rights configuration (RAM permission control) implementation

Scenario You need to authorize the tester to use ...

Webpack builds scaffolding to package TypeScript code

Create a folder Directory structure: dabaots Init...

How to deploy tomcat in batches with ansible

1.1 Building the Directory Structure This operati...

WeChat applet implements a simple handwritten signature component

Table of contents background: need: Effect 1. Ide...

Vue's simple implementation process of imitating NetEase Cloud Music Player interface

Due to the needs of the work project, song playba...

Click the toggle button in Vue to enable the button and then disable it

The implementation method is divided into three s...

A simple way to clear the CSS, JavaScript and background image cache in the browser

In the actual project development process, the pag...

React's context and props explained

Table of contents 1. context 1. Usage scenarios 2...

How to use node to implement static file caching

Table of contents cache Cache location classifica...