是否可以在 Javascript 中触发文档加载事件之前响应添加到 DOM 的元素？答案

【问题标题】：Is it possible to respond to elements being added to the DOM before the document load event is fired in Javascript?是否可以在 Javascript 中触发文档加载事件之前响应添加到 DOM 的元素？
【发布时间】：2015-09-28 11:49:52
【问题描述】：

我正在尝试制作一个 javascript 嵌入，以便在页面加载时对其进行操作。该脚本在标题中，我希望它能够在 document.querySelector 找到元素后立即对其进行操作。换句话说，它需要在 document.readyState 处于“交互”状态时，在“加载”之前对 DOM 中的变化做出反应。我不能使用超时/间隔，因为文档加载会阻塞，直到整个文档被加载，所以如果我设置 0 毫秒的超时，它将在 document.readyState 被“加载”之前不会执行。

当元素添加到 DOM 时，是否有任何事件触发？我尝试了 DOMNodeInserted，但它似乎只对加载文档后异步添加的元素触发。

最后，这必须仅使用 javascript 来完成；我无权访问 html 或服务器。嵌入正在其他人的网站上。

【问题讨论】：

放置在文档末尾的脚本将在第一次“渲染”之前运行，但在创建所有元素之后。由于这是一个新的页面加载，因此可以假设所有当前元素都刚刚被“添加”，这可能是一种可用的方法。
你可能想看看网络组件。

标签： javascript events dom domready

【解决方案1】：

您应该将事件附加到文档本身，然后检查事件的目标，如果它是您需要的，请执行您想要的操作。例如：

document.addEventListener("click", function(e){
  var element = e.target;
  if (element.nodeName === "A") {
    //I am gonna do something with <a> elements
    //Don't forget to return true if it is an anchor and you want the default event to trigger because if not, it will cancel the event.

  } else if (element.className.match("myClass")) {
    //OK, this element contains the class i am looking for, let's do something with it
  } else if (element.id === "myId") {
    //I finally found the element with the ID i was looking for
  }
});

更新（用于节点插入）：

document.addEventListener("DOMNodeInserted", function(e){
      // e is a MutationEvent
      var element = e.target;
      //Behavior here is pretty much the same as above
      if (element.nodeName === "A") {
        //I am gonna do something with <a> elements
        //Don't forget to return true if it is an anchor and you want the default event to trigger because if not, it will cancel the event.

      } else if (element.className.match("myClass")) {
        //OK, this element contains the class i am looking for, let's do something with it
      } else if (element.id === "myId") {
        //I finally found the element with the ID i was looking for
      }
    });

另一个更新：

我发现这个link 可能会很有趣。它使用动画来确定对象何时被插入到 DOM 中。我用一点 POC 创建了一个 fiddle，它似乎可以满足您的需求。

【讨论】：

我想使用这种方法，但是我找不到在元素首次添加到 DOM 时触发的事件
正如我在原始问题中提到的，我尝试了 DOMNodeInserted，但它对我不起作用。第一次加载文档时，我无法捕获任何 DOMNodeInserted 事件。加载 DOM 后，异步插入新节点会触发事件，但这不是我想要的。我需要一个在加载原始 DOM 元素时触发的事件。
我想我为你找到了一个可能的解决方案。基于此链接 (davidwalsh.name/detect-node-insertion)，我创建了以下 jsFiddle (jsfiddle.net/0y4jet4L)，它似乎有效（至少在我测试的情况下）。这可能不是最好的解决方案，但它可能会有所帮助:)
很酷的发现！经过一些初始测试后，即使使用此方法，事件也会在 document.readyState 更改为“完成”后得到处理。但这似乎最接近我想要实现的目标。比这更早做出反应可能是不可能的。

【解决方案2】：

也许你问错了问题？为什么不用你需要的任何外壳或基本框架加载页面，然后使用 AngularJS 之类的东西来动态呈现你需要的东西？你不一定需要一个服务器来做这样的事情。

【讨论】：