用JS跟蹤和更新元素

Question

解決這個問題很困難。我用TinyMCE創建了一個所見即所得的編輯器，這樣工作人員可以從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類）。

然後，該功能可以執行其檢查操作並在需要時重新應用錯誤。

這讓您只需在每次用戶進行更改時調用相同的功能。