JavaScript判断元素存在与实时DOM可见性的方法

问题背景与发现

周六下午在公司加班时，为了打发时间，我打开了公司的一个WordPress项目网站，检查之前制作的网页是否存在问题。

打开网站首页后，我像往常一样打开了Chrome调试工具，并滚动页面。此时发现问题：页面无法向下滚动，且控制台输出了大量undefined错误。

我立刻意识到，是我编写的JavaScript代码在首页错误执行导致了该问题。我的代码逻辑大致如下：

if ($('#a')) {
 // some code ...
 $('#b').doSomething;
 // some code ...
 }

这段代码的初衷是判断页面中是否存在某个特定ID标识的元素，如果存在则执行后续操作。由于网站首页本不应包含该元素，因此这段代码不应被执行。

如果你读到此处，应该能猜到我不是专业前端开发人员。我原本期望这段代码返回布尔类型的false，但它实际返回的是一个jQuery对象。

需要注意的是，这里获取的不是DOM元素本身。如果想获取真实的DOM元素，可以写成$('#a')[0]或者$('#a').get(0)。

实际上，$('selector')无论是否找到元素，永远返回一个jQuery对象。（关于此返回值的问题，可参考：What does jquery $ actually return? 和 How to get a DOM Element from a JQuery Selector）。

那么，如何判断id为a的元素是否存在呢？可以采用以下方法：if ($('#a').length)。如果不存在#a，返回的对象实际上是一个空对象，从而达到判断目的。

使用getElementById('a')也可以，它返回Element对象的一个引用（object类型）或者是null（document.getElementById()），可用于判断。

至此，我的问题得以解决，这篇文章本可以就此结束。

判断元素是否在实时DOM中

但我闲着无事又进行了一次Google搜索，随后在StackOverflow上发现了这样一个问答：How to check if element exists in the visible DOM? 问题是，如何检查元素是否存在于可见（当前实时）的DOM中。

该问答中提到了多种方法，除了上述两种，其他如getElementsByClassName、getElementsByName、querySelector等，思路基本相同，即简单检查元素是否存在。

针对提问者的需求，有人提供了两个较为有趣的方法，其中一个是：document.body.contains(element)。这里用到了node.contains(othernode)方法，它可以判断othernode是否为node的后代，并返回布尔值。

具体用法如下：

// 先获取要判断的元素节点
const aNode = document.getElementById('a');
// 然后判断该元素节点是不是当前文档页面body节点的后代
if (aNode.ownerDocument.body.contains(aNode)) {
 // do something
}

实际上，利用此方法可以编写一个通用函数，用于判断某个元素节点是否位于页面上。大家可以参考Mozilla Developer Network官网JavaScript手册中的代码：

 function isInPage(node) {
 return (node === document.body) ? false : document.body.contains(node);
 }

上述代码中，aNode.ownerDocument是一个只读属性，它返回aNode所在页面的顶级文档对象document。

另外，有人还提到了另一种方法：判断元素节点的baseURI是否存在。

baseURI是一个只读属性，node.baseURI返回node节点的绝对基准URL地址（可理解为页面的绝对URL地址），例如$('#a')[0].baseURI。

我在Chrome下进行了测试，当#a元素存在时，会返回一个URL字符串；不存在时则报undefined错误（因为#a不存在自然会报此错）。感觉这种方法在实际应用中操作不便，需要抛出和捕获错误，感兴趣的同学可以深入研究。

How to check if element exists in the visible DOM? 这个问答的发起者自己编写了一个方法，我将代码贴到下方：

<!DOCTYPE html>
<html>
<head>
 <script>
 var getRandomID = function (size) {
   var str = "",
    i = 0,
    chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";
   while (i < size) {
    str += chars.substr(Math.floor(Math.random() * 62), 1);
    i++;
   }
   return str;
  },
  isNull = function (element) {
   var randomID = getRandomID(12),
    savedID = (element.id)? element.id : null;
   element.id = randomID;
   var foundElm = document.getElementById(randomID);
   element.removeAttribute('id');
   if (savedID !== null) {
    element.id = savedID;
   }
   return (foundElm) ? false : true;
  };
 window.onload = function () {
  var image = document.getElementById("demo");
  console.log('undefined', (typeof image === 'undefined') ? true : false); // false
  console.log('null', (image === null) ? true : false); // false
  console.log('find-by-id', isNull(image)); // false
  image.parentNode.removeChild(image);
  console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?
  console.log('null', (image === null) ? true : false); // false ~ should be true?
  console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this?
 };
 </script>
</head>
<body>
 <div id="demo"></div>
</body>
</html>

注意代码中的isNull函数，它用于判断元素是否存在。该方法实际上是依据元素的id是否为null来判断，思路与使用baseURI判断相似。我进行了测试，当元素存在时返回true。

但当元素不存在时，它会报undefined错误，感兴趣的同学可以进一步研究。

总结

总结：

判断一个元素是否存在，使用getElementById()（或其他选择元素的方法）并配合是否为null来判断，或使用jQuery获取对象并判断其length，简单且直接。

但如果想判断一个元素是否在当前实时可见的DOM中，则应使用node.contains(othernode)方法。

参考：

1，How to check if element exists in the visible DOM?

2，What does jquery $ actually return?

2，Node.contains()

3，Node.ownerDocument

4，How to get a DOM Element from a JQuery Selector

5，https://api.jquery.com/get/

6，baseURI

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！