Mutation Observer 无法在受支持的 Microsoft Edge 版本上运行答案

【问题标题】：Mutation Observer not working on a supported Microsoft Edge VersionMutation Observer 无法在受支持的 Microsoft Edge 版本上运行
【发布时间】：2020-03-12 22:48:18
【问题描述】：

我有以下代码，它利用了 mutationobserver，它可以在浏览器 chrome、firefox、opera 中运行，但不能在浏览器边缘运行。

  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  var observer = new MutationObserver(function(mutations) {

   mutations.forEach(function(mutation) {

     if (mutation.type === 'childList') {
     if(mutation.target.innerHTML == 'Online - Chat Us'){
       //if button text changes from "Offline" to "Online - Chat Us"
       if(mutation.removedNodes[0].nodeValue === 'Offline' && mutation.addedNodes[0].nodeValue === 'Online - Chat Us'){
         //change top button to "Online - Chat Us" && false the disabled attribute.
         document.getElementById('mySecondButton').innerHTML = mutation.addedNodes[0].nodeValue;
         document.getElementById('mySecondButton').disabled = false;
     }
 }
     }else if(mutation.type === 'characterData'){
     //console.log(mutation);      
     }
   });
 });

仅在调试器的边缘浏览器中，我收到以下错误：SCRIPT5007: SCRIPT5007: Unable to get property 'nodeValue' of undefined or null reference 这是引用这行代码@ 987654331@

从下面的图表中，我可以看到我使用的是受支持的版本。

Link to chart resource

边缘浏览器版本的屏幕截图。

【问题讨论】：

@calculuswhiz 我收到以下错误：SCRIPT5007: SCRIPT5007: Unable to get property 'nodeValue' of undefined or null reference
它引用了这一行 if(mutation.target.innerHTML == 'Chat Now'){ 想知道它是否需要对 innerHTML 做些什么
@calculuswhiz 每当跨度内的文本更改时，当前都会触发它。我将用 for 循环替换 foreach ..
@Calculuswhiz 看起来只有版本 12 支持“target”和“removedNodes”属性。看看developer.mozilla.org/en-US/docs/Web/API/MutationRecord
根据MDN document，我创建了a sample，并使用您的代码，似乎一切正常，无法重现问题。你能创建一个codepen sample 来重现问题吗？

标签： javascript html css browser microsoft-edge

【解决方案1】：

在 Edge 中，innerHTML、innerText 和 textContent 的变化导致的不是一条而是两条突变记录：一条用于删除旧节点，一条用于插入新节点。所有其他浏览器只有一个突变记录，其中包含一个删除节点和一个插入节点。我为脚本提供了一些空值检查，以将突变记录缩小到只有一个，这很好。

【讨论】：