36 lines
1.2 KiB
Markdown
36 lines
1.2 KiB
Markdown
---
|
|
title: observeMutations
|
|
tags: browser,event,advanced
|
|
---
|
|
|
|
Returns a new MutationObserver and runs the provided callback for each mutation on the specified element.
|
|
|
|
- Use a [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to observe mutations on the given element.
|
|
- Use `Array.prototype.forEach()` to run the callback for each mutation that is observed.
|
|
- Omit the third argument, `options`, to use the default [options](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit) (all `true`).
|
|
|
|
```js
|
|
const observeMutations = (element, callback, options) => {
|
|
const observer = new MutationObserver(mutations => mutations.forEach(m => callback(m)));
|
|
observer.observe(
|
|
element,
|
|
Object.assign(
|
|
{
|
|
childList: true,
|
|
attributes: true,
|
|
attributeOldValue: true,
|
|
characterData: true,
|
|
characterDataOldValue: true,
|
|
subtree: true
|
|
},
|
|
options
|
|
)
|
|
);
|
|
return observer;
|
|
};
|
|
```
|
|
|
|
```js
|
|
const obs = observeMutations(document, console.log); // Logs all mutations that happen on the page
|
|
obs.disconnect(); // Disconnects the observer and stops logging mutations on the page
|
|
``` |