mutationobserver-shim

What is mutationobserver-shim?

The mutationobserver-shim package is a polyfill for the MutationObserver API, which allows you to watch for changes being made to the DOM tree. This is particularly useful for environments where the native MutationObserver is not available.

What are mutationobserver-shim's main functionalities?

Observing attribute changes

This feature allows you to observe changes to attributes of a DOM element. The provided code sample sets up a MutationObserver to watch for attribute changes on an element with the ID 'some-id'.

const targetNode = document.getElementById('some-id');
const config = { attributes: true };
const callback = function(mutationsList, observer) {
  for(let mutation of mutationsList) {
    if (mutation.type === 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
  }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

Observing child list changes

This feature allows you to observe changes to the child nodes of a DOM element. The provided code sample sets up a MutationObserver to watch for additions or removals of child nodes on an element with the ID 'some-id'.

const targetNode = document.getElementById('some-id');
const config = { childList: true };
const callback = function(mutationsList, observer) {
  for(let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    }
  }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

Observing subtree changes

This feature allows you to observe changes to the entire subtree of a DOM element. The provided code sample sets up a MutationObserver to watch for additions or removals of child nodes within the subtree of an element with the ID 'some-id'.

const targetNode = document.getElementById('some-id');
const config = { subtree: true, childList: true };
const callback = function(mutationsList, observer) {
  for(let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed in the subtree.');
    }
  }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

Other packages similar to mutationobserver-shim

mutation-observer

The mutation-observer package is another polyfill for the MutationObserver API. It provides similar functionality to mutationobserver-shim, allowing you to observe changes to the DOM tree. Both packages aim to provide a consistent API for environments where the native MutationObserver is not available.

mutation-summary

The mutation-summary package provides a higher-level API for observing changes to the DOM. It allows you to specify queries to observe and provides summaries of the changes. This package offers more advanced features compared to mutationobserver-shim, but it may be more complex to use.

README

###Compiled files

Compiled by Google closure compiler in ADVANCED_OPTIMIZATIONS

• Original: 25 kB
• Minified: 3.7 kB
• Gzipped: 1.6 kB