元素已从DOM中删除，但是，在使用变量时，条件语句仍然可以看到该元素

如何解决元素已从DOM中删除，但是，在使用变量时，条件语句仍然可以看到该元素

为什么当使用完整的JavaScript选择器时，检查间隔是否存在的“ if语句”可以正常工作，但是当将其作为变量传递时，IF语句认为该元素仍然存在，尽管不存在？

两个例子来说明问题；首先是具有完整JS选择器的工作版本：

 
  var LoadMoreButton = document.querySelector('.loadMore');

  setInterval(function(){ LoadMoreButton.remove(); },10000);

  var timer = null;

  timer = window.setInterval(function(){
    console.log(LoadMoreButton);
    if (document.querySelector('.loadMore') !== null) {
      console.log("Element still exists,load more...");
      LoadMoreProducts();
    } else if(document.querySelector('.loadMore') === null) {
       console.log("Element does not exist.");
       StopLoadingProducts();
    }
  },1000);

  function LoadMoreProducts(){
    console.log("LoadMoreProducts Function ran");
  }

  function StopLoadingProducts(){
    console.log("No more products to load");
    clearInterval(timer);
    console.log("End.");
  }

<button class="loadMore">Load More</button>

和带有变量的无效版本。即使元素已经消失了，控制台也会输出该元素！

  var LoadMoreButton = document.querySelector('.loadMore');

  setInterval(function(){ LoadMoreButton.remove(); },10000);

  var timer = null;

  timer = window.setInterval(function(){
    console.log(LoadMoreButton);
    if (LoadMoreButton !== null) {
      console.log("Element still exists,load more...");
      LoadMoreProducts();
    } else if(LoadMoreButton === null) {
       console.log("Element does not exist.");
       StopLoadingProducts();
    }
  },1000);

  function LoadMoreProducts(){
    console.log("LoadMoreProducts Function ran");
  }

  function StopLoadingProducts(){
    console.log("No more products to load");
    clearInterval(timer);
    console.log("End.");
  }

<button class="loadMore">Load More</button>

为什么使用变量时我的if语句不起作用？

解决方法

之所以会这样，是因为document.querySelector返回了一个HtmlElement对象，该对象表示dom中的第一个匹配元素。该对象实际上不是dom元素本身。

在调用Element.remove()时，您将从节点所属的树中删除该节点，但是元素本身仍保留在分配给变量LoadMoreButton的内存中。如果您希望将变量LoadMoreButton从dom中删除后为空，则可以为其分配空值。

var LoadMoreButton = document.querySelector('.loadMore');

setInterval(function () {
  LoadMoreButton.remove();
  LoadMoreButton = null;
},10000);

var timer = null;

timer = window.setInterval(function () {
  if (LoadMoreButton !== null) {
    LoadMoreProducts();
  } else if (LoadMoreButton === null) {
    StopLoadingProducts();
  }
},1000);

function LoadMoreProducts() {}

function StopLoadingProducts() {
  clearInterval(timer);
}