Come si controlla se un oggetto JavaScript è un oggetto DOM?

Sto cercando di ottenere:

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

Nei miei script, lo usavo solo perché non avevo mai avuto bisogno tagNamedi una proprietà:

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

Quindi, per il secondo oggetto, ho trovato quanto segue come soluzione rapida, che per lo più funziona. ;)

Il problema è che dipende dai browser che applicano proprietà di sola lettura, cosa che non tutti fanno.

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

C'è un buon sostituto?

Questo potrebbe essere di 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");
  }
}

Fa parte del DOM, Level2 .

Aggiornamento 2 : è così che l'ho implementato nella mia libreria: (il codice precedente non funzionava in Chrome, perché Node e HTMLElement sono funzioni anziché l'oggetto previsto. Questo codice è testato in 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"
);
}

Il seguente codice semplicissimo compatibile con IE8 funziona perfettamente.

La risposta accettata non rileva tutti i tipi di elementi HTML. Ad esempio, gli elementi SVG non sono supportati. Al contrario, questa risposta funziona per HTML e SVG.

Guardalo in azione qui: https://jsfiddle.net/eLuhbu6r/

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

Tutte le soluzioni sopra e sotto (compresa la mia soluzione) soffrono della possibilità di essere errate, specialmente su IE - è del tutto possibile (ri) definire alcuni oggetti / metodi / proprietà per imitare un nodo DOM che rende il test non valido.

Quindi di solito uso i test in stile tipografia: eseguo dei test specifici per le cose che uso. Ad esempio, se voglio clonare un nodo, lo collaudo in questo modo:

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

Fondamentalmente è un piccolo controllo di integrità + il test diretto per un metodo (o una proprietà) che sto pianificando di utilizzare.

Per inciso, il test sopra è un buon test per i nodi DOM su tutti i browser. Ma se vuoi essere al sicuro controlla sempre la presenza di metodi e proprietà e verificane i tipi.

EDIT: IE utilizza gli oggetti ActiveX per rappresentare i nodi, quindi le loro proprietà non si comportano come veri oggetti JavaScript, ad esempio:

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

mentre dovrebbe restituire "funzione" e truerispettivamente. L'unico modo per testare i metodi è vedere se sono definiti.

Potresti provare ad aggiungerlo a un vero nodo DOM ...

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

    return true;
}

Non c'è bisogno di hack, puoi semplicemente chiedere se un elemento è un'istanza dell'elemento DOM :

const isDOM = el => el instanceof Element

Che ne dici di Lo-Dash_.isElement ?

$ npm install lodash.iselement

E nel codice:

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

Questo è dalla deliziosa libreria JavaScript MooTools :

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

Usando il rilevamento di root trovato qui , possiamo determinare se ad esempio alert è un membro della radice dell'oggetto, che è quindi probabile che sia una finestra:

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

Per determinare se l'oggetto è la finestra corrente è ancora più semplice:

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

Questo sembra essere meno costoso della soluzione try / catch nel thread di apertura.

Don P

vecchio thread, ma ecco una possibilità aggiornata per gli utenti ie8 e ff3.5 :

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

Suggerisco un modo semplice per verificare se una variabile è un elemento DOM

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

o come suggerito da HTMLGuy :

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

// In effetti, è più probabile che io usi questi in linea, ma a volte è bene avere queste scorciatoie per il codice di installazione

Questo potrebbe essere utile: 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);
}

Nel codice sopra, utilizziamo l' operatore doppia negazione per ottenere il valore booleano dell'oggetto passato come argomento, in questo modo assicuriamo che ogni espressione valutata nell'istruzione condizionale sia booleana, sfruttando la valutazione del cortocircuito , quindi la funzione ritorna trueofalse

Puoi vedere se l'oggetto o il nodo in questione restituisce un tipo di stringa.

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

Per quelli che usano Angular:

angular.isElement

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

Penso che la prototipazione non sia un'ottima soluzione, ma forse questa è la più veloce: definire questo blocco di codice;

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

di controllare la proprietà isDomElement degli oggetti:

if(a.isDomElement){}

Spero che aiuti.

Secondo mdn

Elementè la classe base più generale da cui tutti gli oggetti in Documentun'eredità. Ha solo metodi e proprietà comuni a tutti i tipi di elementi.

Siamo in grado di implementare isElementper prototipo. Ecco il mio consiglio:

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

Penso che ciò che devi fare sia verificare attentamente alcune proprietà che saranno sempre presenti in un elemento dom, ma la loro combinazione non sarà molto probabilmente in un altro oggetto, in questo modo:

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

In Firefox, puoi usare il instanceof Node. Questo Nodeè definito in DOM1 .

Ma non è così facile in IE.

1. "instanceof ActiveXObject" può solo dire che è un oggetto nativo.
2. "typeof document.body.appendChild == 'object'" indica che potrebbe essere un oggetto DOM, ma può anche avere qualcos'altro che ha la stessa funzione.

Puoi solo assicurarti che sia un elemento DOM usando la funzione DOM e catturare eventuali eccezioni. Tuttavia, potrebbe avere effetti collaterali (ad es. Modifica dello stato interno / prestazioni / perdita di memoria)

Forse questa è un'alternativa? Testato su 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;
}

Ad esempio, questa funzione non verrà ingannata

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

Questo è quello che ho capito:

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

Per migliorare le prestazioni ho creato una funzione auto-invocante che verifica le funzionalità del browser una sola volta e assegna la funzione appropriata di conseguenza.

Il primo test dovrebbe funzionare nella maggior parte dei browser moderni ed è già stato discusso qui. Verifica solo se l'elemento è un'istanza di HTMLElement. Molto semplice.

Il secondo è il più interessante. Questa è la sua funzionalità principale:

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

Verifica se el è un'istanza del costruttore che finge di essere. Per fare ciò, abbiamo bisogno dell'accesso al contruttore di un elemento. Ecco perché lo stiamo testando nell'istruzione if. IE7 ad esempio non riesce, perché (document.createElement("a")).constructorè undefinedin IE7.

Il problema con questo approccio è che in document.createElementrealtà non è la funzione più veloce e potrebbe facilmente rallentare l'applicazione se stai testando molti elementi con essa. Per risolvere questo, ho deciso di mettere in cache i costruttori. L'oggetto ElementConstructorsha nodeNames come chiavi con i suoi corrispondenti costruttori come valori. Se un costruttore è già memorizzato nella cache, lo utilizza dalla cache, altrimenti crea l'Elemento, memorizza nella cache il costruttore per un accesso futuro e quindi esegue il test su di esso.

Il terzo test è lo spiacevole fallback. Verifica se el è un object, ha una nodeTypeproprietà impostata su 1e una stringa come nodeName. Questo non è molto affidabile, ovviamente, ma la stragrande maggioranza degli utenti non dovrebbe nemmeno fare un passo indietro.

Questo è l'approccio più affidabile che mi è venuto in mente mantenendo le prestazioni il più alto possibile.

Verifica se objeredita dal nodo .

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

Il nodo è un semplice interfaccia da cui HTMLElement ed ereditare testo.

differenziare un oggetto js non elaborato da un HTMLElement

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

uso:

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

// O

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

uso:

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

ecco un trucco usando jQuery

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

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

quindi mettendolo in una funzione:

function isElement(obj){

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

}

Non per battere su questo o altro, ma per i browser conformi a ES5 perché non solo:

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

Non funziona su TextNodes e non sono sicuro di Ombra DOM o DocumentFragments ecc, ma sarà lavorare su quasi tutti gli elementi di tag HTML.

Funzionerà con quasi tutti i browser. (Nessuna distinzione tra elementi e nodi qui)

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

Un metodo assolutamente corretto, controllare target è un vero codice primario elemento html:

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

Ogni DOMElement.constructor restituisce la funzione HTML ... Element () o [Object HTML ... Element] quindi ...

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

Ho un modo speciale per farlo che non è stato ancora menzionato nelle risposte.

La mia soluzione si basa su quattro test. Se l'oggetto supera tutti e quattro, allora è un elemento:

1. L'oggetto non è nullo.

2. L'oggetto ha un metodo chiamato "appendChild".

3. Il metodo "appendChild" è stato ereditato dalla classe Node e non è solo un metodo impostore (una proprietà creata dall'utente con un nome identico).

4. L'oggetto è di tipo nodo 1 (elemento). Gli oggetti che ereditano i metodi dalla classe Node sono sempre Nodi, ma non necessariamente Elementi.

D: Come posso verificare se una determinata proprietà è ereditata e non è solo un impostore?

A: Un semplice test per vedere se un metodo è stato veramente ereditato da Node è verificare innanzitutto che la proprietà abbia un tipo di "oggetto" o "funzione". Successivamente, converti la proprietà in una stringa e controlla se il risultato contiene il testo "[Native Code]". Se il risultato è simile al seguente:

function appendChild(){
[Native Code]
}

Quindi il metodo è stato ereditato dall'oggetto Node. Vedi https://davidwalsh.name/detect-native-function

E infine, riunendo tutti i test, la soluzione è:

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

Questo verificherà anche se si tratta di un elemento DOM jQuery o JavaScript

L'unico modo per garantire che stai controllando un HTMLEement reale, e non solo un oggetto con le stesse proprietà di un elemento HTML, è determinare se eredita da Node, poiché è impossibile creare un nuovo Node () in JavaScript. (a meno che la funzione Nodo nativa non venga sovrascritta, ma poi sei sfortunato). Così:

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--!>