How to check if object is a DOM element?

Question

I have a function:

function Check(o)
{
    alert(/* o is a DOM element ? "true" : "false" */);
}

How can I check if the parameter o is a DOM object or not?

@patrick Any. To check for a specific one I could just check the tagName right? — BrunoLM, Jan 21 '11 at 00:06
No, the `tagName` will give the type of a "type 1" element. There are several other types of nodes. — user113716, Jan 21 '11 at 00:07
You can try/catch a DOM reserved function: ``function Check(n) { try { n.cloneNode() } catch(e) { return false; } return true }`` — David Hellsing, Nov 07 '16 at 15:56

score 85 · Accepted Answer · edited Jul 16 '18 at 14:49

85

A DOM element implements the Element interface. So you can use:

function Check(o) {
    alert(o instanceof Element);
}

edited Jul 16 '18 at 14:49

Edwin Pratt

745
9
19

answered Jun 25 '14 at 18:36

David Hellsing

102,045
43
170
208

It's too bad it can't replace 'typeof' but it's because they're comparing different things (primitives vs object/constructor) in different ways. 'typeof' returns a unary operator vs 'instanceof' returns a binary (boolean) operator. – HaulinOats Nov 15 '18 at 19:17
3

I did put upvote this answer in the past but something to note is this won't pass if validated by an Element class from a different context. https://stackoverflow.com/questions/52222237/instanceof-fails-in-iframe So if this check don't work for you can try softer method like @Martin Jespersen – Mark Odey Feb 20 '19 at 21:20

Martin Jespersen · Answer 2 · 2011-01-21T00:09:06.860

28

Check if the nodeName property exists.

Basically check if it is a Node: look at the DOM lvl 1 specs, check the Node definition.

If you meant it literally when you said Element check for tagName property, look at the Element definition in the same spec

So to recap, do either

function Check(o)
{
    alert(o.tagName ? "true" : "false");
}

to check if it is a DOM Element or

function Check(o)
{
    alert(o.nodeName ? "true" : "false" );
}

to check if it is a DOM Node

edited Jan 21 '11 at 00:09

answered Jan 21 '11 at 00:03

Martin Jespersen

24,934
6
54
66

or `nodeType`, or whatever else is a property of the root `DOMElement` object. – Jacob Relkin Jan 21 '11 at 00:06
5

This doesn't sound bullet-proof. What if there is an object with that property name? Is that the only way? I though there could be something else... – BrunoLM Jan 21 '11 at 00:07
1

Well you can make it more secure by checking against all (or at least two or three) of the properties and methods those objects need to have to live up to the spec, but it seems like overkill... – Martin Jespersen Jan 21 '11 at 00:12
@Martin I see... Thanks for you answer, very complete :) – BrunoLM Jan 21 '11 at 00:15
4

@Martin No need for those quotes. Just use `true : false` – Šime Vidas Jan 22 '11 at 13:12
I know, but if you look at his specified code, quotes are there, I merely made his own code work. – Martin Jespersen Jan 22 '11 at 13:36
8

`o instanceof Element` would be "safer" IMO – David Hellsing Jun 25 '14 at 19:46
Let's see what happens when this object passes the test {nodeName:"HACKINGERROR",tagName:"RORREGNIKCAH"} – Waqas Tahir Jul 23 '15 at 17:18
@David It's also simpler, shorter, and easier to minify (no string literals). I think "duck typing" is fine at times, but only when significantly more elegant/compatible than the alternative. In this case, it isn't. – Beejor Nov 05 '16 at 19:36
Wouldn't `return o&&o.tagName` be better? This is bad code. – Mar 30 '18 at 15:17
@WillHoskings I agree, but if you look at the OPs question i merely made his own code work – Martin Jespersen Apr 01 '18 at 20:23
You could offer a better altern, but ok. Rather not get caught up in this as I hate this site. – Apr 02 '18 at 12:46

score 9 · Answer 3 · answered Jan 21 '11 at 00:13

9

Instead of just checking for the existence of a property, I'd check its specific value.

This assumes you're looking for a "type 1" element.

nodeType at MDC^(docs)

function Check(o) {
    alert( o && o.nodeType && o.nodeType === 1 );
}

You could still get an object that has the nodeType property that isn't actually a DOM node, but it would also have to have a matching value of 1 to give a false positive.

answered Jan 21 '11 at 00:13

user113716

310,407
61
442
435

4

A shorter version would be: obj && obj.nodeType === 1 – Meglio Apr 10 '15 at 06:39

K-Gun · Answer 4 · 2017-10-14T20:53:26.117

4

Late answer, but a document fragment could be a node as well:

function isNode(node) {
    return node && (node.nodeType === 1 || node.nodeType == 11);
}

Credits: https://github.com/k-gun/so/blob/4.8.1/so.dom.js#L50

edited Oct 14 '17 at 20:53

answered Sep 03 '14 at 23:03

K-Gun

10,689
2
52
56

score 0 · Answer 5 · answered Oct 25 '15 at 03:46

0

You can check if a DOM node is element with JQuery:

element.is("*")

answered Oct 25 '15 at 03:46

zhy2002

410
5
11

2

How is that jQuery? – Mar 30 '18 at 15:18

Ben Rowe · Answer 6 · 2013-05-10T10:51:58.743

0

You can use the following function

function isNode(o)
{
  return o && 'nodeType' in o;
}

edited May 10 '13 at 10:51

answered Jan 21 '11 at 00:06

Ben Rowe

27,548
6
52
73

1

I believe it should be `'nodeType' in o`, but nice clean idea! – Nate Barr Mar 18 '13 at 01:28
@BenRowe: Nate Barr is right, `'nodeType'` should be in quotes, if not, your code leads to _"ReferenceError: nodeType is not defined"_, so please edit your post! – Sk8erPeter May 09 '13 at 17:41
Thanks, I'll make the adjustment – Ben Rowe May 10 '13 at 10:51
This will not check that the object is an element, it checks if it's a node. See Constantes section here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType – Sangimed Mar 24 '18 at 02:40

How to check if object is a DOM element?

6 Answers6

Linked