Javascript 检测元素是否仍然存在

有没有办法确定保存到变量中的元素是否仍然存在于文档中？我尝试了以下操作，当删除第二个输入标记时，它将不会输出console.log（）

<input type="text">
<input type="email">
<input type="tel">

<script>

var ref= [document.getElementsByTagName('INPUT')[0], document.getElementsByTagName('INPUT')[1], document.getElementsByTagName('INPUT')[2]];

document.getElementsByTagName('INPUT')[1].outerHTML = '';

if (!document.contains(ref[1])) {
    console.log('deleted')
}

</script>

var ref=[document.getElementsByTagName（'INPUT'）[0]，document.getElementsByTagName（'INPUT'）[1]，document.getElementsByTagName（'INPUT'）[2]；
document.getElementsByTagName（'INPUT'）[1].outerHTML=''；
如果（！document.contains（参考文献[1]））{
console.log（'已删除'）
}

您的代码失败，因为您删除了索引

1

处的元素，这会将索引

2

处的元素向下移动到该索引

一般来说，不要做所有的DOM选择。对变量选择一次，然后重用该集合。这绝对不是将集合转换为数组的方法

然而，即使使用缓存列表，它仍然是一个活动列表，因此仍然会发生相同的重新索引

因此，将该元素存储到它自己的变量中，然后测试它

var inputs=document.getElementsByTagName（'INPUT'）；
var barElem=输入[1]；
barElem.remove（）；
如果（！document.contains（barElem））{
console.log（'已删除'）
}

---

您的代码失败，因为您删除了索引

1

处的元素，这会将索引

2

处的元素向下移动到该索引

一般来说，不要做所有的DOM选择。对变量选择一次，然后重用该集合。这绝对不是将集合转换为数组的方法

然而，即使使用缓存列表，它仍然是一个活动列表，因此仍然会发生相同的重新索引

因此，将该元素存储到它自己的变量中，然后测试它

var inputs=document.getElementsByTagName（'INPUT'）；
var barElem=输入[1]；
barElem.remove（）；
如果（！document.contains（barElem））{
console.log（'已删除'）
}

---

以下是我如何编写代码的示例：

let doc，htm，bod，nav，M，I，mobile，S，Q；//在这些负载上使用
addEventListener（'load'，（）=>{
doc=document；htm=doc.documentElement；bod=doc.body；nav=navigator；M=tag=>doc.createElement（tag）；I=id=>doc.getElementById（id）；
mobile=nav.userAgent.match（/Mobi/i）？真：假
S=（选择器，在范围内）=>{
var w=在| | doc内；
返回w.querySelector（选择器）；
}
Q=（选择器，内部）=>{
var w=在| | doc内；
返回w.querySelectorAll（选择器）；
}
//下面有魔法吗
常量输入=Q（'.main>input'）；
输入[1]。删除（）；
如果（！bod.包含（输入[1]））{
console.log（'removed'）；
}
}); // 端部载荷

/*css/external.css*/
*{
框大小：边框框；颜色：#000；填充：0；边距：0；溢出：隐藏；
}
html，body，.main{
宽度：100%；高度：100%；
}
梅因先生{
背景：#333；溢出-y：自动；填充：10px；
}
输入{
左边距：7px；
}
输入：第一个孩子{
保证金：0；
}

标题在这里

以下是我如何编写代码的示例：

let doc，htm，bod，nav，M，I，mobile，S，Q；//在这些负载上使用
addEventListener（'load'，（）=>{
doc=document；htm=doc.documentElement；bod=doc.body；nav=navigator；M=tag=>doc.createElement（tag）；I=id=>doc.getElementById（id）；
mobile=nav.userAgent.match（/Mobi/i）？真：假
S=（选择器，在范围内）=>{
var w=在| | doc内；
返回w.querySelector（选择器）；
}
Q=（选择器，内部）=>{
var w=在| | doc内；
返回w.querySelectorAll（选择器）；
}
//下面有魔法吗
常量输入=Q（'.main>input'）；
输入[1]。删除（）；
如果（！bod.包含（输入[1]））{
console.log（'removed'）；
}
}); // 端部载荷

/*css/external.css*/
*{
框大小：边框框；颜色：#000；填充：0；边距：0；溢出：隐藏；
}
html，body，.main{
宽度：100%；高度：100%；
}
梅因先生{
背景：#333；溢出-y：自动；填充：10px；
}
输入{
左边距：7px；
}
输入：第一个孩子{
保证金：0；
}

标题在这里

您可以尝试

elementVariable.parentNode

。如果元素在DOM中不存在，则它将没有父节点，除非它仍然是文档片段的一部分。如果您坚持使用数组，我将使用

querySelectorAll

，这样您就不会有实时集合。您可以尝试

elementVariable.parentNode

。如果元素在DOM中不存在，它将没有父节点，除非它仍然是文档片段的一部分。如果您坚持使用数组，我将使用

querySelectorAll

，这样您就不会有活动的集合。哪一个更好？包含（）或element.parentNode？或者这无关紧要？@janeperritson:从DOM中删除的元素如果通过其祖先被删除，可能仍然具有

.parentNode

。

.contains（）

方法就是为了这个目的，所以我会使用它。哪一个更好？包含（）或element.parentNode？或者这无关紧要？@janeperritson:从DOM中删除的元素如果通过其祖先被删除，可能仍然具有

.parentNode

。

.contains（）

方法就是为了这个目的，所以我会使用它。这是一个很好的微库方法。当然比使用臃肿的旧式依赖要好。这是一个很好的微库方法。当然比使用臃肿的老派依赖性要好。