{"_id":"dom-mutations","_rev":"5-fc1294802bd26dd66513b0983191f86c","name":"dom-mutations","dist-tags":{"latest":"1.0.2"},"versions":{"0.1.0":{"name":"dom-mutations","version":"0.1.0","keywords":["mutationobserver","mutation","mutations","observer","observe","dom","document","node","element","html","changes","asynciterable","asynciterator","iterable","iterator","generator","async","events","stream","loop"],"author":{"url":"https://sindresorhus.com","name":"Sindre Sorhus","email":"sindresorhus@gmail.com"},"license":"MIT","_id":"dom-mutations@0.1.0","maintainers":[{"name":"sindresorhus","email":"sindresorhus@gmail.com"}],"homepage":"https://github.com/sindresorhus/dom-mutations#readme","bugs":{"url":"https://github.com/sindresorhus/dom-mutations/issues"},"ava":{"serial":true},"dist":{"shasum":"ca93cddfa9a7b3a40e4fcbc69eeb68ae752d5a21","tarball":"https://registry.npmjs.org/dom-mutations/-/dom-mutations-0.1.0.tgz","fileCount":5,"integrity":"sha512-aPB10PP7beOuPLujH98GdV6OW51ReNMW5Q69qVbfodBfEmx+jLd1I1bCVb26IzKLuILFidlo7P6dBJ8YDXocFw==","signatures":[{"sig":"MEYCIQCqrh7thhbu261LmGyxS/I9B7kS2fzcF6JHsAkBQrFm+gIhAP7q64MryW/WX0xqYeEblvVporcR2rpUV0PJJnoMX0fw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4795},"type":"module","types":"./index.d.ts","engines":{"node":">=18"},"exports":{"types":"./index.d.ts","default":"./index.js"},"funding":"https://github.com/sponsors/sindresorhus","gitHead":"0730b37b9b5c4f359527054478f1cc0bd6d66e8e","scripts":{"test":"xo && ava"},"_npmUser":{"name":"sindresorhus","email":"sindresorhus@gmail.com"},"repository":{"url":"git+https://github.com/sindresorhus/dom-mutations.git","type":"git"},"_npmVersion":"9.2.0","description":"Observe changes to the DOM using an async iterable — A nicer API for MutationObserver","directories":{},"sideEffects":false,"_nodeVersion":"18.18.2","_hasShrinkwrap":false,"devDependencies":{"xo":"^0.56.0","ava":"^5.3.1","jsdom":"^22.1.0"},"_npmOperationalInternal":{"tmp":"tmp/dom-mutations_0.1.0_1700600468216_0.923150477564614","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"dom-mutations","version":"0.2.0","keywords":["mutationobserver","mutation","mutations","observer","observe","dom","document","node","element","html","changes","asynciterable","asynciterator","iterable","iterator","generator","async","events","stream","loop"],"author":{"url":"https://sindresorhus.com","name":"Sindre Sorhus","email":"sindresorhus@gmail.com"},"license":"MIT","_id":"dom-mutations@0.2.0","maintainers":[{"name":"sindresorhus","email":"sindresorhus@gmail.com"}],"homepage":"https://github.com/sindresorhus/dom-mutations#readme","bugs":{"url":"https://github.com/sindresorhus/dom-mutations/issues"},"ava":{"serial":true},"dist":{"shasum":"339c64fb45d077bf54798c85a7aea9678203cb48","tarball":"https://registry.npmjs.org/dom-mutations/-/dom-mutations-0.2.0.tgz","fileCount":5,"integrity":"sha512-mGNpcYki8iQZEeWLBVnLRaOCW1QpoPcUvUSRitWoAAkalGJtBp+a+abTqCRpG+pzIJTQXgu0Z+UEaw9iwhCUOA==","signatures":[{"sig":"MEUCIQDPaQxvotsmNKeu5uP3Gxk7BxGi0BUbOgDssgoQxLW0PwIgfkHUsUoTxUGSVn3XZ8DEfGyXw3Ywd46LL6N7sjHkDEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8152},"type":"module","types":"./index.d.ts","engines":{"node":">=18"},"exports":{"types":"./index.d.ts","default":"./index.js"},"funding":"https://github.com/sponsors/sindresorhus","gitHead":"6e62906c72e639399579ffe18fd6b3b611377b68","scripts":{"test":"xo && ava"},"_npmUser":{"name":"sindresorhus","email":"sindresorhus@gmail.com"},"repository":{"url":"git+https://github.com/sindresorhus/dom-mutations.git","type":"git"},"_npmVersion":"9.2.0","description":"Observe changes to the DOM using an async iterable — A nicer API for MutationObserver","directories":{},"sideEffects":false,"_nodeVersion":"18.18.2","_hasShrinkwrap":false,"devDependencies":{"xo":"^0.56.0","ava":"^5.3.1","jsdom":"^22.1.0"},"_npmOperationalInternal":{"tmp":"tmp/dom-mutations_0.2.0_1700639802285_0.7872211367240591","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"dom-mutations","version":"1.0.0","keywords":["mutationobserver","mutation","mutations","observer","observe","dom","document","node","element","html","changes","asynciterable","asynciterator","iterable","iterator","generator","async","events","stream","loop"],"author":{"url":"https://sindresorhus.com","name":"Sindre Sorhus","email":"sindresorhus@gmail.com"},"license":"MIT","_id":"dom-mutations@1.0.0","maintainers":[{"name":"sindresorhus","email":"sindresorhus@gmail.com"}],"homepage":"https://github.com/sindresorhus/dom-mutations#readme","bugs":{"url":"https://github.com/sindresorhus/dom-mutations/issues"},"ava":{"serial":true},"dist":{"shasum":"5eac627ae15e9aeb38adb1630951303989dcb34c","tarball":"https://registry.npmjs.org/dom-mutations/-/dom-mutations-1.0.0.tgz","fileCount":5,"integrity":"sha512-qr4ufk/qu+JKwtz7NPbu6TxpTM/7nqburohI07J+mKSM20USvhcUjEb8hWY6g2a3QYp3LtlGpi+mAZLPuxTi7g==","signatures":[{"sig":"MEQCIBS6mAu4RJTB07K4F547Nzys7KM/59tbDQzbpuSujoEgAiAoMfXVrKU+8YxYYEO9zt8gyLYpd9DAiZr62cv+09P16g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8152},"type":"module","types":"./index.d.ts","engines":{"node":">=18"},"exports":{"types":"./index.d.ts","default":"./index.js"},"funding":"https://github.com/sponsors/sindresorhus","gitHead":"5916028b0635f949cc0f06688729198981c89a6c","scripts":{"test":"xo && ava"},"_npmUser":{"name":"sindresorhus","email":"sindresorhus@gmail.com"},"repository":{"url":"git+https://github.com/sindresorhus/dom-mutations.git","type":"git"},"_npmVersion":"10.6.0","description":"Observe changes to the DOM using an async iterable — A nicer API for MutationObserver","directories":{},"sideEffects":false,"_nodeVersion":"22.6.0","_hasShrinkwrap":false,"devDependencies":{"xo":"^0.59.3","ava":"^5.3.1","jsdom":"^24.1.1"},"_npmOperationalInternal":{"tmp":"tmp/dom-mutations_1.0.0_1723967245207_0.15728176989984521","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"dom-mutations","version":"1.0.1","keywords":["mutationobserver","mutation","mutations","observer","observe","dom","document","node","element","html","changes","asynciterable","asynciterator","iterable","iterator","generator","async","events","stream","loop"],"author":{"url":"https://sindresorhus.com","name":"Sindre Sorhus","email":"sindresorhus@gmail.com"},"license":"MIT","_id":"dom-mutations@1.0.1","maintainers":[{"name":"sindresorhus","email":"sindresorhus@gmail.com"}],"homepage":"https://github.com/sindresorhus/dom-mutations#readme","bugs":{"url":"https://github.com/sindresorhus/dom-mutations/issues"},"ava":{"serial":true},"dist":{"shasum":"a915b50f8d19ea43c0db1c7eaa33bb7fabb88faf","tarball":"https://registry.npmjs.org/dom-mutations/-/dom-mutations-1.0.1.tgz","fileCount":5,"integrity":"sha512-JQqdOCnl2j4mkmlRZRqqsjznG+ot/9X4m17p2qC3Xph2YA2skb8GvpWaLPkXHXqQhtN/FqRqxdTDxONlvD+8NQ==","signatures":[{"sig":"MEQCICHSooRiImlHRa4C+wZZo3cxXMXqb+IAbE9tacuPshjwAiBIfuigVO0fhBRVzfrhDBM4lCtTlPCKRK6mtV8xoCHsIQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8598},"type":"module","types":"./index.d.ts","engines":{"node":">=18"},"exports":{"types":"./index.d.ts","default":"./index.js"},"funding":"https://github.com/sponsors/sindresorhus","gitHead":"92c7b96bb88b686dc434073de954f3a1a85f53a3","scripts":{"test":"xo && ava"},"_npmUser":{"name":"sindresorhus","email":"sindresorhus@gmail.com"},"repository":{"url":"git+https://github.com/sindresorhus/dom-mutations.git","type":"git"},"_npmVersion":"10.9.2","description":"Observe changes to the DOM using an async iterable — A nicer API for MutationObserver","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"xo":"^0.59.3","ava":"^5.3.1","jsdom":"^24.1.1","p-state":"^2.0.1"},"_npmOperationalInternal":{"tmp":"tmp/dom-mutations_1.0.1_1757269851892_0.6531170284250232","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"dom-mutations","version":"1.0.2","description":"Observe changes to the DOM using an async iterable — A nicer API for MutationObserver","license":"MIT","repository":{"type":"git","url":"git+https://github.com/sindresorhus/dom-mutations.git"},"funding":"https://github.com/sponsors/sindresorhus","author":{"name":"Sindre Sorhus","email":"sindresorhus@gmail.com","url":"https://sindresorhus.com"},"type":"module","exports":{"types":"./index.d.ts","default":"./index.js"},"sideEffects":false,"engines":{"node":">=18"},"scripts":{"test":"xo && ava"},"keywords":["mutationobserver","mutation","mutations","observer","observe","dom","document","node","element","html","changes","asynciterable","asynciterator","iterable","iterator","generator","async","events","stream","loop"],"devDependencies":{"ava":"^5.3.1","jsdom":"^24.1.1","p-state":"^2.0.1","xo":"^0.59.3"},"ava":{"serial":true},"_id":"dom-mutations@1.0.2","gitHead":"541515236ddde9adb724c5f75b3941cdd5262419","types":"./index.d.ts","bugs":{"url":"https://github.com/sindresorhus/dom-mutations/issues"},"homepage":"https://github.com/sindresorhus/dom-mutations#readme","_nodeVersion":"22.12.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-gYhPPcSRbfMMl88YQecZiQErgKrz1X/umKf/cuJcnl6zMvMqaThNS37WVQ0MlpDXLQqj/LGKD6ucwpcONGTdGw==","shasum":"96f5ad0c4be6c2f1edd701ea5126832284a39fa9","tarball":"https://registry.npmjs.org/dom-mutations/-/dom-mutations-1.0.2.tgz","fileCount":5,"unpackedSize":9007,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICsb3xcm9EO9ZqHgezKb9l4CeBAESUU9dVf/bR75e6vPAiBJMCkBYE8hh0t4+eBBAi9A5/TYljSHPWxWApdZW2L31A=="}]},"_npmUser":{"name":"sindresorhus","email":"sindresorhus@gmail.com"},"directories":{},"maintainers":[{"name":"sindresorhus","email":"sindresorhus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dom-mutations_1.0.2_1757273343972_0.12322822012989842"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-21T21:01:08.215Z","modified":"2025-09-07T19:29:04.361Z","0.1.0":"2023-11-21T21:01:08.461Z","0.2.0":"2023-11-22T07:56:42.474Z","1.0.0":"2024-08-18T07:47:25.399Z","1.0.1":"2025-09-07T18:30:52.078Z","1.0.2":"2025-09-07T19:29:04.187Z"},"bugs":{"url":"https://github.com/sindresorhus/dom-mutations/issues"},"author":{"name":"Sindre Sorhus","email":"sindresorhus@gmail.com","url":"https://sindresorhus.com"},"license":"MIT","homepage":"https://github.com/sindresorhus/dom-mutations#readme","keywords":["mutationobserver","mutation","mutations","observer","observe","dom","document","node","element","html","changes","asynciterable","asynciterator","iterable","iterator","generator","async","events","stream","loop"],"repository":{"type":"git","url":"git+https://github.com/sindresorhus/dom-mutations.git"},"description":"Observe changes to the DOM using an async iterable — A nicer API for MutationObserver","maintainers":[{"name":"sindresorhus","email":"sindresorhus@gmail.com"}],"readme":"# dom-mutations\n\n> Observe changes to the DOM using an async iterable — A nicer API for [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)\n\nThis package only works in the browser.\n\n## Install\n\n```sh\nnpm install dom-mutations\n```\n\n## Usage\n\n```js\nimport domMutations from 'dom-mutations';\n\nconst target = document.querySelector('#unicorn');\n\nfor await (const mutation of domMutations(target, {childList: true})) {\n\tconsole.log('Mutation:', mutation);\n}\n```\n\n## API\n\n### domMutations(target, options?) <sup>(default export)</sup>\n\nAccepts the same arguments as [`MutationObserver#observe()`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#parameters) with an additional optional [`signal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal) option to abort the observation. If the signal is triggered, the async iterable throws an [abort error](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort).\n\nReturns an [`AsyncIterable`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_async_iterator_and_async_iterable_protocols) that yields [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects representing individual mutations.\n\n### batchedDomMutations(target, options?) <sup>(named export)</sup>\n\nSimilar to `domMutations()`, but yields batches of [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects, each batch representing a group of mutations captured together. This method is less convenient, but can be useful in some cases when you need to handle mutations together as a group.\n\n```js\nimport {batchedDomMutations} from 'dom-mutations';\n\nconst target = document.querySelector('#unicorn');\n\nfor await (const mutations of batchedDomMutations(target, {childList: true})) {\n\tconsole.log('Batch of mutations:', mutations);\n}\n```\n\n## FAQ\n\n### How do I stop the iteration?\n\nSimply `return` or `break` in the loop body.\n\n### How do I stop the iteration from the outside?\n\n**Triggering the iterator to return**\n\n```js\nimport domMutations from 'dom-mutations';\n\nconst target = document.querySelector('#unicorn');\n\nconst mutationIterator = domMutations(target, {childList: true})[Symbol.asyncIterator]();\n\n(async () => {\n\tfor await (const mutation of mutationIterator) {\n\t\tconsole.log('Mutation:', mutation);\n\t}\n})();\n\nsetTimeout(() => {\n\tmutationIterator.return();\n}, 10000);\n```\n\n**Using a variable**\n\nThis has the downside of not ending the iteration until the next mutation.\n\n```js\nimport domMutations from 'dom-mutations';\n\nconst target = document.querySelector('#unicorn');\n\nlet shouldStop = false;\n\n(async () => {\n\tfor await (const mutation of domMutations(target, {childList: true})) {\n\t\tif (shouldStop) {\n\t\t\tbreak;\n\t\t}\n\n\t\tconsole.log('Mutation:', mutation);\n\t}\n})();\n\nsetTimeout(() => {\n\tshouldStop = true;\n}, 10000);\n```\n\n**Using [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)**\n\nUnlike the above approaches, this will make the iterable throw an [abort error](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort).\n\n```js\nimport domMutations from 'dom-mutations';\n\nconst target = document.querySelector('#unicorn');\nconst controller = new AbortController();\nconst {signal} = controller;\n\n(async () => {\n\tfor await (const mutation of domMutations(target, {childList: true, signal})) {\n\t\tconsole.log('Mutation:', mutation);\n\t}\n})();\n\nsetTimeout(() => {\n\tcontroller.abort();\n}, 10000);\n```\n\n## Related\n\n- [request-animation-frames](https://github.com/sindresorhus/request-animation-frames) - Use `requestAnimationFrame` as an async iterable, in any JavaScript environment\n","readmeFilename":"readme.md"}