JavaScript: querySelector Null vs querySelector

you could also do:

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

The first statement contains a bool value depends on document.querySelector('.selector') is null or not

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

the second statement contains the actual value of document.querySelector('.selector');

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

The first one gets the reference and checks if the element exists, and saves this status as a boolean value in the variable. If the element exists, the variable contains true otherwise false.

You would use the first one if you only want to know if the element exists, but don't need the reference to it.

Example:

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.');
}

The second one gets the reference and stores in the variable, but doesn't check if the element exists. If the element exists, the variable contains the reference to the element, otherwise the variable contains null.

You would use the second one if you need the reference to the element. If it's possible that the element doesn't exist in the page, you should check if the variable contains null before you try to do something with the reference.

Example:

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.');
}