检测元素是否仍然存在答案

【问题标题】：detect if element still exists检测元素是否仍然存在
【发布时间】：2020-10-15 21:37:58
【问题描述】：

有没有办法确定保存到变量中的元素是否仍然存在于文档中？我尝试了以下，当第二个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>

【问题讨论】：

你可以试试elementVariable.parentNode。如果元素在 DOM 中不存在，则它不会有父节点，除非它仍然是文档片段的一部分。
如果您坚持使用数组，我会使用 querySelectorAll，因此您不会有实时集合。

标签： javascript tags element

【解决方案1】：

您的代码失败，因为您删除了索引 1 处的元素，这会将索引 2 处的元素向下移动到该索引。

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

但是，即使使用缓存列表，它仍然是实时列表，因此仍会发生相同的重新索引。

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

var inputs = document.getElementsByTagName('INPUT');

var barElem = inputs[1];

barElem.remove();

if (!document.contains(barElem)) {
    console.log('deleted')
}

&lt;input value="foo"&gt;&lt;input value="bar"&gt;&lt;input value="baz"&gt;

另外，使用.outerHTML = '' 是一种非常老套的删除元素的方法，因此我将其更新为使用barElem.remove()。

【讨论】：

哪个更好？ contains() 还是 element.parentNode？还是没关系？
@janeperritson：从 DOM 中删除的元素如果是通过其祖先被删除而被删除的，则它可能仍具有.parentNode。 .contains() 方法就是为此目的，所以我会使用它。

【解决方案2】：

这是我如何编码的示例：

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 是一种最佳做法，因此会被缓存。

【讨论】：

这是一个不错的微库方式。使用臃肿的老式依赖项当然胜过。