有没有办法确定保存到变量中的元素是否仍然存在于文档中？我尝试了以下操作，当第二个INPUT标记被删除时，它不会发出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>
您的代码失败，因为您删除了索引1处的元素，这会将索引2处的元素下移到该索引。
一般来说，不要做所有的DOM选择。为变量选择一次，然后重用该集合。这绝对不是将集合转换为数组的方法。
然而，即使有一个缓存的列表，它仍然是一个活动列表，所以同样的重新索引仍然会发生。
因此，将该元素存储到其自己的变量中，然后对其进行测试
var inputs = document.getElementsByTagName('INPUT');
var barElem = inputs[1];
barElem.remove();
if (!document.contains(barElem)) {
console.log('deleted')
}<input value="foo"><input value="bar"><input value="baz">另外，使用.outerHTML = ''是一种很难去除元素的方法，所以我将其更新为使用barElem.remove()。
以下是我如何编码的示例：
let doc, htm, bod, nav, M, I, mobile, S, Q; // for use on there loads
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) ? true : false
S = (selector, within)=>{
var w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
var w = within || doc;
return w.querySelectorAll(selector);
}
// magic under here
const inputs = Q('.main>input');
inputs[1].remove();
if(!bod.contains(inputs[1])){
console.log('removed');
}
}); // end load/* css/external.css */
*{
box-sizing:border-box; color:#000; padding:0; margin:0; overflow:hidden;
}
html,body,.main{
width:100%; height:100%;
}
.main{
background:#333; overflow-y:auto; padding:10px;
}
input{
margin-left:7px;
}
input:first-child{
margin:0;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<input type='text' /><input type='email' /><input type='tel' />
</div>
</body>
</html>注意，我去掉了输入之间的空格，因为HTML中的一个或多个空格等于包含空格的元素的当前字体大小的一个空格。此外，使用外部CSS和JavaScript是一种最佳实践，因此它是缓存的。