What's the best way to detect if a given Javascript object is a DOM Element?

Question

Say for instance I was writing a function that was designed to accept multiple argument types:

var overloaded = function (arg) {
    if (is_dom_element(arg)) {
        // Code for DOM Element argument...
    }
};

What's the best way to implement is_dom_element so that it works in a cross-browser, fairly accurate way?

score 20 · Accepted Answer · answered Sep 23 '08 at 10:44

20

jQuery checks the nodeType property. So you would have:

var overloaded = function (arg) {
    if (arg.nodeType) {
        // Code for DOM Element argument...
    }
};

Although this would detect all DOM objects, not just elements. If you want elements alone, that would be:

var overloaded = function (arg) {
    if (arg.nodeType && arg.nodeType == 1) {
        // Code for DOM Element argument...
    }
};

answered Sep 23 '08 at 10:44

Jim

Great, if it's good enough for jQuery it should be fine for my needs. Thanks! – Mathew Byrne Sep 23 '08 at 10:57

score 4 · Answer 2 · answered Sep 23 '08 at 10:43

4

Probably this one here:

node instanceof HTMLElement

That should work in most browsers. Otherwise you have to duck-type it (eg. typeof x.nodeType != 'undefined')

answered Sep 23 '08 at 10:43

Armin Ronacher

1

`HTMLElement` as a constructor function is not defined to be accessible by any standard, and it isn't, in IE before version 8. – bobince Feb 01 '10 at 15:59
1

@bobince: HTMLElement is defined in DOM level 2. That IE7 and earlier don't support it doesn't mean it's not standardized. The reason you shouldn't use `instanceof` is because it won't work if you're doing cross-frame development. – Lèse majesté Aug 09 '12 at 00:47
Actually, the fact that it doesn't work cross-frame might even be an advantage in some cases: typically, foreign nodes need special treatment (i.e. importing) so they can't use the same code-path as local nodes... – Eamon Nerbonne Sep 06 '12 at 16:27

score 0 · Answer 3 · answered Sep 23 '08 at 11:30

0

What about

obj instanceof HTMLElement

answered Sep 23 '08 at 11:30

Wolfram Kriesing

1

Not sure why this was ever downvoted with no explanation, but this also works and seems more reliable than a magic number. – Chris Baker Aug 29 '11 at 16:20
3

This answer is entirely redundant as Armin posted the same thing earlier, and as bobince's comment on that answer indicates, this is unreliable. My answer isn't unreliable, that "magic number" is [defined in the specification](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247). – Jim Oct 25 '11 at 21:16
1

This doesn't work in Chrome as HTMLElement is a function there – bjornl May 13 '13 at 16:21

3 Answers3