Como você verifica se um objeto JavaScript é um objeto DOM?

Estou tentando obter:

document.createElement('div')  //=> true
{tagName: 'foobar something'}  //=> false

Nos meus próprios scripts, eu costumava usar isso, pois nunca precisava tagNamecomo uma propriedade:

if (!object.tagName) throw ...;

Portanto, para o segundo objeto, criei o seguinte como uma solução rápida - que geralmente funciona. ;)

O problema é que depende dos navegadores que aplicam as propriedades somente leitura, o que nem todos fazem.

function isDOM(obj) {
  var tag = obj.tagName;
  try {
    obj.tagName = '';  // Read-only for DOM, should throw exception
    obj.tagName = tag; // Restore for normal objects
    return false;
  } catch (e) {
    return true;
  }
}

Existe um bom substituto?

Isso pode ser do seu interesse:

function isElement(obj) {
  try {
    //Using W3 DOM2 (works for FF, Opera and Chrome)
    return obj instanceof HTMLElement;
  }
  catch(e){
    //Browsers not supporting W3 DOM2 don't have HTMLElement and
    //an exception is thrown and we end up here. Testing some
    //properties that all elements have (works on IE7)
    return (typeof obj==="object") &&
      (obj.nodeType===1) && (typeof obj.style === "object") &&
      (typeof obj.ownerDocument ==="object");
  }
}

Faz parte do DOM, Nível2 .

Atualização 2 : Foi assim que eu o implementei na minha própria biblioteca: (o código anterior não funcionou no Chrome, porque Node e HTMLElement são funções em vez do objeto esperado. Este código é testado no FF3, IE7, Chrome 1 e Opera 9)

//Returns true if it is a DOM node
function isNode(o){
  return (
    typeof Node === "object" ? o instanceof Node : 
    o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string"
  );
}

//Returns true if it is a DOM element    
function isElement(o){
  return (
    typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
    o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName==="string"
);
}

O código super-simples compatível com o IE8 a seguir funciona perfeitamente.

A resposta aceita não detecta todos os tipos de elementos HTML. Por exemplo, elementos SVG não são suportados. Por outro lado, esta resposta funciona tanto para HTML quanto para SVG.

Veja em ação aqui: https://jsfiddle.net/eLuhbu6r/

function isElement(element) {
    return element instanceof Element || element instanceof HTMLDocument;  
}

Todas as soluções acima e abaixo (incluindo minha solução) sofrem da possibilidade de estar incorretas, especialmente no IE - é bem possível (re) definir alguns objetos / métodos / propriedades para imitar um nó DOM, tornando o teste inválido.

Geralmente, eu uso o teste de digitação no estilo pato: teste especificamente para as coisas que uso. Por exemplo, se eu quiser clonar um nó, testo-o assim:

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);
}

Basicamente, é uma pequena verificação de sanidade + o teste direto de um método (ou propriedade) que estou planejando usar.

Aliás, o teste acima é um bom teste para nós DOM em todos os navegadores. Mas se você quer estar do lado seguro, verifique sempre a presença de métodos e propriedades e verifique seus tipos.

EDIT: O IE usa objetos ActiveX para representar nós, portanto, suas propriedades não se comportam como objetos JavaScript verdadeiros, por exemplo:

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

enquanto deve retornar "function" e truerespectivamente. A única maneira de testar métodos é ver se eles estão definidos.

Você pode tentar anexá-lo a um nó DOM real ...

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

    return true;
}

Não há necessidade de hacks, basta perguntar se um elemento é uma instância do elemento DOM :

const isDOM = el => el instanceof Element

E os Lo-Dash's_.isElement ?

$ npm install lodash.iselement

E no código:

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

Isso é da adorável biblioteca JavaScript MooTools :

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

Usando a detecção de raiz encontrada aqui , podemos determinar se, por exemplo, o alerta é um membro da raiz do objeto, que provavelmente será uma janela:

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

Para determinar se o objeto é a janela atual é ainda mais simples:

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

Isso parece ser mais barato que a solução try / catch no thread de abertura.

Don P

thread antigo, mas aqui está uma possibilidade atualizada para os usuários ie8 e ff3.5 :

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

Sugiro uma maneira simples de testar se uma variável é um elemento DOM

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

ou como HTMLGuy sugeriu:

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

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; },

// Na verdade, é mais provável que eu use esses inline, mas às vezes é bom ter esses atalhos para o código de instalação

Isso pode ser útil: 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);
}

No código acima, usamos o operador de negação dupla para obter o valor booleano do objeto passado como argumento, dessa forma garantimos que cada expressão avaliada na instrução condicional seja booleana, aproveitando a Avaliação de Curto-Circuito , portanto a função retornos trueoufalse

Você pode ver se o objeto ou nó em questão retorna um tipo de sequência.

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

Para aqueles que usam Angular:

angular.isElement

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

Acho que a prototipagem não é uma solução muito boa, mas talvez seja a mais rápida: defina esse bloco de código;

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

do que verificar sua propriedade isDomElement dos objetos:

if(a.isDomElement){}

Eu espero que isso ajude.

De acordo com mdn

Elementé a classe base mais geral da qual todos os objetos em uma Documentherança. Ele possui apenas métodos e propriedades comuns a todos os tipos de elementos.

Nós podemos implementar isElementpor protótipo. Aqui está o meu conselho:

/**
 * @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

Eu acho que o que você tem a fazer é fazer uma verificação completa de algumas propriedades que estarão sempre em um elemento DOM, mas sua combinação não irá provavelmente estar em outro objeto, assim:

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

No Firefox, você pode usar o instanceof Node. Isso Nodeé definido no DOM1 .

Mas isso não é tão fácil no IE.

1. "instanceof ActiveXObject" apenas pode dizer que é um objeto nativo.
2. "typeof document.body.appendChild == 'object'" "diz que pode ser um objeto DOM, mas também pode ser algo que tenha a mesma função.

Você só pode garantir que seja o elemento DOM usando a função DOM e capturar se houver alguma exceção. No entanto, pode ter efeito colateral (por exemplo, alterar estado interno do objeto / desempenho / vazamento de memória)

Talvez isso seja uma alternativa? Testado no Opera 11, FireFox 6, Internet Explorer 8, Safari 5 e 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;
}

A função não será enganada, por exemplo, por

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

Isto é o que eu descobri:

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";
        }
    }
})();

Para melhorar o desempenho, criei uma função auto-invocadora que testa os recursos do navegador apenas uma vez e atribui a função apropriada de acordo.

O primeiro teste deve funcionar nos navegadores mais modernos e já foi discutido aqui. Apenas testa se o elemento é uma instância de HTMLElement. Muito simples.

O segundo é o mais interessante. Esta é sua principal funcionalidade:

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

Ele testa se el é uma instância do construtor que finge ser. Para fazer isso, precisamos acessar o contratador de um elemento. É por isso que estamos testando isso na instrução if. O IE7, por exemplo, falha com isso, porque (document.createElement("a")).constructorestá undefinedno IE7.

O problema com essa abordagem é que ela document.createElementrealmente não é a função mais rápida e pode desacelerar facilmente seu aplicativo se você estiver testando vários elementos com ele. Para resolver isso, decidi armazenar em cache os construtores. O objeto ElementConstructorspossui nodeNames como chaves e seus construtores correspondentes como valores. Se um construtor já estiver armazenado em cache, ele o usará do cache; caso contrário, ele criará o Elemento, armazenará em cache seu construtor para acesso futuro e, em seguida, testará contra ele.

O terceiro teste é o fallback desagradável. Ele testa se el é um object, tem uma nodeTypepropriedade definida como 1e uma sequência como nodeName. Isso não é muito confiável, é claro, mas a grande maioria dos usuários nem deveria voltar tão longe.

Essa é a abordagem mais confiável que eu criei, mantendo o desempenho o mais alto possível.

Teste se objherda do nó .

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

O nó é uma interface básica da qual HTMLElement e Text herdam.

diferenciar um objeto js bruto de um HTMLElement

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

usar:

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

// OR

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

usar:

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

aqui está um truque usando jQuery

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

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

colocando-o em uma função:

function isElement(obj){

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

}

Para não se preocupar com isso ou qualquer outra coisa, mas para navegadores compatíveis com ES5, por que não apenas:

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

Não funcionará em TextNodes e não tem certeza sobre Sombra DOM ou DocumentFragments etc. mas irá funcionar em quase todos os elementos de tag HTML.

Isso funcionará para quase qualquer navegador. (Nenhuma distinção entre elementos e nós aqui)

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

Um método absolutamente certo, o destino da verificação é um código primário do elemento html real :

    (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);

Cada DOMElement.constructor retorna a função HTML ... Element () ou [Object HTML ... Element] então ...

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;
}

Eu tenho uma maneira especial de fazer isso que ainda não foi mencionada nas respostas.

Minha solução é baseada em quatro testes. Se o objeto passar pelos quatro, será um elemento:

1. O objeto não é nulo.

2. O objeto possui um método chamado "appendChild".

3. O método "appendChild" foi herdado da classe Node e não é apenas um método impostor (uma propriedade criada pelo usuário com um nome idêntico).

4. O objeto é do Nó Tipo 1 (Elemento). Os objetos que herdam métodos da classe Node são sempre nós, mas não necessariamente elementos.

P: Como verifico se uma determinada propriedade é herdada e não é apenas um impostor?

R: Um teste simples para verificar se um método foi realmente herdado do Node é primeiro verificar se a propriedade possui um tipo de "objeto" ou "função". Em seguida, converta a propriedade em uma sequência e verifique se o resultado contém o texto "[Código Nativo]". Se o resultado for algo parecido com isto:

function appendChild(){
[Native Code]
}

Em seguida, o método foi herdado do objeto Node. Consulte https://davidwalsh.name/detect-native-function

E, finalmente, reunindo todos os testes, a solução é:

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;
}

(element instanceof $ && element.get(0) instanceof Element) || element instanceof Element

Isso verificará se é um elemento DOM jQuery ou JavaScript

A única maneira de garantir que você está verificando um HTMLEement real, e não apenas um objeto com as mesmas propriedades que um Elemento HTML, é determinar se ele é herdado do Node, pois é impossível criar um novo Node () no JavaScript. (a menos que a função Nó nativa seja substituída, mas você não terá sorte). Assim:

function isHTML(obj) {
    return obj instanceof Node;
}

console.log(
  isHTML(test),
  isHTML(ok),
  isHTML(p),
  isHTML(o),
  isHTML({
    constructor: {
      name: "HTML"
    }
  }),
  isHTML({
    __proto__: {
      __proto__: {
        __proto__: {
          __proto__: {
            constructor: {
              constructor: { 
                name: "Function"
                
              },
              name: "Node"
            }
          }
        }
      }
    }
  }),
)

<div id=test></div>
<blockquote id="ok"></blockquote>
<p id=p></p>
<br id=o>
<!--think of anything else you want--!>