Запуск события при изменении элемента в неупорядоченном списке в iframe

Я разрабатываю приложение, используя node-webkit. У меня есть iframe, который загружает веб-страницу. На веб-странице есть неупорядоченный список, и я хотел бы получить триггер, если элемент в неупорядоченном списке изменится.

<iframe id="app" src="https://www.somewebsite.com/" nwdisable nwfaketop></iframe>

Ненумерованный список не имеет имени класса, и его единственный тег — data-reactid="XYZ". Однако первый элемент в неупорядоченном списке всегда имеет имя класса: .abc

Из другого вопроса SO (Вызывать функцию jquery при изменении содержимого ‹ul› ), я нашел, как вызвать функцию, если есть изменение:

! function () {
    var ulContent;
    $(document).ajaxStop(function () {
        var $ul = $('.abc');
        if(ulContent !== $ul.html()){
            ulContent = $ul.html();
            $ul.trigger('contentChanged');
        }
    });
}();

$('.abc').on('contentChanged',function(){alert('UL content changed!!!');});

Однако я считаю, что сейчас скрипт ищет класс .abc в исходном коде текущей страницы, а не в коде iframe.

Чтобы извлечь исходный код iframe, я написал:

innerBody = document.getElementById('app').contentWindow.document.body.innerHTML;

Как заставить функцию ajax просматривать исходный код iframe? Также что означает ! в функции ajax?