Javascript 我必须在元素上注册哪种事件类型才能跟踪添加子元素

我正在寻找如何得知元素已添加到我的div中的方式

样式元素是由第三方组件添加的，我只知道将添加到哪个元素中。 我可以在我的div上用带有DOM断点的DevTools追踪到这一点，但这可能是Chrome的内部特性

有没有办法监听与直接子树修改相关的触发事件？大概是这样的：

document.getElementById（“my div”）.addEventListener（“子树修改”，函数（事件）{…my event handler}）

我在文件中找到了有关的信息。这是前进的方向吗？你能给我举个例子吗？
正如你提到的，这可以通过以下方法实现：


//选择将观察到突变的节点：
const targetNode=document.getElementById（'target'）；
//观察者选项（要观察哪些突变）
const config={attributes:true，childList:true，subtree:true}；
//创建链接到回调函数的观察者实例
const observer=新的MutationObserver（（mutationsList，observer）=>{
mutationsList.forEach（（突变）=>{
if（mutation.type==='childList'）{
log（'已添加或删除子节点'）；
}else if（mutation.type==='attributes'）{
log（'修改了'+mutation.attributeName+'属性'）；
}
});
});
//开始观察目标节点是否存在已配置的突变
observer.observe（targetNode，config）；
//修改“观察者”元素以查看此操作：
targetNode.innerText='更新的内容'；
setAttribute（'data-foo'，'bar'）；
targetNode.removeAttribute（'data-foo'）
初始内容。
如您所述，可以使用以下方法完成：


//选择将观察到突变的节点：
const targetNode=document.getElementById（'target'）；
//观察者选项（要观察哪些突变）
const config={attributes:true，childList:true，subtree:true}；
//创建链接到回调函数的观察者实例
const observer=新的MutationObserver（（mutationsList，observer）=>{
mutationsList.forEach（（突变）=>{
if（mutation.type==='childList'）{
log（'已添加或删除子节点'）；
}else if（mutation.type==='attributes'）{
log（'修改了'+mutation.attributeName+'属性'）；
}
});
});
//开始观察目标节点是否存在已配置的突变
observer.observe（targetNode，config）；
//修改“观察者”元素以查看此操作：
targetNode.innerText='更新的内容'；
setAttribute（'data-foo'，'bar'）；
targetNode.removeAttribute（'data-foo'）
初始内容。
变异观察者可以工作。（相比之下，通过
addEventListener
发生的突变事件是不推荐的、缓慢的，最好避免它们。）例如：


console.log（'scriptstart'）；
const myDiv=document.getElementById（“我的div”）；
新突变观察者（（突变，观察者）=>{
console.log（“观察到的更改”）；
//一旦看到变化，就不再需要观察者了
observer.disconnect（）；
})
.observe（myDiv，{childList:true}）；
设置超时（（）=>{
myDiv.appendChild（document.createElement（'span'））.textContent='span content'；
}, 3000);
mydiv
一个变种观察者可以工作。（相比之下，通过
addEventListener
发生的突变事件是不推荐的、缓慢的，最好避免它们。）例如：


console.log（'scriptstart'）；
const myDiv=document.getElementById（“我的div”）；
新突变观察者（（突变，观察者）=>{
console.log（“观察到的更改”）；
//一旦看到变化，就不再需要观察者了
observer.disconnect（）；
})
.observe（myDiv，{childList:true}）；
设置超时（（）=>{
myDiv.appendChild（document.createElement（'span'））.textContent='span content'；
}, 3000);
我的div
这里是一个用法示例，观察remove/add元素很简单，请注意，我使用setTimeout在1秒后删除
元素，另一个用于在2秒后添加元素：


函数回调（mutationList，observer）{
mutationList.forEach（（突变）=>{
开关（突变型）{
案例“儿童名单”：
if（突变.移除节点.长度）{
log（“此处已删除元素”）；
}
if（突变、加节点、长度）{
log（“此处添加了元素”）；
}
打破
}
});
}
var targetNode=document.querySelector（“#someElement”）；
var observer选项={
儿童名单：是的，
属性：正确，
subtree:true、//省略或设置为false以仅观察父节点的更改。
};
var observer=新的MutationObserver（回调）；
observer.observe（targetNode、observer选项）；
setTimeout（函数（）{
document.getElementById（“el2”）.remove（）；
}, 1500);
setTimeout（函数（）{
让newLi=document.createElement（“li”）；
newLi.innerHTML=“new Li”；
文件.getElementById（“ulElm”）.appendChild（newLi）；
}, 2000);


要素1
要素2
要素3
要素4

这里是一个用法示例，观察remove/add elements很简单，请注意，我使用setTimeout在1秒后删除
元素，另一个用于在2秒后添加元素：


函数回调（mutationList，observer）{
mutationList.forEach（（突变）=>{
开关（突变型）{
案例“儿童名单”：
if（突变.移除节点.长度）{
log（“此处已删除元素”）；
}
if（突变、加节点、长度）{
log（“此处添加了元素”）；
}
打破
}
});
}
var targetNode=document.querySelector（“#someElement”）；
var observer选项={
儿童名单：是的，
属性：正确，
子对象