CODEWITHSUNDEEP
javascriptselection
user3143218
user3143218

Reputation: 1816

JavaScript: querySelector Null vs querySelector

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 be best suited to?

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

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

Is the former solely for browser legacy support?

Upvotes: 35

Views: 98377

Answers (5)

Maxim Rysevets
Maxim Rysevets

Reputation: 155

I was developing a similar solution for CMS EFFCORE and came up with the following:

if (!Node.prototype.hasOwnProperty('querySelector__withHandler')) {
    Object.defineProperty(Node.prototype, 'querySelector__withHandler', {
        configurable: true,
        enumerable  : true,
        writable    : true,
        value: function (query, handler) {
            var result = this.querySelector(query);
            if (result instanceof Node) {
                handler(result);
            }
        }
    });
}

document.querySelector__withHandler('a', function(link){
    alert(link)
})

Upvotes: 0

juj
juj

Reputation: 447

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

Upvotes: 2

Simon Wicki
Simon Wicki

Reputation: 4059

you could also do:

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

Upvotes: 5

Guffa
Guffa

Reputation: 700840

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

Upvotes: 85

zzlalani
zzlalani

Reputation: 24394

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

Upvotes: 3

Related Questions