[removed] querySelector Null vs querySelector

Question

What is the main difference between these two methods of referencing?

What are the benefits of using one or the other? Also what kind of usage-case would they each

Answer 1

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

Answer 2

you could also do:

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

Answer 3

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

Answer 4

You can try to avoid the conditional statement with:

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

Caution! querySelectorAll() behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results

Source: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll