Bagaimana Anda memeriksa apakah Obyek JavaScript adalah Obyek DOM?

Saya mencoba untuk mendapatkan:

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

Dalam skrip saya sendiri, saya biasa menggunakan ini karena saya tidak pernah membutuhkan tagNamesebagai properti:

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

Jadi untuk objek kedua, saya datang dengan yang berikut sebagai solusi cepat - yang kebanyakan berhasil. ;)

Masalahnya adalah, itu tergantung pada browser yang memberlakukan properti read-only, yang tidak semuanya melakukannya.

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

Apakah ada pengganti yang bagus?

Ini mungkin menarik:

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

Itu bagian dari DOM, Level2 .

Pembaruan 2 : Ini adalah cara saya menerapkannya di perpustakaan saya sendiri: (kode sebelumnya tidak berfungsi di Chrome, karena Node dan HTMLElement adalah fungsi alih-alih objek yang diharapkan. Kode ini diuji dalam FF3, IE7, Chrome 1 dan 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"
);
}

Kompatibel dengan IE8 berikut, kode super sederhana bekerja dengan sempurna.

The jawaban yang diterima tidak mendeteksi semua jenis elemen HTML. Misalnya, elemen SVG tidak didukung. Sebaliknya, jawaban ini berfungsi untuk HTML dan juga SVG.

Lihat beraksi di sini: https://jsfiddle.net/eLuhbu6r/

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

Semua solusi di atas dan di bawah (termasuk solusi saya) menderita kemungkinan salah, terutama pada IE - sangat mungkin untuk (kembali) mendefinisikan beberapa objek / metode / properti untuk meniru node DOM yang membuat tes tidak valid.

Jadi biasanya saya menggunakan pengujian gaya mengetik bebek: Saya menguji secara khusus untuk hal-hal yang saya gunakan. Sebagai contoh, jika saya ingin mengkloning sebuah node saya mengujinya seperti ini:

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

Pada dasarnya ini adalah pemeriksaan kewarasan kecil + tes langsung untuk suatu metode (atau properti) yang saya rencanakan untuk digunakan.

Kebetulan tes di atas adalah tes yang baik untuk node DOM di semua browser. Tetapi jika Anda ingin berada di sisi yang aman selalu periksa keberadaan metode dan properti dan verifikasi tipenya.

EDIT: IE menggunakan objek ActiveX untuk mewakili node, jadi propertinya tidak berperilaku sebagai objek JavaScript yang sebenarnya, misalnya:

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

sementara itu harus mengembalikan "fungsi" dan truemasing - masing. Satu-satunya cara untuk menguji metode adalah untuk melihat apakah sudah ditentukan.

Anda dapat mencoba menambahkannya ke simpul DOM nyata ...

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

    return true;
}

Tidak perlu melakukan peretasan, Anda bisa bertanya apakah sebuah elemen adalah turunan dari Elemen DOM :

const isDOM = el => el instanceof Element

Bagaimana dengan Lo-Dash_.isElement ?

$ npm install lodash.iselement

Dan dalam kode:

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

Ini dari pustaka JavaScript yang indah MooTools :

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

Dengan menggunakan deteksi root yang ditemukan di sini , kita dapat menentukan apakah mis. Lansiran adalah anggota dari root objek, yang kemudian kemungkinan akan berupa jendela:

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

Untuk menentukan apakah objeknya adalah jendela saat ini lebih sederhana:

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

Ini tampaknya lebih murah daripada solusi coba / tangkap di utas pembuka.

Don P

utas lama, tapi di sini ada kemungkinan yang diperbarui untuk pengguna ie8 dan ff3.5 :

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

Saya menyarankan cara sederhana untuk menguji apakah suatu variabel adalah elemen DOM

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

atau seperti yang disarankan 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; },

// Sebenarnya saya lebih cenderung menggunakan inline ini, tetapi kadang-kadang ada baiknya menggunakan pintasan ini untuk kode pengaturan

Ini bisa membantu: 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);
}

Dalam kode di atas, kami menggunakan operator negasi ganda untuk mendapatkan nilai boolean dari objek yang dilewatkan sebagai argumen, dengan cara ini kami memastikan bahwa setiap ekspresi yang dievaluasi dalam pernyataan bersyarat menjadi boolean, mengambil keuntungan dari Evaluasi Sirkuit Pendek , dengan demikian fungsinya mengembalikan trueataufalse

Anda dapat melihat apakah objek atau simpul yang dimaksud mengembalikan tipe string.

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

Untuk yang menggunakan Angular:

angular.isElement

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

Saya pikir prototyping bukan solusi yang sangat bagus tapi mungkin ini yang tercepat: Tentukan blok kode ini;

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

daripada memeriksa objek Anda properti isDomElement:

if(a.isDomElement){}

Saya harap ini membantu.

Menurut mdn

Elementadalah kelas dasar paling umum dari mana semua objek dalam suatu Documentwarisan. Hanya memiliki metode dan properti yang umum untuk semua jenis elemen.

Kita dapat mengimplementasikannya isElementdengan prototipe. Ini saran saya:

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

Saya pikir apa yang harus Anda lakukan adalah melakukan pemeriksaan menyeluruh atas beberapa properti yang akan selalu berada dalam elemen dom, tetapi kombinasinya kemungkinan besar tidak akan ada di objek lain, seperti:

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

Di Firefox, Anda dapat menggunakan instanceof Node. Itu Nodedidefinisikan dalam DOM1 .

Tapi itu tidak semudah itu di IE.

1. "instanceof ActiveXObject" hanya dapat mengatakan bahwa itu adalah objek asli.
2. "typeof document.body.appendChild == 'object'" mengatakan bahwa itu mungkin objek DOM, tetapi juga bisa menjadi sesuatu yang lain memiliki fungsi yang sama.

Anda hanya dapat memastikan itu adalah elemen DOM dengan menggunakan fungsi DOM dan menangkap jika ada pengecualian. Namun, itu mungkin memiliki efek samping (misalnya mengubah keadaan internal objek / kinerja / kebocoran memori)

Mungkin ini alternatif? Diuji di Opera 11, FireFox 6, Internet Explorer 8, Safari 5 dan 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;
}

Fungsi tidak akan tertipu oleh misal ini

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

Inilah yang saya tahu:

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

Untuk meningkatkan kinerja, saya membuat fungsi self-invaging yang menguji kemampuan browser hanya sekali dan menetapkan fungsi yang sesuai.

Tes pertama harus bekerja di sebagian besar browser modern dan sudah dibahas di sini. Itu hanya menguji apakah elemen tersebut adalah instance dari HTMLElement. Sangat mudah.

Yang kedua adalah yang paling menarik. Ini adalah fungsionalitas intinya:

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

Ia menguji apakah el adalah turunan dari konstruktor yang dikehendaki. Untuk melakukan itu, kita perlu akses ke konstruktor elemen. Itu sebabnya kami menguji ini di if-Statement. IE7 misalnya gagal ini, karena (document.createElement("a")).constructorada undefineddi IE7.

Masalah dengan pendekatan ini adalah yang document.createElementbenar-benar bukan fungsi tercepat dan dapat dengan mudah memperlambat aplikasi Anda jika Anda menguji banyak elemen dengannya. Untuk mengatasi ini, saya memutuskan untuk membuat cache konstruktor. Objek ElementConstructorsmemiliki nodeNames sebagai kunci dengan konstruktor yang sesuai sebagai nilai. Jika sebuah konstruktor sudah di-cache, ia menggunakannya dari cache, jika tidak ia menciptakan Elemen, cache konstruktornya untuk akses di masa depan dan kemudian mengujinya.

Tes ketiga adalah fallback yang tidak menyenangkan. Ia menguji apakah el adalah sebuah object, memiliki nodeTypeproperti yang disetel 1dan string sebagai nodeName. Ini tentu saja tidak terlalu andal, namun sebagian besar pengguna seharusnya tidak mundur sejauh ini.

Ini adalah pendekatan yang paling dapat diandalkan yang saya buat dengan tetap menjaga kinerja setinggi mungkin.

Tes jika objmewarisi dari Node .

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

Node adalah antarmuka dasar dari mana HTMLElement dan Teks mewarisi.

membedakan objek js mentah dari HTMLElement

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

menggunakan:

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

// ATAU

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

menggunakan:

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

inilah trik menggunakan jQuery

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

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

jadi memasukkannya ke dalam fungsi:

function isElement(obj){

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

}

Bukan untuk menekankan ini atau apa pun kecuali untuk browser yang sesuai dengan ES5 mengapa tidak hanya:

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

Tidak akan bekerja pada TextNodes dan tidak yakin tentang Shadow DOM atau DocumentFragments dll. Tetapi akan bekerja pada hampir semua elemen tag HTML.

Ini akan berfungsi untuk hampir semua browser. (Tidak ada perbedaan antara elemen dan node di sini)

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

Metode benar mutlak, periksa target adalah kode primer elemen html nyata :

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

Setiap DOMElement.constructor mengembalikan fungsi HTML ... Element () atau [Object HTML ... Element] jadi ...

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

Saya punya cara khusus untuk melakukan ini yang belum disebutkan dalam jawaban.

Solusi saya didasarkan pada empat tes. Jika objek melewati keempatnya, maka itu adalah elemen:

1. Objeknya bukan nol.

2. Objek memiliki metode yang disebut "appendChild".

3. Metode "appendChild" diwarisi dari kelas Node , dan bukan hanya metode peniru (properti yang dibuat pengguna dengan nama yang sama).

4. Objeknya adalah Node Type 1 (Elemen). Objek yang mewarisi metode dari kelas Node selalu Nodes, tetapi tidak harus Elemen.

T: Bagaimana cara saya memeriksa apakah properti yang diberikan adalah warisan dan bukan hanya penipu?

A: Tes sederhana untuk melihat apakah suatu metode benar-benar diwarisi dari Node adalah untuk memverifikasi terlebih dahulu bahwa properti memiliki jenis "objek" atau "fungsi". Selanjutnya, konversi properti menjadi string dan periksa apakah hasilnya mengandung teks "[Kode Asli]". Jika hasilnya terlihat seperti ini:

function appendChild(){
[Native Code]
}

Maka metode ini telah diwarisi dari objek Node. Lihat https://davidwalsh.name/detect-native-function

Dan akhirnya, menyatukan semua tes, solusinya adalah:

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

Ini akan memeriksa bahkan jika itu adalah elemen jQuery atau JavaScript DOM

Satu-satunya cara untuk menjamin Anda memeriksa HTMLEement yang sebenarnya, dan bukan hanya objek dengan properti yang sama dengan Elemen HTML, adalah untuk menentukan apakah itu mewarisi dari Node, karena tidak mungkin untuk membuat Node () baru di JavaScript. (kecuali fungsi Node asli ditimpa, tetapi kemudian Anda kurang beruntung). Begitu:

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