Использование классов для наблюдения за страницей

Я пишу скрипт, который должен обнаруживать элементы , добавленные на веб-страницу, например события, отображаемые в календаре (теги 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, поскольку некоторые браузеры не поддерживают его, и он устарел (из-за проблем с производительностью, из того, что я прочитал).

источник

2013-02-15 Christophe

Я знаю, что вам не нужны элементы, которые удалены, но вы получите тот же счетчик, если элемент удален. _then_ добавлен новый, выглядящий как ничто не изменилось ... – Ian

Я бы рекомендовал очки по классам при просмотре веб-страниц. Небольшой простой опрос интервалов, который не работает часто, не является проблемой, это когда вы постоянно что-то опросили, или придерживайтесь много mumbojumbo в функции, с которой вы сталкиваетесь. – adeneo

@Ian no, oldDivsCount изменится – Christophe

Я знаю, что вы против 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), конечно.

источник

2013-02-15 21:05:04

Как и в случае с jQuery 1.9, они рекомендуют использовать 'document' для присоединения событий AJAX: http://jquery.com/upgrade-guide/1.9/#ajax-events-should-be-attached-to-document – Ian

Использование классов для наблюдения за страницей

ответ

Смежные вопросы