逃脱不存在的元素的常用方法是什么（就像jQuery一样）

Question

If I'm having

var btn = document.getElementsByClassName('top_button')[0];
btn.addEventListener('click', function() { /* some here */ }));

and the class undefined I'm getting a TypeError . I'm wondering what is the usual approach to escape this. Would it be

var btn = document.getElementsByClassName('top_button')[0] || {};

or should I do this different? How is jQuery doing this, because when I'm using $('.top_button') and the element is not there, it just returns an object.

Thanks

Answer 1

You can use a simple if :

var btn = document.getElementsByClassName('top_button');
if (btn.length > 0) {
  btn = btn[0];
  btn.addEventListener('click', function() { /* some here */ }));
}

Or you can also check for typeof to be "undefined" .

Answer 2

If you really want just the first one, then I agree with Praveen that an if is the clearest, simplest solution, though I usually do it in a different place:

var btn = document.getElementsByClassName('top_button')[0];
if (btn) {
  btn.addEventListener('click', function() { /* some here */ }));
}

The collection returned by getElementsByClassName reliably, cross-browser, gives you undefined if there's no element at the index you asked for (just like JavaScript arrays).

But I would use querySelector rather than getElementsByClassName , since you only want the first and there's no need to build a list, and querySelector is on all modern browsers, and also IE8 (whereas IE8 lacks getElementsByClassName ).

var btn = document.querySelector('.top_button');
if (btn) {
  btn.addEventListener('click', function() { /* some here */ }));
}

querySelector accepts any CSS selector (including complex ones) and returns the first matching element, or null . Its cousin querySelectorAll returns a list (which can be empty if none match).

If you want to hook the event on all matching elements, Quentin has you covered .

---

How is jQuery doing this, because when I'm using $('.top_button') and the element is not there, it just returns an object.

jQuery objects are wrappers around sets of DOM elements (usually, they can be wrappers around other things, but in typical use they're DOM elements). So when you do $('.top_button') , you get a jQuery object which is a wrapper around a set with nothing in it. You can make calls on that jQuery object, like .on , and they don't fail (because the jQuery object exists), but they don't do anything, either (because there are no elements in the set for it to do anything with).

I'm not suggesting it, but you could do the same thing yourself with querySelectorAll . (jQuery predates querySelectorAll by some years, originally John Resig built an entire selector engine for it. Modern browsers make that unnecessary in a jQuery-like thing, unless you want to add your own CSS selector stuff like jQuery's :has .)

Just by way of illustrating what jQuery is doing (purely conceptually):

function DomQuery(selector) {
    // Get the matching elements, as an array (the `slice` thing turns
    // the collection returned by `querySelectorAll` into an array)
    this.elements = Array.prototype.slice.call(document.querySelector(selector));
}
DomQuery.prototype.on = function(eventName, handler) {
    this.elements.forEach(function(element) {
        element.addEventListener(eventName, handler, false);
    });
    return this;
};

Usage:

new DomQuery(".top_button").on("click", function() {
    // do something
});

We can make that more jQuery-like by making new optional:

function domQuery(selector) {
    // If not called via `new`, do that
    if (!(this instanceof domQuery)) {
        return new domQuery(selector);
    }

    // Get the matching elements, as an array (the `slice` thing turns
    // the collection returned by `querySelectorAll` into an array)
    this.elements = Array.prototype.slice.call(document.querySelector(selector));
}
domQuery.prototype.on = function(eventName, handler) {
    this.elements.forEach(function(element) {
        element.addEventListener(eventName, handler, false);
    });
    return this;
};

Usage:

domQuery(".top_button").on("click", function() {
    // do something
});

Answer 3

As answered by @PraveenKumar, you can check for the length but you can also check if a variable is undefined by

if (typeof btn === "undefined") {
    //do stuff here.
}

Answer 4

jQuery stores all the results in an array. When you call on , it loops over that array and applies the event handler to each item in it. If there are zero items, a standard for loop will stop immediately.

var btn = document.getElementsByClassName('top_button');
for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener('click', function() { /* some here */ }));
}