JavaScript - 监听节点更改之前答案

【问题标题】：JavaScript - Listen to a before node changeJavaScript - 监听节点更改之前
【发布时间】：2016-03-26 19:53:27
【问题描述】：

使用 MutationObserver 我侦听树中的节点插入，但它在插入节点后运行。

如果我想在节点插入节点之前运行一个事件，我会怎么做？

例如

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { subtree: true };

// pass in the target node, as well as the observer options
observer.observe(document.documentElement, config);

该事件类似于 DOMNodeInserted 但如果我想要“BeforeDOMNodeInserted”之类的东西？

像“beforescriptexecte”Firefox 监听器。

【问题讨论】：

标签： javascript dom nodes

【解决方案1】：

如果我想在节点插入节点之前运行一个事件，我会怎么做？

标准 DOM API 没有为您提供在“内容插入/突变之前”设置挂钩的选项。

它必须是一个钩子（函数），而不是一个事件。当您将收到该事件（即异步）时，为时已晚 - 突变已经发生。

作为您的一个选项：为您的其余代码定义一组 DOM 变异函数。在这些功能中，您可以在内容进入 DOM 之前对其进行“预过滤”。

更新，这里是一个Node.appendNode“劫持”的例子：

<html>
  <head>

    <script type="text/javascript">
      !function(){
        var pAppendChild = Node.prototype.appendChild;
        Node.prototype.appendChild = function(child) {
          console.log("got appendChild call!");
          pAppendChild.call(this,child);
        }
      }();
    </script>
  </head>
<body>
</body>
    <script type="text/javascript">
      var p = document.createElement("p");
      document.body.appendChild(p);
    </script>
</html>

如果您将运行代码，您将看到“得到 appendChild 调用！”在控制台中。

从概念上讲，您可以做这样的事情并重新定义标准的 DOM 变异方法。这将是多么实用是另一回事。

【讨论】：

你能给我一个“过滤”代码示例吗？谢谢你:)。
@VasileAlexandruPeste 我已经用示例更新了我的答案。
嘿，它可以工作，但我想在他构建 HTML 树时过滤“解析器”，比如 MutationObserver，如果我用它来监听文档对象，他也会在“头部、身体和孩子”时触发" 解析器在构建文档时添加标签，当页面加载时，我们可以这样做吗？
您也可以重新定义HTMLElement.innerHtml 属性设置器。关键字：DocumentFragment、innerHtml、appendChild