Устанавливаем события DOM документа, MutationObserver, MutationSummary

Осталю здесь чтобы не потерять

Если нужно сделать проверку по изменению каких либо элементов внутри элемента, то хороший способ подошел бы, для отслеживания события через DOM

Или если ты оптимизируешь и проверяешь сайт по PageSpeed и ты являешься разработчиком данного контента страницы, то применяй MutationObserver 😉

Приведу пример как его следует применять по es6 в новом синтаксисе кода (хорошо подойдет для тех кто занимается сборкой):

Или пример как его следует применять в старом формате:

Код в строках 11–17 извлекает все необработанные записи мутаций, затем вызывает обратный вызов с записями, чтобы их можно было обработать. Это делается непосредственно перед вызовом disconnect(), чтобы прекратить наблюдение за DOM.

Опишу отдельно передаваемые параметры:

attributes - в атрибутах node

childList - изменения в непосредственных детях node

subtree - во всех потомках node

attributeFilter - массив имён атрибутов, чтобы наблюдать только за выбранными

characterData - наблюдать ли за node.data (текстовое содержимое)

characterDataOldValue - если true, будет передавать и старое, и новое значение node.data в колбэк, иначе только новое (также требуется опция characterData),

attributeOldValue - если true, будет передавать и старое, и новое значение атрибута в колбэк, иначе только новое (также требуется опция attributes)

Известные методы для MutationObserver:

observe - Отслеживание, вызов при изменении DOM

disconnect - остановить отслеживания события, отключить

takeRecords - возвращает список всех соответствующих изменений DOM, но еще не обработанных

Применение библиотеки MutationSummary облегчает фильтрацию мутаций и предоставляет детализированные отчёты о добавленных и удалённых элементах:

С применением es6:

Или с применением обычным форматом для поддержки всех браузеров, если конечно есть которые не поддерживают es6:

Благодаря возможности составления запросов, данная библиотека упрощает обработку изменений.

DOMAttrModified - если изменился атрибут у элемента DOM;

DOMAttributeNameChanged - если изменилось имя атрибута у элемента DOM;

DOMCharacterDataModified - если изменился какой-либо текст, будь то обычный 'text node' или простой комментарий у элемента DOM;

DOMElementNameChanged - если изменилось имя у элемента DOM;

DOMNodeInserted - если у элемента DOM произошла вставка нового элемента;

DOMNodeInsertedIntoDocument - если произошла вставка нового элемента в document;

DOMNodeRemoved - если у элемента DOM произошло удаление какого-либо элемента;

DOMNodeRemovedFromDocument - если произошло удаление какого-либо элемента в document;

DOMSubtreeModified - если произошло какое-либо изменение в document.

$('body').on('DOMNodeInserted', '.test-block', function() {
    console.log('Добавлен элемент в нутри .test-block'); 
})