Javascript 使用类观察页面

我正在编写一个脚本，它需要检测添加到网页中的元素，例如日历中呈现的事件（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，因为有些浏览器不支持它，而且它已被弃用（据我所知，由于性能问题）。

我知道你反对

DOMNodeInserted

，但我还是会添加它作为选项（以防你不支持旧版本的IE）

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

示例：

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

这会触发

正文

中的任何更改，而不仅仅是

正文

本身

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

---

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

我知道你不关心删除的元素，但是如果删除了一个元素，然后添加了一个新元素，你会得到相同的计数，看起来什么都没有改变……我会在观察网页时戴眼镜而不是上课。一个不经常运行的小的简单的间隔轮询并不是一个真正的问题，它是当你不断地轮询某个东西，或者在函数中坚持太多的杂乱无章的时候，你会遇到麻烦。@Ian不，OldDivScont会有问题的changed@adeneo我希望看到一个不涉及持续投票的解决方案，这是我问题的目的之一。在我的场景中，只要用户在页面上，就必须进行轮询。@Christophe Yep，我的错误：）请注意，由于jQuery 1.9，他们建议使用

document

来附加AJAX事件：

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

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