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

Question

为什么当使用完整的 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 语句在使用变量时不起作用？

Answer 1

发生这种情况是因为 document.querySelector 返回一个 HtmlElement 对象，该对象表示 dom 中的第一个匹配元素。该对象实际上并不是 dom 元素本身。调用时，Element.remove()您从其所属的树中删除节点，但元素本身仍保留在分配给变量的内存中LoadMoreButton。如果您希望变量LoadMoreButton从 dom 中删除后为 null，则可以为其赋值 null。var LoadMoreButton = document.querySelector('.loadMore');setInterval(function () {&nbsp; LoadMoreButton.remove();&nbsp; LoadMoreButton = null;}, 10000);var timer = null;timer = window.setInterval(function () {&nbsp; if (LoadMoreButton !== null) {&nbsp; &nbsp; LoadMoreProducts();&nbsp; } else if (LoadMoreButton === null) {&nbsp; &nbsp; StopLoadingProducts();&nbsp; }}, 1000);function LoadMoreProducts() {}function StopLoadingProducts() {&nbsp; clearInterval(timer);}