andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update observeMutations.md

Browse Source
This commit is contained in:
Angelos Chalaris
2018-01-16 15:57:40 +02:00
committed by GitHub
parent 456a36051c
commit 6d60dcb99c
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
snippets/observeMutations.md
View File

@ -1,14 +1,15 @@
### observeMutations ### observeMutations
Runs the provided callback for each mutation on the specified element. 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 a [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to observe mutations on the given element.
Use `Array.forEach()` to run the callback for each mutation that is observed. Use `Array.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`). Omit the third argument, `options`, to use the default [options](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit) (all `true`).
```js ```js
const observeMutations = (element, callback, options) => new MutationObserver(mutations => mutations.forEach(m => callback(m))).observe(element, Object.assign( const observeMutations = (element, callback, options) => {
{ const observer = new MutationObserver(mutations => mutations.forEach(m => callback(m)));
observer.observe(element, Object.assign({
childList: true, childList: true,
attributes: true, attributes: true,
attributeOldValue: true, attributeOldValue: true,
@ -16,8 +17,11 @@ const observeMutations = (element, callback, options) => new MutationObserver(mu
characterDataOldValue: true, characterDataOldValue: true,
subtree: true subtree: true
}, options)); }, options));
return observer;
}
``` ```
```js ```js
observeMutations(document, console.log); // Logs all mutations that happen on the page 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
``` ```