Отслеживание и обновление элементов с помощью JS

Нелегко решить это. Я использовал TinyMCE для создания редактора WYSIWYG, чтобы сотрудники могли скопировать/вставить из Word в эту программу, чтобы проверить наличие ошибок (т.е. Несколько заголовков h1).

Проблема, с которой я столкнулась, - это исправление выделенной ошибки. Как удалить свой атрибут или стиль из этого элемента? Вот мой JS, который делает проверку и создает журнал. Я предполагаю, что мне нужно использовать MutationObserver? Я никогда не использовал его и не видел, чтобы найти хорошее объяснение.

function styleGuide(){

    var searchInput = tinyMCE.activeEditor.getContent();
    document.getElementById('findAllErrors').innerHTML = searchInput;

    var resultsLog = document.getElementById('passFailLog');

    // search for h1
    var h1 = document.querySelectorAll('h1');
    var i = 0;
    do {
        if(h1.length == 0){
            resultsLog.innerHTML = "<br /><span class='warning'>You do not have an H1 element.</span>";
        }
        else if(h1.length > 1){
            resultsLog.innerHTML = "<br /><span class='error'>You have more than one H1 element.</span>";
        }
        else {
            resultsLog.innerHTML = "<br /><span class='pass'>You have the correct amount of H1 headers.</span>";
        }
        //set style for errors
        if(i > 0){
            h1[i].style.color = "Red";
            h1[i].setAttribute("class", "fixIt");
        }
        i++;
    }
    while (i < h1.length);

    //Update Error Found to Original Editor
    var outputUpdate = document.getElementById('findAllErrors').innerHTML;
    var mceContent = tinyMCE.activeEditor.getContent();
    var errorsFound = outputUpdate.replace(mceContent, outputUpdate);
    tinymce.activeEditor.setContent(errorsFound);
}