这在前面已经讨论过了:如何使用Jquery将元素添加到页面时执行操作？
每当div添加到页面时,响应者建议触发自定义事件.但是,我正在撰写Chrome扩展程序,但无法访问页面源代码.我有什么选择？我想在理论上我可以setInterval()用来不断搜索元素的存在并添加我的动作,如果元素在那里.
javascript dom event-handling change-notification mutation-observers
有没有办法在Javascript或jQuery中找出HTML元素何时被动态地添加到DOM中,或通过jQuery.append()本机Javascript的节点操纵器之一？可能有几种不同的方法可以动态地将HTML元素添加到页面中,因此我不确定应该监听哪些事件或事件.
具体示例是通过第三方Javascript代码将锚标记添加到页面中(我无法修改或轻松闪烁).我想更改链接的文本.
我希望有一些比setTimeout()循环更好的东西$(SOME ELEMENT).length > 0.(我在其中看到的一部分如何确定是否已将动态创建的DOM元素添加到DOM中？但它是从2008年开始的)
我将一些功能附加到DOM元素,并希望能够在从DOM中删除元素时清除所有引用,以便可以对其进行垃圾回收,
我检测元素removel的初始版本是这样的:
var onremove = function(element, callback) {
var destroy = function() {
callback();
element.removeEventListener('DOMNodeRemovedFromDocument', destroy);
};
element.addEventListener('DOMNodeRemovedFromDocument', destroy);
};
然后我读到变异事件被弃用而支持MutationObserver.所以我试着移植我的代码.这就是我想出的:
var isDescendant = function(desc, root) {
return !!desc && (desc === root || isDecendant(desc.parentNode, root));
};
var onremove = function(element, callback) {
var observer = new MutationObserver(function(mutations) {
_.forEach(mutations, function(mutation) {
_.forEach(mutation.removedNodes, function(removed) {
if (isDescendant(element, removed)) {
callback();
// allow garbage collection
observer.disconnect();
observer = undefined;
}
});
});
});
observer.observe(document, {
childList: true, …我正在聊天并有聊天包装器。在聊天包装器内，使用消息创建新的跨度。就像这样：
<div id="chat-wrapper">
<span>msg 1</span>
<span>msg 2</span>
<span>msg ...</span>
</div>
有没有办法观察#chat-wrapper 是否生了新孩子？
最好是jquery..
当一个元素从 DOM 中直接或作为子树的一部分被移除时，有没有办法获得通知？似乎唯一可用的方法仅适用于直接删除的节点，但是当包含我的节点的整个子树被删除时，我想收到通知。
编辑
似乎问题并不完全清楚，所以我提出了一个挑战：https : //jsbin.com/winukaf
DOM 看起来像这样：
<body>
<div class="root">
<div class="great-grand-parent">
<div class="grand-parent">
<div class="parent">
<div class="leaf">
Am I still here?
</div>
</div>
</div>
</div>
</div>
</body>
挑战是在此处的任何元素被删除时发出通知，因为这将从 DOM 树中删除叶节点。
鉴于此示例代码：
function someMethod(elements) {
var observer = new MutationObserver(function(events) {
SomeLib.each(events, function(event, k, i) {
if ( event.removedNodes ) {
SomeLib.each(event.removedNodes, function(removedElement, k, i) {
console.log(222, removedElement)
});
}
});
});
SomeLib.each(elements, function(element, k, i) {
console.log(111, element)
observer.observe(element, {
childList : true,
subtree : false
});
});
}
我注意到如果我打电话someMethod(parentElement)然后稍后再打电话someMethod(parentElement.querySelector('someChildElement'))
第一个是唯一触发事件的调用，并且看起来好像第二个调用没有触发任何事件。
不幸的是，因为我最感兴趣的是实际节点被删除时的事件。没有其他的。子节点实际上也不感兴趣，但是选项childList必须data...如此true，所以我猜我是被迫的。
我无法围绕跟踪谁的父级已被跟踪或未被跟踪来组织我的代码，因此我会发现简单地侦听任何特定节点上的删除事件要容易得多，无论它最终以何种方式删除。
考虑到这种困境，我正在考虑MutationObserver在document元素上注册 a ，而是依赖于检测我希望通过自己的事件处理程序观察自己的元素。
但这真的是我最好的选择吗？
性能显然是值得关注的，因为一切都会触发这个文档监听器，但也许只有一个MutationObserver潜在的高效，因为我只会在检测到感兴趣的元素时触发我自己的函数。
然而，它可能需要在removedNodes和addedNodes上进行迭代，因此它对所有事物都有真正的影响，而不仅仅是我观察节点。
这就引出了一个问题，是否已经注册了一个全局突变观察者？
我真的需要自己手动观察文档吗？
如果其他库也开始在主体元素或子元素上观察类似的情况怎么办？
我不会破坏他们的实施吗？（并不是说我只是有依赖性）但这令人担忧这个实现实际上看起来是多么可怕 …
我想检测何时某个节点（例如nodeX）不再可用，要么是因为删除了它，要么是因为删除了它的父代（或它的父代父代）。
到目前为止，我所能想到的就是使用Mutation Observer查看页面上的所有删除，并检查删除的节点是nodeX还是后代具有nodeX。
有没有更简单的方法？
请注意：据我了解，链接的问题（该问题“是”的重复项）询问“如何检测节点的[直接]删除”。我的问题是“如何检测节点或其父节点（或任何其他祖先）的删除”。
据我了解，这对于突变观察者而言并非一帆风顺：您需要检查每个已删除的节点以查看其是否是祖先。
这是我寻求确认或否认的内容。
据我了解，这与链接的问题不同。
我有这些：
const element = this.getElementById("victim")
function releaseKraken(targetElement) {}
我希望element从DOM中删除该函数。
我可以想象这样的事情：
element.onRemove(() => releaseKraken(element))
我知道我需要MutationObserver，但是我发现的所有文档都集中在观察给定元素的孩子，而我需要观察元素本身。
UPD：问题如何检测从dom元素添加/删除的元素？ 专注于观察给定父母的孩子。我不想看孩子或父母。我想从DOM中删除给定元素时收到通知。不是孩子。而且我不想在给定元素的父对象上设置观察者（除非这是唯一的选择），因为这会影响性能。
UPD2：如果我将MutationObserveron 设置为on document，这将导致每个会话触发该回调数千次甚至数百万次，并且每次回调都必须过滤大量已删除元素以查看其是否包含有问题的元素。那太疯狂了。
我需要像上面显示的简单的东西。我希望回调仅被触发一次：给定元素被删除时。