mutationobserver是监听dom内容变化的首选方案，其步骤包括：1.创建实例并传入回调函数；2.指定观察目标节点和配置选项（如childlist、attributes等）；3.调用disconnect()停止观察。相较于其他方法，mutationobserver具有异步执行、性能高、信息详细等优势。其他方法如domnodeinserted/domnoderemoved事件已废弃，且同步执行影响性能；domcharacterdatamodified同样被弃用；propertychange仅适用于ie；setinterval轮询检测则消耗资源且不够精确。选择监听方法时应优先考虑mutationobserver，仅在兼容旧浏览器时谨慎使用其他方式。为监听动态创建元素，可观察父节点并在回调中判断新增节点类型；避免无限循环的方法是在回调中临时断开观察器，修改dom后再重新连接。
JS监听DOM内容变化，简单来说，就是让你能在网页内容发生改变时，立即知道并做出反应。这对于构建动态网页、实时更新UI至关重要。
MutationObserver是首选方案，功能强大且性能优秀，但也要了解其他方法，以便在特定场景下灵活应用。
MutationObserver：现代浏览器的首选
MutationObserver是监听DOM变化的现代API。它允许你观察DOM树的特定部分，并在这些部分发生变化时收到通知。相较于传统的事件监听，MutationObserver具有更高的性能和灵活性。
配置观察器： 首先，你需要创建一个MutationObserver实例，并传入一个回调函数。这个回调函数会在每次DOM变化时被调用。
const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { console.log(mutation); // 打印每次变化的信息 });});
指定观察目标和选项： 接下来，你需要指定要观察的DOM节点和配置选项。选项包括childList（观察子节点变化）、attributes（观察属性变化）、characterData（观察文本内容变化）等。
const targetNode = document.getElementById('myElement');const config = { childList: true, attributes: true, subtree: true, characterData: true};observer.observe(targetNode, config);
停止观察： 当你不再需要观察DOM变化时，可以调用disconnect()方法停止观察器。
observer.disconnect();
MutationObserver的优势在于异步执行，不会阻塞UI线程，而且提供了详细的变更信息，可以精确地知道哪些节点发生了哪些变化。
DOMNodeInserted/DOMNodeRemoved：古老的事件监听方式
虽然不推荐使用，但了解一下也无妨。DOMNodeInserted和DOMNodeRemoved是较早的DOM事件，分别在节点被插入或移除时触发。
document.addEventListener('DOMNodeInserted', function(event) { console.log('节点被插入:', event.target);});document.addEventListener('DOMNodeRemoved', function(event) { console.log('节点被移除:', event.target);});
这种方式的缺点是同步执行，可能会影响性能，并且无法提供详细的变更信息。另外，这些事件已经被废弃，不应在新项目中使用。
DOMCharacterDataModified：监听文本内容变化
DOMCharacterDataModified事件在节点文本内容发生变化时触发。
document.addEventListener('DOMCharacterDataModified', function(event) { console.log('文本内容发生变化:', event.target.data);});
同样，这个事件也已经被废弃，建议使用MutationObserver替代。
propertychange：IE浏览器的专属
propertychange是IE浏览器特有的事件，用于监听元素的属性变化。
element.attachEvent('onpropertychange', function(event) { console.log('属性发生变化:', event.propertyName);});
由于IE浏览器已经逐渐退出历史舞台，因此不建议使用这种方式。
定时器setInterval：轮询检测
如果以上方法都无法满足你的需求，或者你需要在不支持MutationObserver的旧浏览器中使用，可以考虑使用定时器轮询检测DOM变化。
let previousInnerHTML = document.getElementById('myElement').innerHTML;setInterval(function() { const currentInnerHTML = document.getElementById('myElement').innerHTML; if (currentInnerHTML !== previousInnerHTML) { console.log('DOM内容发生变化'); previousInnerHTML = currentInnerHTML; }}, 100);
这种方式的缺点是会消耗大量的CPU资源，并且无法精确地知道哪些节点发生了变化。所以，尽量避免使用。
如何选择合适的DOM变化监听方法？
选择哪种方法取决于你的具体需求和浏览器兼容性要求。如果你的项目只需要支持现代浏览器，那么MutationObserver是最佳选择。如果需要兼容旧浏览器，可以考虑使用定时器轮询检测，但要注意性能问题。
MutationObserver的回调函数执行频率是怎样的？
MutationObserver的回调函数不是每次DOM操作都立即执行的。浏览器会将一段时间内的DOM操作合并成一个MutationRecord，然后一次性调用回调函数。这有助于提高性能，避免频繁的回调。
如何监听动态创建的DOM元素？
如果你需要在DOM元素被动态创建后立即监听其变化，可以使用MutationObserver结合事件委托。首先，观察包含动态元素的父节点，然后在回调函数中判断新插入的节点是否是目标元素，如果是，则开始观察目标元素。
const parentNode = document.getElementById('parent');const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { if (node.id === 'dynamicElement') { // 开始观察动态元素 observer.observe(node, { attributes: true, characterData: true, subtree: true }); } }); } });});observer.observe(parentNode, { childList: true, subtree: true });
如何避免MutationObserver的无限循环？
在使用MutationObserver时，需要注意避免无限循环。例如，如果在回调函数中修改了被观察的DOM节点，可能会再次触发回调函数，导致无限循环。为了避免这种情况，可以在回调函数中临时停止观察器，修改DOM节点后重新启动观察器。
const observer = new MutationObserver(mutations => { observer.disconnect(); // 临时停止观察器 // 修改DOM节点 observer.observe(targetNode, config); // 重新启动观察器});
以上就是JS怎样监听DOM内容变化 5个DOM变化监听方法助你实时追踪节点变更的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1507854.html
微信扫一扫 
支付宝扫一扫 
