javascript - 使用 JS 跟踪和更新元素

Question

很难解决这个问题。我已经使用 TinyMCE 创建了一个 WYSIWYG 编辑器，以便工作人员可以从 Word 复制/粘贴到该程序中以检查错误(即多个 h1 标题)。

我遇到的问题是一旦他们纠正了突出显示的错误。如何从此元素中删除它们的 set 属性或样式？到目前为止，这是我的 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);
}

Answer 1

函数的开始应该重置/删除任何先前设置的错误(删除 Red 颜色并删除 fixIt 类)。

然后该函数可以执行其检查操作并在需要时重新应用错误。

这让您可以在每次用户进行更改时简单地调用相同的函数。