使用类来观察页面

Question

我正在编写一个脚本，需要检测添加元素到网页，例如在日历中呈现的事件（div标签）。我不关心被删除的元素。页面上最多应有20-30个这样的元素。

我的想法 - 简短易用的代码 - 是使用特定的类（“myName”）来标记页面中已有的元素。我会定期轮询页面：

// Get all divs in the calendar: 
var allDivsCount=myCalendar.querySelectorAll("div").length;
// Get already branded divs
var oldDivsCount=myCalendar.querySelectorAll("div.myName").length;
if (allDivsCount > oldDivsCount) {
    // brand the new divs and do stuff
}

这是一个很好的做法，还是有更好的方法呢？是否已经实施了这种逻辑的库？

我正在尝试避免使用DOMNodeInserted，因为有些浏览器不支持它并且它已被弃用（由于性能问题，从我读过的内容）。

Answer 1

我知道你反对DOMNodeInserted但我会为选项添加它（如果你不支持旧版本的IE）。

我在博客上写了一段时间back，但似乎今天仍然适用相同的解决方案（但就像我说的，取决于您目前支持的浏览器）。

示例：

$(document.body).on('DOMNodeInserted', function (e) {
    if (e.currentTarget.toString() === 'HTMLBodyElement') {
       console.log(e);
    }
});

这会触发body内的任何更改，而不仅仅是body本身。

$('#context').append($('<div />')); // triggers the event above

如果您可以拦截DOM更改（例如AJAX调用）并创建全局回调函数，那么这将是理想的，而不是setInterval选项。

var globalCallback = function() { 
    /** Do something when the DOM changes */ 
};

/** Global AJAX event to watch for all AJAX complete within the body */
$('body').ajaxComplete(globalCallback);

这只是一个例子（AJAX回调）当然。