Question

我有一个空的div元素：

<div class="message"></div>

在网页的某个位置，p标记会动态添加到div：

<div class="message">
  <p>Some Message</p>
</div>

p可以删除，然后再次添加。

如果div.message有一个p孩子并执行某些代码，我应该使用什么事件来听？

我发现了this问题，但它涉及外部插件。

难道没有一种简单的方法可以实现这一目标吗？

Answer 1

根据您的实施情况以及识别更改所需的速度，您可以使用setInterval来定期监控某个元素的内容。

var checkContents = setInterval(function(){
  if ($("div.message p").length > 0){ // Check if element has been found
    // There is a <p> element in here!!
    console.log($("div.message p").length());
  }
},1000);

上一个代码段将每秒检查<p>个元素中的div.message元素（1000毫秒），如果存在，则会将它们的数量记录到控制台。

根据您的浏览器支持要求，您也可以使用突变事件 -

Mutation events provide a mechanism for a web page or an extension to get notified about changes made to the DOM...

var element = document.querySelectorAll('div.message')
element.addEventListener("DOMNodeInserted", function (ev) {
  // ...
}, false);

Answer 2

Vanilla JS 有一种很棒的方法来检测任何 DOM 更改（包括节点是否添加了任何子节点），请查看：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

但是这些文档不是很清楚，所以这里有一个简单的解释。

首先，你需要一个目标节点来监听：

const targetNode = document.getElementById('some-id');

然后你想在目标改变时创建一个触发器（称为MutationObserver）：

const observer = new MutationObserver(callbackFunction);

定义当目标改变时你想要发生的事情：

const callbackFunction = function(mutationsList) { // Use traditional 'for loops' for IE 11 for(const mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } } };

注意：mutationsList 是一个包含大量信息的对象，其中包含目标节点已更改的内容，包括样式、添加的节点等...

最后，您可以开始观察目标节点的突变（变化）：

observer.observe(targetNode, { childlist: true, attributes: true });

第二个参数是一个“选项”对象，用于定义您要查找的突变（更改）类型。

希望这会有所帮助，我发现它是一个非常强大且被低估的 js 工具

元素存在时的触发事件

2 个答案: