0

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

4

1 回答 1

0

我知道你反对，DOMNodeInserted但无论如何我都会为选项添加它（以防你不支持旧版本的 IE）。

不久前我在博客上写过这个，但现在似乎同样的解决方案仍然适用（但就像我说的，取决于你当前支持的浏览器）。

例子：

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

于 2013-02-15T21:05:04.630 回答