Detect DOM object vs. jQuery Object

Question

I have a function that I want to be able to allow passing in either a regular javascript DOM element object or a jQuery object. If its not yet a jQuery object I will then make i

Answer 1

To test for a DOM element, you can check its nodeType property:

if( elm.nodeType ) {
    // Was a DOM node
}

or you could check the jQuery property:

if( elm.jquery ) {
    // Was a jQuery object
}

Answer 2

elm instanceof jQuery is the most foolproof way, as testing elm.nodeType would mistake {nodeType:1} for a DOM element, and testing elm.jquery would mistake {jquery:$()} for a jQuery object, in addition to there being no guarantee future jQuery objects won't have a jquery property.

Answer 3

The classy way:

function is_jquery_object(x) {
    return window.jQuery && x instanceof jQuery;
}

function is_dom_object(x) {
    return window.HTMLElement && x instanceof HTMLElement;
}

Building on @karim79's answer, if you need to be sure it's either a DOM or jQuery object, use these tests. (The window test helps the function fail gracefully if the class is not defined, e.g. jQuery failed to load.)

Answer 4

The easiest way is to simply pass it into the jQuery function either way. If it's already a jQuery object, it will return it unchanged:

function(elem){
   elem = $(elem);
   ...
}

From the jQuery source code, this is what's happening:

if (selector.selector !== undefined) {
    this.selector = selector.selector;
    this.context = selector.context;
}

return jQuery.makeArray( selector, this );

Where makeArray is merging the new (default) jQuery object with the passed in one.

Answer 5

jQuery does it like this:

if ( selector.nodeType )

(jQuery 1.4.3, line 109)

Answer 6

To test for a jQuery object, you can use the instanceof operator:

if(elm instanceof jQuery) {
    ...
}

or:

if(elm instanceof $) {
    ...
}