检测DOM中的更改

我想执行一个函数时，一些div或输入被添加到html。这可能吗?

例如，添加了一个文本输入，然后应该调用函数。

当前回答

我最近写了一个插件，就是这样做的——jquery.initialize

你可以像使用.each函数一样使用它

$(".some-element").initialize( function(){
    $(this).css("color", "blue"); 
});

与.each的不同之处在于-它接受你的选择器，在本例中是.some-element，并等待将来使用该选择器的新元素，如果添加了这样的元素，它也将被初始化。

在我们的例子中，初始化函数只是将元素颜色改为蓝色。因此，如果我们添加新元素(无论是使用ajax还是F12检查器或任何东西)，如:

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

插件会立即初始化它。另外，plugin确保一个元素只初始化一次。因此，如果您添加了element，然后.detach()它从body中，然后再次添加它，它将不会再次初始化。

$("<div/>").addClass('some-element').appendTo("body").detach()
    .appendTo(".some-container");
//initialized only once

插件基于MutationObserver -它将在IE9和ie10上工作，并在自述页面上详细说明依赖关系。

2015-02-06 16:02:56

其他回答

在2022年发现了这个问题的解决方案。

我们已经看到了不同的解决方案，主要涉及MutationObserver。

如果有人想记录DOM更改并存储它们以便一段时间后重播，他们可以使用rrweb

编辑:

再举个例子，下面是一些提示:

rrweb您可以通过CDN或npm使用

让我们以CDN为例来记录DOM更改事件:

步骤1:只需在<HTML><head>标签中包含以下脚本标签

步骤2:并在代码中添加以下代码以捕获rrweb生成的事件。

<script>
var events = [];
rrweb.record({
    emit(event) {
       events.push(event);
       // you can store this event anywhere and you can replay them later. ex: some JSON file, or DB
    }
});

</script>

这个例子主要用于记录任何web应用程序的事件。

如需详细了解(如何录制/回放)，请参阅rrweb文档。

重播的例子:

这是为了调试，但添加在这里，以便任何人都可以检查重放的一面:

重复的例子

2022-09-19 11:37:03

使用TrackChanges来检测html更改。链接:https://www.npmjs.com/package/track-changes-js

例子

 let button = document.querySelector('.button');

 trackChanges.addObserver('buttonObserver', () => button);
 
 trackChanges.addHandler('buttonObserver', buttonHandler);

 function buttonHandler(button) {
   console.log(`Button created: ${button}`);
 }

2021-07-16 12:40:50

下面的例子改编自Mozilla Hacks的博客文章，并使用MutationObserver。

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

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

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

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

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

// Later, you can stop observing
observer.disconnect();

浏览器支持:Chrome 18+， Firefox 14+， IE 11+， Safari 6+

2018-05-23 17:04:38

8年后，这是我使用MutationObserver和RxJS的解决方案

observeDOMChange(document.querySelector('#dom-changes-here'))
  .subscribe(val => log('DOM-change detected'));

与其他方法的主要区别是在DOM更改时触发CustomEvent，并通过以下特性侦听事件的恢复以有效地执行用户逻辑;

撤消连续的DOM更改，以防止执行过多在给定的时间后停止观看在停止监视DOM更改后删除事件侦听器/订阅者观察一个框架(比如Angular)中发生的DOM变化是很有用的

import { fromEvent, timer} from 'rxjs';
import { debounceTime, takeUntil, tap } from 'rxjs/operators';

function observeDOMChange(el, options={}) {
  options = Object.assign({debounce: 100, expires: 2000}, options);

  const observer = new MutationObserver(list =>  {
    el.dispatchEvent(new CustomEvent('dom-change', {detail: list}));
  });
  observer.observe(el, {attributes: false, childList: true, subtree: true });

  let pipeFn;
  if (options.expires) {
    setTimeout(_ => observer.disconnect(), options.expires);
    pipeFn = takeUntil(timer(options.expires));
  } else {
    pipeFn = tap(_ => _); 
  }

  return fromEvent(el, 'dom-change')
    .pipe(pipeFn, debounceTime(options.debounce));
}

在stackblitz演示。

2021-10-02 03:30:12