JS/jQuery判断DOM节点是否存在的简单方法

当我们使用 JavaScript 或者 jQuery 操作 DOM 节点时，有时候需要判断一个元素是否存在于页面中。以下是几种简单的方法来判断 DOM 节点是否存在。

方法一：使用 jQuery 长度属性

我们可以使用 jQuery 长度属性 .length() 来判断元素是否存在。如果元素不存在，它的长度为 0，反之则大于 0。

// 判断元素存在
if ($('selector').length) {
  // 如果元素存在，则执行相应操作
}

// 判断元素不存在
if (!$('selector').length) {
  // 如果元素不存在，则执行相应操作
}

方法二：使用 document.querySelector() 方法

我们也可以使用原生 JavaScript 方法 document.querySelector() 来判断元素是否存在。如果元素不存在，该方法将返回 null，反之则返回该元素本身。

// 判断元素存在
if (document.querySelector('selector') !== null) {
  // 如果元素存在，则执行相应操作
}

// 判断元素不存在
if (document.querySelector('selector') === null) {
  // 如果元素不存在，则执行相应操作
}

示例一：判断页面是否加载完成

如果需要在页面加载完成后执行某些操作，可以使用 $(document).ready() 或者 JavaScript 的 window.onload 事件。但是有时候这些方法不能很好地工作，因为在某些情况下，页面元素可能没有完全加载到 DOM 中。以下示例演示如何使用 jQuery 来判断页面是否完全加载。

function pageLoadHandler() {
  // 如果元素不存在，则每隔 100 毫秒检查一次，直到存在为止
  if ($('#example').length === 0) {
    setTimeout(pageLoadHandler, 100);
  } else {
    // 如果元素存在，则执行相应操作
    console.log('页面已经完全加载！'); 
  }
}

$(document).ready(function() {
  pageLoadHandler();
});

在上面的代码中，我们定义了一个函数 pageLoadHandler()，该函数检查一个元素是否存在于页面中。如果元素不存在，函数会在 100 毫秒后再次检查，直到元素存在为止。一旦元素存在，函数会执行相应操作。在页面加载完成后，我们调用 pageLoadHandler() 函数来判断页面是否完全加载。

示例二：检查用户是否已经登录

有时候需要检查用户是否已经登录网站，并根据用户登录状态来执行相应操作。以下示例演示如何使用 jQuery 来检查用户是否已经登录。

function checkLoginStatus() {
  // 如果元素存在，则表明用户已经登录
  if ($('#user-info').length) {
    console.log('用户已经登录！');
  } else {
    console.log('用户没有登录！');
  }
}

$(document).ready(function() {
  checkLoginStatus();
});

在上面的代码中，我们定义了一个函数 checkLoginStatus()，该函数检查用户是否已经登录。如果用户已经登录，函数会执行相应操作，反之则执行不同的操作。在文档加载完成后，我们调用 checkLoginStatus() 函数来判断用户是否已经登录。

以上就是使用 jQuery 和 JavaScript 来判断 DOM 节点是否存在的简单方法，希望对你有所帮助！