compatibility

An overview of the

The MutationObserver interface provides the ability to monitor changes made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which is part of the DOM3 Events specification

Mapping between MutationObserver and Mutation Events

MutationEvent MutationObserver options
DOMNodeInserted { childList: true, subtree: true }
DOMNodeRemoved { childList: true, subtree: true }
DOMSubtreeModified { childList: true, subtree: true }
DOMAttrModified { attributes: true, subtree: true }
DOMCharacterDataModified { characterData: true, subtree: true }

The MutationObserver object has three methods, as follows

  1. observe: Sets the observation target and accepts two parameters

    • Target: Observe the target
    • Options: Viewing options are set by object members
  2. Disconnect: Blocks the observer from seeing any changes
  3. TakeRecords: Clears the record queue and returns its contents

The options parameter in the observe method has the following options:

  1. ChildList: Set true to observe changes to the target child node, such as adding or deleting the target child node, excluding changes to the child node and descendants of the child node

  2. Attributes: Sets true to observe changes in target attributes

  3. CharacterData: Set to true to observe the change of target data

  4. Subtree: Set to true, changes to the target and its descendants are observed

  5. AttributeOldValue: If the attribute is true or omitted, it is set to true, indicating that the value of the target attribute before the change needs to be recorded. If you set attributeOldValue, you can omit the attributes setting

  6. CharacterDataOldValue: If characterData is true or omitted, the characterData setting is set to True, indicating that the previous target data needs to be recorded. If characterDataOldValue is set, the characterData setting can be omitted

  7. AttributeFilter: If not all attribute changes need to be observed and attributes are set to true or ignored, set a list of local names (namespace-free) of attributes that need to be observed

    We can also see from the above table that MutationObserver greatly increases the flexibility compared to MutationEvent, and a variety of options can be set to meet the observation of the target.

Using the instance

// targetNode addBg(targetNode, url) {const bgimg = 'url(${url})'; Const config = {attributes: true, childList: false, subtree: false}; targetNode.style.backgroundImage = bgimg; let callback = function (mutationsList) { for (let mutation of mutationsList) { if (mutation.type === 'attributes' && mutation.attributeName === 'style') { targetNode.style.backgroundImage = bgimg; }}}; This. observer = new MutationObserver(callback); This.observer. observe(targetNode, config); },Copy the code

Problems encountered

Background: When using Firefox, the browser freezes

Cause: The childList and subtree properties of observe options are true, causing too many monitored nodes

Solution: The childList subtree property is set to false, in this case just to keep the background image alive, so just listen for attributes