Javascript 如何在添加元素时更改动态页面上的DOM？

我有一个网页，我正试图为其编写一个脚本，该脚本将在特定元素中查找虚拟终端（VT）颜色代码，然后用

元素替换它们。我相信核心代码工作得很好，但问题是如何有效地部署代码，以便在通过站点自己的代码向DOM添加新元素时，我的代码将检测并重写

（函数（）{
"严格使用",；
document.addEventListener（“域节点插入”，函数（）{
setTimeout（函数（）{
var vtRe=/\x5b（？\d{2}（？：；1）？0）m/；
var nodeList=document.queryselectoral（“div.command-output:not（.vt colorized）”；
nodeList.forEach（（节点）=>{
//将VT颜色代码替换为span颜色
var iText=node.innerText；
var arr=iText.split（/\x1b/）；
node.innerText=''；
arr.forEach（（项目）=>{
var newEle=document.createElement（“span”）；
让match=vtRe.exec（项目）；
如果（匹配）{
开关（匹配.组.颜色）{
案例“30”：
newEle.style.color='黑色'；
打破
案例“31”：
newEle.style.color='darkred'；
打破
案例“32”：
newEle.style.color='darkgreen'；
打破
案例“33”：
newEle.style.color='darkyellow'；
打破
案例“34”：
newEle.style.color='darkblue'；
打破
案例“35”：
newEle.style.color='darkmagenta'；
打破
案例“36”：
newEle.style.color='darkcyan'；
打破
案例“37”：
newEle.style.color='darkgray'；
打破
案例“30；1”：
newEle.style.color='灰色'；
打破
案例“31；1”：
newEle.style.color='red'；
打破
案例“32；1”：
newEle.style.color='绿色'；
打破
案例“33；1”：
newEle.style.color='黄色'；
打破
案例“34；1”：
newEle.style.color='blue'；
打破
案例“35；1”：
newEle.style.color='洋红色'；
打破
案例“36；1”：
newEle.style.color='青色'；
打破
案例“37；1”：
newEle.style.color='白色'；
打破
案例“32”：
newEle.style.color='绿色'；
打破
案例“0”：
打破
违约：
打破
}
}
newEle.innerText=item.replace（vtRe“”）；
node.append（newEle）；
});
node.classList.add（'vt-colorized'）；
});
}, 10000);
}，假）；
})();

我尝试过以下方法：

• addEventListener（“DOMNodeInserted”，…）

  在每个元素插入DOM时直接运行代码；但是，由于创建了无限循环，这导致调用堆栈超出错误

• setInterval（…）

  定期运行代码，查找需要代码处理的元素；但是，这会导致部分处理或数据丢失，因为响应传入时DOM会发生更改，这是不规则的

• addEventListener

  →

  setTimeout

  （如上面的代码所示）-这也不起作用

---

我这样做是不是错了/有没有更简单的方法来处理这个问题？

为了避免无限循环，您可以在添加在侦听器中检查的节点之前设置一个标志：

(function () {
    'use strict';
    let inserting = false;
    document.addEventListener("DOMNodeInserted", function () {
        if (inserting) return;
        inserting = true;
        var vtRe = /\x5b(?<color>\d{2}(?:;1)?|0)m/;
        // ...rest of your code
        inserting = false;
    });
})();

（函数（）{
"严格使用",；
设插入=假；
document.addEventListener（“域节点插入”，函数（）{
如果（插入）返回；
插入=真；
var vtRe=/\x5b（？\d{2}（？：；1）？0）m/；
//…代码的其余部分
插入=假；
});
})();

突变事件，如域节点插入

改用a

简化示例：

const targetNode=document.querySelector（“#cont”）；
const observer选项={
儿童名单：是的，
属性：false，
//忽略（或设置为false）仅观察父节点的更改
子树：真
}
const observer=新的MutationObserver（回调）；
observer.observe（targetNode、observer选项）；
函数回调（mutationList，observer）{
mutationList.forEach（（突变）=>{
if（mutation.type=='childList'&&mutation.addedNodes.length）{
突变.addedNodes.forEach（el=>{
如果（el.匹配（“#cont ul li”））{
console.log（“
已添加”）
el.style.color='红色'
}
});
}
});
}
//每1.5秒插入一个元素
设ctr=0；
常量计时器=设置间隔（（）=>{
如果（++ctr==5）{
清除间隔（计时器）
}
const li=document.createElement（'li'）
li.textContent=`Item${ctr}`
document.querySelector（“#cont ul”）.append（li）
}，1500）

我确实试过了