MutationObserver (Javascript)

The MutationObserver interface in Javascript provides the ability to watch for changes being made to the DOM tree.

This is an example that will watch an element (targetElement) on a webpage that has dynamic elements generated via React, and update another element whenever it sees the targetElement change.

// Select the node that will be observed for mutations
const videoPlayer = document.querySelector('.video-main');

// Options for the observer (which mutations to observe)
const config = {
  attributes: false,
  childList: true,
  subtree: true,
  characterData: true
};

// Callback function to execute when mutations are observed
const copyVideo = (mutationsList, observer) => {
  document.querySelector('.iframe__inner-container').innerHTML = videoPlayer.innerHTML;
  if (!videoPlayer.innerHTML.includes('video-placeholder')) {
    observer.disconnect();
    blPlayer.querySelector('iframe').src = '';
  }
};

// Create an observer instance linked to the callback function
const wrapperObserver = new MutationObserver(copyVideo);

// Start observing the target node for configured mutations
wrapperObserver.observe(videoPlayer, config);

References

Last modified: 202401040446