Javascript 检测存储的引用和DOM元素之间的链接是否断开

我最近发现了以下问题：

• 存储对DOM元素（即span）的引用，这样您就可以更快地对其进行操作，而无需不断地进行DOM搜索来找到它

• 运行对已存储的引用的DOM元素执行某些操作的操作

• 使用

  .innerHTML+=“0”动态添加新的DOM元素

• 观察视图如何不再根据存储的引用进行更新

这意味着存储的引用和DOM元素之间的链接已断开。 我需要在元素上执行的操作以很短的间隔（每秒60次）运行，因此我现在被迫每秒执行

document.getElementById（）

60次，这会显著影响旧设备上的性能

我试着调试这个问题，发现元素仍然连接在引用中，操作仍然在运行，它只是停止更新视图，所以我不知道如何修复这个问题

理想情况下，最好检查一下链接是否断开并重新链接。有人知道怎么做吗

测试代码：

var池=[]；
var检查池状态=功能（索引）{
log（池[索引]）；
};
var增加=功能（id）{
var dom_element=document.getElementById（id）；
var next=pool.length；
池[下一步]={
元素：dom_元素，
值：parseInt（dom_元素.innerText），
更新：函数（）{
var self=这个；
setInterval（函数（）{
自我价值++；
self.element.innerText=self.value；
}, 50);
}
};
池[next].update（）；
};
增加（“测试”）；
//使用+=innerHTML在2秒后向DOM添加新元素
setTimeout（函数（）{
document.body.innerHTML+=“0”；
setInterval（函数（）{
检查_池_状态（'0'）；
}, 1000);
}, 2000);
span{
显示：块；
背景：#efef；
填充：20px；
浮动：左；
宽度：200px；
文本对齐：居中；
字体系列：arial；
右边距：20px；
字体大小：40px；
文本阴影：0px2px2pRGBA（49,49,49,0.69）；
边框：实心2px#ccc；
边界半径：4px；
颜色：#9292；
}
0
使用，以免损坏对旧节点的引用。当您使用（
+=
或
=
）
.innerHTML
时，容器的内容被解析回字符串，容器被清除，您要添加的字符串被附加到现有字符串，然后连接的字符串被重新解析为HTML-因此，旧引用丢失是有意义的

例如：


var池=[]；
var检查池状态=功能（索引）{
log（池[索引]）；
};
var增加=功能（id）{
var dom_element=document.getElementById（id）；
var next=pool.length；
池[下一步]={
元素：dom_元素，
值：parseInt（dom_元素.innerText），
更新：函数（）{
var self=这个；
setInterval（函数（）{
自我价值++；
self.element.innerText=self.value；
}, 50);
}
};
池[next].update（）；
};
增加（“测试”）；
//使用+=innerHTML在2秒后向DOM添加新元素
setTimeout（函数（）{
document.body.insertAdjacentHTML（'beforeend'，'0'）；
setTimeout（函数（）{
增加（“另一个_测试”）；
}, 1000);
}, 2000);
span{
显示：块；
背景：#efef；
填充：20px；
浮动：左；
宽度：200px；
文本对齐：居中；
字体系列：arial；
右边距：20px；
字体大小：40px；
文本阴影：0px2px2pRGBA（49,49,49,0.69）；
边框：实心2px#ccc；
边界半径：4px；
颜色：#9292；
}
0
是的，或者甚至创建元素并附加它，不幸的是元素是由第三方脚本添加的，我无法控制添加方法，因此我必须使用我拥有的内容，因此我需要检测它是否已损坏或该范围内的内容请参见编辑。检查元素的
parentElement
或检查其容器
是否包含它。此
。parentElement
检查非常出色！它做得非常好，我还没有测试这两个建议的性能，但从初步看，parentElement可能会更快，因为它只使用已存储的引用来检查其属性。但我可能错了，只有测试才能显示真实情况。不过，这个答案需要很多投票，谢谢；）