使用类观察页面

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 回调）。