dom4j 更改节点内容_如何使用MutationObserver API进行DOM节点更改

这是一种情况：杂志作家丽塔（Rita）正在在线编辑她的文章。 她保存了更改，并看到消息“更改已保存！”。 就在那时，她注意到她错过了一个错字。 当老板打来的愤怒的电话时，她将其修复并准备单击“保存”。

通话结束后，她返回屏幕，看到“已保存更改！” 关闭她的计算机，然后冲出办公室。

除了我对讲故事的无能之外，我们还从这种短暂的情况中注意到了持续不断的信息制造了什么麻烦。 因此，将来我们决定尽可能避免使用它，或者使用一种提示用户通过单击进行确认的方法-或自行消失 。 使用第二个快速消息是个好主意。

我们已经知道如何使元素从页面中消失，所以这不是问题。 我们需要知道的是它何时出现？ 因此，我们可以使其在合理的时间后消失。

MutationObserver API

总体而言，当DOM元素（例如message div ）或任何其他节点发生更改时，我们应该能够知道它。 长期以来，由于缺乏本机API，开发人员不得不依靠黑客和框架。 但这已经改变了。

现在，我们有了MutationObserver （以前称为Mutation Events）。 MutationObserver是具有一组属性和方法JavaScript本机对象。 它使我们可以观察到任何节点（例如DOM元素，文档，文本等） 上的更改 。通过突变，我们意味着添加或删除节点以及更改节点的属性和数据 。

让我们看一个例子，以更好地理解。 我们首先进行设置，在单击按钮时出现一条消息，就像Rita看到的那样。 然后，我们将创建一个变异观察者并将其链接到该消息框 ， 并对逻辑进行编码以自动隐藏消息 。 精明吗？

注意 ：您可能已经或已经在脑海中问过我“ 为什么不只在JavaScript中的按钮单击事件本身内部隐藏消息？ ”在我的示例中，我不使用服务器，因此，客户端当然要负责显示消息，并且很容易将其隐藏。 但是就像在Rita的编辑工具中一样，如果服务器是决定更改DOM内容的服务器，则客户端只能保持警惕并等待。

首先，我们创建设置以在单击按钮时显示消息。

<div id="msg"></div><br />
<button>Show Message</button>

var msg = document.querySelector('#msg'),
  SUCCESSMSG = "Changes Saved!";

/* Add button click event */
document
.querySelector('button')
.addEventListener('click', showMsg);

function showMsg() {
  msg.textContent = SUCCESSMSG;
  msg.style.background = 'teal';
}

一旦我们完成了初始设置，请执行以下操作；

• 使用用户定义的回调函数创建MutationObserver对象（该函数将在后面的文章中定义）。 该函数将在MutationObserver观察到的每个突变上执行。
• 创建一个配置对象以指定MutationObserver要观察的MutationObserver 。
• 将MutationObserver绑定到目标，在我们的示例中为目标“ msg” div 。

(function startObservation() {
  var
    /* 1) Create a MutationObserver object*/
    observer = new MutationObserver(
      function(mutations) {      
      mutationObserverCallback(mutations);
    }),  
    /* 2) Create a config object */
    config = {childList: true};

  /* 3) Glue'em all */
  observer.observe(msg, config);
})();

以下是config对象的属性列表，用于标识不同种类的突变。 由于在我们的示例中，我们仅处理为消息文本创建的子文本节点，因此我们使用了childList属性。

观察到的突变类型

属性	设置为true
childList	观察到目标子节点的插入和删除。
属性	观察到目标属性的变化。
characterData	观察目标数据的变化。

现在，该回调函数将在每个观察到的变异上执行。

function mutationObserverCallback(mutations) {
  /* Grab the first mutation */
  var mutationRecord = mutations[0];
  /* If a child node was added, 
     hide the msg after 2s  */
  if (mutationRecord.addedNodes[0] !== undefined) 
    setTimeout(hideMsg, 2000);
}
function hideMsg() {
  msg.textContent = '';
  msg.style.background = 'none';
}

由于我们仅向div添加一条消息，因此我们将仅获取在其上观察到的第一个突变，并检查是否插入了文本节点。 如果发生了多个更改，则可以循环遍历所有mutations数组。

属性	退货
addNodes	空数组或添加的节点数组。
attributeName	添加，删除或更改的属性的空值或名称。
attributeNamespace	添加，删除或更改的属性的空值或名称空间。
nextSibling	已添加或删除的节点的空或下一个同级。
旧值	属性或数据的空值或先前值已更改。
以前的兄弟姐妹	添加或删除的节点的空值或先前的同级。
removeNodes	空数组或已删除的节点数组。
目标	MutationObserver定位的节点
类型	观察到的突变类型。

而且...就是这样。 我们只需要将代码放在一起进行最后一步。

浏览器支持

图像：我可以使用.Web。 2015年6月19日

参考

• “ W3C DOM4突变观察者 。” W3C。 网络。 2015年6月19日
• “ MutationObserver 。” Mozilla开发人员网络 。 网络。 2015年6月19日。

翻译自: https://www.hongkiat.com/blog/mutationobserver-api/