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 it one.

Does anyone know of a very reliable way to detect this.

function functionName(elm){
   //Detect if elm is not a jquery object in condition
   if (elm) elm = $(elm);

}

A logical approach is to detect one of the properties of the DOM element object. The question is, which property would be the most reliable to detect?

I could also just make it a jquery object either way since jQuery doesn't have a problem with something like: $($imajQueryObjAlready); However, the purpose of this question is not to just solve the problem, but to find a good way to detect if its a DOM object vs. a jQuery object.

user113716 · Accepted Answer · 2010-11-10 00:08:16Z

60

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
}

answered Nov 10, 2010 at 0:08

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lonesomeday Over a year ago

+1 Two excellent solutions -- I prefer the latter for legibility.

user113716 Over a year ago

@lonesomeday - The only disclaimer I'd give (or should have given) is that it isn't part of the public API, currently anyway, so jQuery could decide to remove that property someday. Doubtful though.

lonesomeday Over a year ago

True. Of course, conversely, jQuery could decide to add a nodeType property!

cskwg Over a year ago

function isJQuery( o ) { return null !== o && CS.object === typeof o && o.jquery; } function isDOM( o ) { return null !== o && CS.object === typeof o && o.nodeType; }

karim79 · Accepted Answer · 2010-11-10 00:25:13Z

13

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

if(elm instanceof jQuery) {
    ...
}

or:

if(elm instanceof $) {
    ...
}

edited Nov 10, 2010 at 0:25

answered Nov 10, 2010 at 0:11

karim79

343k67 gold badges420 silver badges409 bronze badges

Comments

AndreKR · Accepted Answer · 2010-11-10 00:11:09Z

8

jQuery does it like this:

if ( selector.nodeType )

(jQuery 1.4.3, line 109)

answered Nov 10, 2010 at 0:11

AndreKR

33.9k21 gold badges120 silver badges181 bronze badges

Comments

Zack Bloom · Accepted Answer · 2010-11-10 00:30:16Z

7

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.

edited Nov 10, 2010 at 0:30

answered Nov 10, 2010 at 0:16

Zack Bloom

8,4372 gold badges23 silver badges27 bronze badges

18 Comments

user113716 Over a year ago

It isn't really unchanged. You're getting a new jQuery object. There could be side effects. Here's a demo: jsfiddle.net/nu7D6

James Kovacs Over a year ago

@Patrick - No, you'll get the original jQuery object back if it is already a jQuery object. $(selector) === $($(selector)) always returns true.

Zack Bloom Over a year ago

@Patrick Take a look at my edit, where are the side effects introduced?

user113716 Over a year ago

@James - Are you sure about that? See the example in my comment above. The example in your comment would definitely not be === since you're actually creating 3 completely unique objects.

Zack Bloom Over a year ago

@Patrick They are not the same object, but that doesn't mean that any side effect inducing operations are being done. Take a look at the jQuery source code (or the excerpt in my answer).

|

Han Seoul-Oh · Accepted Answer · 2010-11-10 02:08:42Z

6

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.

answered Nov 10, 2010 at 2:08

Han Seoul-Oh

1,2921 gold badge14 silver badges20 bronze badges

Comments

Bob Stein · Accepted Answer · 2017-01-30 01:23:58Z

0

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.)

edited Jan 30, 2017 at 1:23

answered Jan 30, 2017 at 1:08

Bob Stein

17.5k11 gold badges92 silver badges108 bronze badges

Collectives™ on Stack Overflow

Detect DOM object vs. jQuery Object

6 Answers 6

4 Comments

Comments

Comments

18 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

18 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related