Question

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

使用其中一种有什么好处？那么它们最适合哪种用例？

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

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

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

Answer 1

第一个获取引用并检查元素是否存在，并将此状态保存为变量中的布尔值。如果元素存在，则变量包含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.');
}

Answer 2

您也可以这样做：

[].filter.call([document.querySelector('.single-selected-class')], item => item)
    .forEach(item => item.blur());

Answer 3

第一个语句包含的bool值取决于document.querySelector('.selector')是否为空

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

第二个语句包含document.querySelector('.selector');

的实际值

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

Answer 4

您可以尝试通过以下方式避免使用条件语句：

var selection = document.querySelectorAll('.selector');
selection.forEach(function(item) {
    alert(item);
});

注意！ querySelectorAll()的行为与大多数常见的JavaScript DOM库不同，这可能会导致意外结果

来源：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

JavaScript：querySelector Null vs querySelector

4 个答案: