How do you check if a JavaScript Object is a DOM Object?

The accepted answer checks instanceof HTMLElement, which does not cover all types of DOM elements. For example, SVG elements are not supported. In contrast, this answer works for HTML as well as SVG, etc.

function isElement(value) {
    return value instanceof Element;
}

Cherry on top: the above code is IE8 compatible.

Demo:

function isElement(value) {
  return value instanceof Element;  
}

const selectors = ['div', 'a', 'svg', 'g', 'text'];

const nonElements = [1, true, 'text', {}, [], 0, undefined, false, null];

for (const selector of selectors) {
  assert(isElement(document.querySelector(selector)));
}

for (const value of nonElements) {
  assert(!isElement(value));
}

console.log('All tests passed!');

function assert(condition) {
  if (!condition) throw new Error();
}

<div></div>
<a></a>
<svg><g /><text>foo</text></svg>

However, note that this will not work for elements from same-domain iframes, which will not pass instanceof checks.

No need for hacks, you can just ask if an element is an instance of the DOM Element:

const isDOM = el => el instanceof Element

All solutions above and below (my solution including) suffer from possibility of being incorrect, especially on IE — it is quite possible to (re)define some objects/methods/properties to mimic a DOM node rendering the test invalid.

So usually I use the duck-typing-style testing: I test specifically for things I use. For example, if I want to clone a node I test it like this:

if(typeof node == "object" && "nodeType" in node &&
   node.nodeType === 1 && node.cloneNode){
  // most probably this is a DOM node, we can clone it safely
  clonedNode = node.cloneNode(false);
}

Basically it is a little sanity check + the direct test for a method (or a property) I am planning to use.

Incidentally the test above is a good test for DOM nodes on all browsers. But if you want to be on the safe side always check the presence of methods and properties and verify their types.

EDIT: IE uses ActiveX objects to represent nodes, so their properties do not behave as true JavaScript object, for example:

console.log(typeof node.cloneNode);              // object
console.log(node.cloneNode instanceof Function); // false

while it should return "function" and true respectively. The only way to test methods is to see if the are defined.

A simple way to test if a variable is a DOM element (verbose, but more traditional syntax :-)

function isDomEntity(entity) {
  if(typeof entity  === 'object' && entity.nodeType !== undefined){
     return true;
  }
  else{
     return false;
  }
}

Or as HTMLGuy suggested (short and clean syntax):

const isDomEntity = entity =>
  typeof entity === 'object' && entity.nodeType !== undefined

You could try appending it to a real DOM node...

function isDom(obj)
{
    var elm = document.createElement('div');
    try
    {
        elm.appendChild(obj);
    }
    catch (e)
    {
        return false;
    }

    return true;
}

How about Lo-Dash's _.isElement?

$ npm install lodash.iselement

And in the code:

var isElement = require("lodash.iselement");
isElement(document.body);

This is from the lovely JavaScript library MooTools:

if (obj.nodeName){
    switch (obj.nodeType){
    case 1: return 'element';
    case 3: return (/\S/).test(obj.nodeValue) ? 'textnode' : 'whitespace';
    }
}

The using the root detection found here, we can determine whether e.g. alert is a member of the object's root, which is then likely to be a window:

function isInAnyDOM(o) { 
  return (o !== null) && !!(o.ownerDocument && (o.ownerDocument.defaultView || o.ownerDocument.parentWindow).alert); // true|false
}

To determine whether the object is the current window is even simpler:

function isInCurrentDOM(o) { 
  return (o !== null) && !!o.ownerDocument && (window === (o.ownerDocument.defaultView || o.ownerDocument.parentWindow)); // true|false
}

This seems to be less expensive than the try/catch solution in the opening thread.

Don P

old thread, but here's an updated possibility for ie8 and ff3.5 users:

function isHTMLElement(o) {
    return (o.constructor.toString().search(/\object HTML.+Element/) > -1);
}

var IsPlainObject = function ( obj ) { return obj instanceof Object && ! ( obj instanceof Function || obj.toString( ) !== '[object Object]' || obj.constructor.name !== 'Object' ); },
    IsDOMObject = function ( obj ) { return obj instanceof EventTarget; },
    IsDOMElement = function ( obj ) { return obj instanceof Node; },
    IsListObject = function ( obj ) { return obj instanceof Array || obj instanceof NodeList; },

// In fact I am more likely t use these inline, but sometimes it is good to have these shortcuts for setup code

This could be helpful: isDOM

//-----------------------------------
// Determines if the @obj parameter is a DOM element
function isDOM (obj) {
    // DOM, Level2
    if ("HTMLElement" in window) {
        return (obj && obj instanceof HTMLElement);
    }
    // Older browsers
    return !!(obj && typeof obj === "object" && obj.nodeType === 1 && obj.nodeName);
}

In the code above, we use the double negation operator to get the boolean value of the object passed as argument, this way we ensure that each expression evaluated in the conditional statement be boolean, taking advantage of the Short-Circuit Evaluation, thus the function returns true or false

I think that what you have to do is make a thorough check of some properties that will always be in a dom element, but their combination won't most likely be in another object, like so:

var isDom = function (inp) {
    return inp && inp.tagName && inp.nodeName && inp.ownerDocument && inp.removeAttribute;
};

I think prototyping is not a very good solution but maybe this is the fastest one: Define this code block;

Element.prototype.isDomElement = true;
HTMLElement.prototype.isDomElement = true;

than check your objects isDomElement property:

if(a.isDomElement){}

I hope this helps.

According to mdn

Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements.

We can implement isElement by prototype. Here is my advice:

/**
 * @description detect if obj is an element
 * @param {*} obj
 * @returns {Boolean}
 * @example
 * see below
 */
function isElement(obj) {
  if (typeof obj !== 'object') {
    return false
  }
  let prototypeStr, prototype
  do {
    prototype = Object.getPrototypeOf(obj)
    // to work in iframe
    prototypeStr = Object.prototype.toString.call(prototype)
    // '[object Document]' is used to detect document
    if (
      prototypeStr === '[object Element]' ||
      prototypeStr === '[object Document]'
    ) {
      return true
    }
    obj = prototype
    // null is the terminal of object
  } while (prototype !== null)
  return false
}
console.log(isElement(document)) // true
console.log(isElement(document.documentElement)) // true
console.log(isElement(document.body)) // true
console.log(isElement(document.getElementsByTagName('svg')[0])) // true or false, decided by whether there is svg element
console.log(isElement(document.getElementsByTagName('svg'))) // false
console.log(isElement(document.createDocumentFragment())) // false

In Firefox, you can use the instanceof Node. That Node is defined in DOM1.

But that is not that easy in IE.

1. "instanceof ActiveXObject" only can tell that it is a native object.
2. "typeof document.body.appendChild=='object'" tell that it may be DOM object, but also can be something else have same function.

You can only ensure it is DOM element by using DOM function and catch if any exception. However, it may have side effect (e.g. change object internal state/performance/memory leak)

Perhaps this is an alternative? Tested in Opera 11, FireFox 6, Internet Explorer 8, Safari 5 and Google Chrome 16.

function isDOMNode(v) {
  if ( v===null ) return false;
  if ( typeof v!=='object' ) return false;
  if ( !('nodeName' in v) ) return false; 

  var nn = v.nodeName;
  try {
    // DOM node property nodeName is readonly.
    // Most browsers throws an error...
    v.nodeName = 'is readonly?';
  } catch (e) {
    // ... indicating v is a DOM node ...
    return true;
  }
  // ...but others silently ignore the attempt to set the nodeName.
  if ( v.nodeName===nn ) return true;
  // Property nodeName set (and reset) - v is not a DOM node.
  v.nodeName = nn;

  return false;
}

Function won't be fooled by e.g. this

isDOMNode( {'nodeName':'fake'} ); // returns false

You can see if the object or node in question returns a string type.

typeof (array).innerHTML === "string" => false
typeof (object).innerHTML === "string" => false
typeof (number).innerHTML === "string" => false
typeof (text).innerHTML === "string" => false

//any DOM element will test as true
typeof (HTML object).innerHTML === "string" => true
typeof (document.createElement('anything')).innerHTML === "string" => true

This is what I figured out:

var isHTMLElement = (function () {
    if ("HTMLElement" in window) {
        // Voilà. Quick and easy. And reliable.
        return function (el) {return el instanceof HTMLElement;};
    } else if ((document.createElement("a")).constructor) {
        // We can access an element's constructor. So, this is not IE7
        var ElementConstructors = {}, nodeName;
        return function (el) {
            return el && typeof el.nodeName === "string" &&
                 (el instanceof ((nodeName = el.nodeName.toLowerCase()) in ElementConstructors 
                    ? ElementConstructors[nodeName] 
                    : (ElementConstructors[nodeName] = (document.createElement(nodeName)).constructor)))
        }
    } else {
        // Not that reliable, but we don't seem to have another choice. Probably IE7
        return function (el) {
            return typeof el === "object" && el.nodeType === 1 && typeof el.nodeName === "string";
        }
    }
})();

To improve performance I created a self-invoking function that tests the browser's capabilities only once and assigns the appropriate function accordingly.

The first test should work in most modern browsers and was already discussed here. It just tests if the element is an instance of HTMLElement. Very straightforward.

The second one is the most interesting one. This is its core-functionality:

return el instanceof (document.createElement(el.nodeName)).constructor

It tests whether el is an instance of the construcor it pretends to be. To do that, we need access to an element's contructor. That's why we're testing this in the if-Statement. IE7 for example fails this, because (document.createElement("a")).constructor is undefined in IE7.

The problem with this approach is that document.createElement is really not the fastest function and could easily slow down your application if you're testing a lot of elements with it. To solve this, I decided to cache the constructors. The object ElementConstructors has nodeNames as keys with its corresponding constructors as values. If a constructor is already cached, it uses it from the cache, otherwise it creates the Element, caches its constructor for future access and then tests against it.

The third test is the unpleasant fallback. It tests whether el is an object, has a nodeType property set to 1 and a string as nodeName. This is not very reliable of course, yet the vast majority of users shouldn't even fall back so far.

This is the most reliable approach I came up with while still keeping performance as high as possible.

Test if obj inherits from Node.

if (obj instanceof Node){
    // obj is a DOM Object
}

Node is a basic Interface from which HTMLElement and Text inherit.

For the ones using Angular:

angular.isElement

https://docs.angularjs.org/api/ng/function/angular.isElement

This will work for almost any browser. (No distinction between elements and nodes here)

function dom_element_check(element){
    if (typeof element.nodeType !== 'undefined'){
        return true;
    }
    return false;
}

differentiate a raw js object from a HTMLElement

function isDOM (x){
     return /HTML/.test( {}.toString.call(x) );
 }

use:

isDOM( {a:1} ) // false
isDOM( document.body ) // true

// OR

Object.defineProperty(Object.prototype, "is",
    {
        value: function (x) {
            return {}.toString.call(this).indexOf(x) >= 0;
        }
    });

use:

o={}; o.is("HTML") // false o=document.body; o.is("HTML") // true

Here's a simple solution to this task that checks the most basic important criterias of a DOM HTML element:

const isHTMLEl = o => typeof o === 'object' && !!o.tagName && o instanceof HTMLElement && !!o.nodeType;

const obj = document.createElement('iframe');
console.log( isHTMLEl(obj) ); // returns true
console.log( isHTMLEl([]) ); // return false
console.log( isHTMLEl('<div />') ); // returns false

Most answers use some kind of duck typing, checking for example that the object has a nodeType property. But that's not enough, because non-nodes can also have node-like properties.

The other common approach is instanceof, which can produce false positives e.g. with Object.create(Node), which is not a node despite inheriting node properties. In addition, elements from same-origin iframes will not pass instanceof checks, giving false negatives.

Moreover, both approaches above call internal essential methods, which can be problematic e.g. if the tested value is a proxy.

Instead, what I recommend is borrowing a node attribute getter and calling it on our object. The browser will check that the value is a node by looking at internal slots not customizable in proxies, so even they won't be able to interfere with our check.

/**
 * @param proto The prototype of the Web IDL interface to check.
 * @param prop The name of the Web IDL attribute to check.
 * This must have a getter that throws when called on invalid targets.
 * @returns A type guard for the given Web IDL interface.
 */
function createWebIdlBrandGuard(proto, prop) {
    const getter = Object.getOwnPropertyDescriptor(proto, prop).get;
    return (x) => {
        try {
            getter.call(x);
            return true;
        } catch {
            return false;
        }
    }
}

const isNode = createWebIdlBrandGuard(Node.prototype, 'nodeName');
const isText = createWebIdlBrandGuard(Text.prototype, 'wholeText');
const isElement = createWebIdlBrandGuard(Element.prototype, 'tagName');
const isHTMLElement = createWebIdlBrandGuard(HTMLElement.prototype, 'title');
const isDocument = createWebIdlBrandGuard(Document.prototype, 'contentType');

// tests

test('top', window.document);
// // Uncomment to test iframe.
// // Note that this will fail in the stack snippet due to sandboxing rules,
// // but it will pass if you run the code elsewhere without sandboxing.
// test('iframe', document.body.appendChild(document.createElement('iframe')).contentDocument);

function test(description, document) {
    console.group(description);
    try {
        document.body.innerHTML = ('<div>foo</div><svg></svg>');

        const div = document.querySelector('div');
        const svg = document.querySelector('svg');
        const text = div.firstChild;

        step(() => isNode(document));
        step(() => !isText(document));
        step(() => !isElement(document));
        step(() => !isHTMLElement(document));
        step(() => isDocument(document));

        step(() => isNode(div));
        step(() => !isText(div));
        step(() => isElement(div));
        step(() => isHTMLElement(div));
        step(() => !isDocument(div));

        step(() => isNode(svg));
        step(() => !isText(svg));
        step(() => isElement(svg));
        step(() => !isHTMLElement(svg));
        step(() => !isDocument(svg));

        step(() => isNode(text));
        step(() => isText(text));
        step(() => !isElement(text));
        step(() => !isHTMLElement(text));
        step(() => !isDocument(text));
    } finally {
        console.groupEnd(description);
    }
}

function step(fn) {
    const message = fn.toString().replace(/^\(\)\s*=>\s*/, '');
    if (!fn()) throw new Error(`💥 ${message} failed`);
    console.info(`✅ ${message}`);
}

here's a trick using jQuery

var obj = {};
var element = document.getElementById('myId'); // or simply $("#myId")

$(obj).html() == undefined // true
$(element).html() == undefined // false

so putting it in a function:

function isElement(obj){

   return (typeOf obj === 'object' && !($(obj).html() == undefined));

}

Not to hammer on this or anything but for ES5-compliant browsers why not just:

function isDOM(e) {
  return (/HTML(?:.*)Element/).test(Object.prototype.toString.call(e).slice(8, -1));
}

Won't work on TextNodes and not sure about Shadow DOM or DocumentFragments etc. but will work on almost all HTML tag elements.

A absolute right method, check target is a real html element primary code:

    (function (scope) {
        if (!scope.window) {//May not run in window scope
            return;
        }
        var HTMLElement = window.HTMLElement || window.Element|| function() {};

        var tempDiv = document.createElement("div");
        var isChildOf = function(target, parent) {

            if (!target) {
                return false;
            }
            if (parent == null) {
                parent = document.body;
            }
            if (target === parent) {
                return true;
            }
            var newParent = target.parentNode || target.parentElement;
            if (!newParent) {
                return false;
            }
            return isChildOf(newParent, parent);
        }
        /**
         * The dom helper
         */
        var Dom = {
            /**
             * Detect if target element is child element of parent
             * @param {} target The target html node
             * @param {} parent The the parent to check
             * @returns {} 
             */
            IsChildOf: function (target, parent) {
                return isChildOf(target, parent);
            },
            /**
             * Detect target is html element
             * @param {} target The target to check
             * @returns {} True if target is html node
             */
            IsHtmlElement: function (target) {
                if (!X.Dom.IsHtmlNode(target)) {
                    return false;
                }
                return target.nodeType === 1;
            },
            /**
             * Detect target is html node
             * @param {} target The target to check
             * @returns {} True if target is html node
             */
            IsHtmlNode:function(target) {
                if (target instanceof HTMLElement) {
                    return true;
                }
                if (target != null) {
                    if (isChildOf(target, document.documentElement)) {
                        return true;
                    }
                    try {
                        tempDiv.appendChild(target.cloneNode(false));
                        if (tempDiv.childNodes.length > 0) {
                            tempDiv.innerHTML = "";
                            return true;
                        }
                    } catch (e) {

                    }
                }
                return false;
            }
        };
        X.Dom = Dom;
    })(this);

Each DOMElement.constructor returns function HTML...Element() or [Object HTML...Element] so...

function isDOM(getElem){
    if(getElem===null||typeof getElem==="undefined") return false;
    var c = getElem.constructor.toString();
    var html = c.search("HTML")!==-1;
    var element = c.search("Element")!==-1;
    return html&&element;
}

I have a special way to do this that has not yet been mentioned in the answers.

My solution is based on four tests. If the object passes all four, then it is an element:

1. The object is not null.

2. The object has a method called "appendChild".

3. The method "appendChild" was inherited from the Node class, and isn't just an imposter method (a user-created property with an identical name).

4. The object is of Node Type 1 (Element). Objects that inherit methods from the Node class are always Nodes, but not necessarily Elements.

Q: How do I check if a given property is inherited and isn't just an imposter?

A: A simple test to see if a method was truly inherited from Node is to first verify that the property has a type of "object" or "function". Next, convert the property to a string and check if the result contains the text "[Native Code]". If the result looks something like this:

function appendChild(){
[Native Code]
}

Then the method has been inherited from the Node object. See https://davidwalsh.name/detect-native-function

And finally, bringing all the tests together, the solution is:

function ObjectIsElement(obj) {
    var IsElem = true;
    if (obj == null) {
        IsElem = false;
    } else if (typeof(obj.appendChild) != "object" && typeof(obj.appendChild) != "function") {
        //IE8 and below returns "object" when getting the type of a function, IE9+ returns "function"
        IsElem = false;
    } else if ((obj.appendChild + '').replace(/[\r\n\t\b\f\v\xC2\xA0\x00-\x1F\x7F-\x9F ]/ig, '').search(/\{\[NativeCode]}$/i) == -1) {
        IsElem = false;
    } else if (obj.nodeType != 1) {
        IsElem = false;
    }
    return IsElem;
}