JavaScript:querySelector Null vs querySelector

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());