JavaScript:querySelector Null 与 querySelector

Question

这两种引用方法的主要区别是什么？

使用其中一种有什么好处？另外，它们各自最适合哪种用例？

var selection = document.querySelector('.selector') !== null;

var selection = document.querySelector('.selector');

前者是否仅用于浏览器遗留支持？

Answer 1

第一个获取引用并检查元素是否存在，并将此状态作为 bool 值保存在变量中。如果该元素存在，则变量包含 true，否则为 false。

如果您只想知道该元素是否存在，但不需要对它的引用，则可以使用第一个。

例子:

var selection = document.querySelector('.selector') !== null;
if (selection) {
  alert('The element exists in the page.');
} else {
  alert('The element does not exists in the page.');
}

第二个获取引用并存储在变量中，但不检查元素是否存在。如果元素存在，则变量包含对该元素的引用，否则变量包含 null。

如果您需要对元素的引用，则可以使用第二个。如果该元素可能不存在于页面中，您应该在尝试对引用执行某些操作之前检查变量是否包含 null。

例子:

var selection = document.querySelector('.selector');
if (selection !== null) {
  alert('I have a reference to a ' + selection.tagName + ' element.');
} else {
  alert('The element does not exists in the page.');
}