Як перевірити, чи об’єкт JavaScript об'єкт DOM?

Я намагаюся отримати:

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

У своїх власних сценаріях я використовував це, оскільки мені ніколи не потрібен tagNameяк властивість:

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

Тому для другого об'єкта я придумав таке швидке рішення - яке в основному працює. ;)

Проблема полягає в тому, що це залежить від браузерів, які застосовують властивості лише для читання, що не всі.

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

Чи є хороший замінник?

Це може зацікавити:

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

Це частина DOM, рівень 2 .

Оновлення 2 : Ось як я його реалізував у власній бібліотеці: (попередній код не працював у Chrome, тому що Node та HTMLElement - це функції замість очікуваного об'єкта. Цей код тестується в FF3, IE7, Chrome 1 та 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"
);
}

Наведений нижче сумісний IE8, суперпростий код працює бездоганно.

Загальноприйнятий відповідь не може виявити всі типи елементів HTML. Наприклад, елементи SVG не підтримуються. На відміну від цього, ця відповідь працює як для HTML, так і для SVG.

Побачити це в дії тут: https://jsfiddle.net/eLuhbu6r/

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

Усі рішення вище та нижче (включаючи моє рішення) страждають від можливості помилковості, особливо в IE - цілком можливо (пере) визначити деякі об'єкти / методи / властивості, щоб імітувати вузол DOM, що робить тест недійсним.

Тому зазвичай я використовую тестування стилю качки: я тестую спеціально для речей, які використовую. Наприклад, якщо я хочу клонувати вузол, я перевіряю його так:

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

В основному це невелика перевірка здоровості + прямий тест на метод (або властивість), який я планую використовувати.

Між іншим, тест, описаний вище, є хорошим тестом для DOM-вузлів у всіх браузерах. Але якщо ви хочете бути в безпеці, завжди перевіряйте наявність методів та властивостей та перевірте їх види.

EDIT: IE використовує об’єкти ActiveX для представлення вузлів, тому їх властивості не ведуть себе як справжній об’єкт JavaScript, наприклад:

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

при цьому він повинен повернути "функцію" і trueвідповідно. Єдиний спосіб перевірити методи перевірки, чи визначені вони.

Ви можете спробувати додати його до справжнього вузла DOM ...

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

    return true;
}

Немає потреби в хаках, ви можете просто запитати, чи є елемент екземпляром елемента DOM :

const isDOM = el => el instanceof Element

Як щодо Ло-Даш_.isElement ?

$ npm install lodash.iselement

І в коді:

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

Це з чудової бібліотеки JavaScript MooTools :

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

З допомогою виявлення кореня знайдений тут , ми можемо визначити , наприклад , є чи сигнал тривоги є членом кореня об'єкта, який потім , ймовірно, буде вікно:

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

Щоб визначити, чи є об'єктом поточне вікно, ще простіше:

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

Це здається менш дорогим, ніж рішення пробування / вловлювання у відкриваючій нитці.

Дон П

стара нитка, але ось оновлена ​​можливість для користувачів ie8 та ff3.5 :

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

Я пропоную простий спосіб перевірити, чи змінна є елементом DOM

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

або як запропонував 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; },

// Насправді я скоріше за все не використовую ці вбудовані, але іноді добре мати ці ярлики для коду настройки

Це може бути корисно: 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);
}

У наведеному вище коді ми використовуємо оператор подвійного заперечення, щоб отримати булеве значення об'єкта, переданого як аргумент, таким чином ми гарантуємо, що кожне вираження, оцінене в умовному викладі, буде булевим, користуючись перевагою Оцінки короткого замикання , таким чином функцією повертає trueабоfalse

Ви можете бачити, чи відповідний об'єкт або вузол повертає тип рядка.

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

Для тих, хто використовує Angular:

angular.isElement

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

Я думаю, що прототипування - не дуже вдале рішення, але, можливо, це найшвидше: визначте цей блок коду;

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

ніж перевірити об’єкти властивості isDomElement:

if(a.isDomElement){}

Я сподіваюся, що це допомагає.

За даними мдн

Element- це найзагальніший базовий клас, з якого всі об'єкти мають у Documentспадок. У ньому є лише методи та властивості, загальні для всіх видів елементів.

Ми можемо реалізувати isElementза прототипом. Ось моя порада:

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

Я думаю, що те, що вам потрібно зробити, - це ретельно перевірити деякі властивості, які завжди будуть знаходитись у елементі dom, але їх поєднання, швидше за все, не буде в іншому об'єкті, як-от так:

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

У Firefox ви можете використовувати instanceof Node. Це Nodeвизначено в DOM1 .

Але це не так просто в IE.

1. Тільки "instanceof ActiveXObject" може сказати, що це рідний об'єкт.
2. "typeof document.body.appendChild == 'object" "скажіть, що це може бути об'єкт DOM, але також може бути щось інше, що має таку ж функцію.

Ви можете переконатися, що це елемент DOM, лише скориставшись функцією DOM та перехопившись за будь-якого винятку. Однак це може мати побічний ефект (наприклад, змінити внутрішній стан об'єкта / продуктивність / витік пам'яті)

Можливо, це альтернатива? Тестовано в Opera 11, FireFox 6, Internet Explorer 8, Safari 5 та 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;
}

Функція не обдурить, наприклад, це

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

Це я зрозумів:

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

Для підвищення продуктивності я створив функцію самозванки, яка перевіряє можливості браузера лише один раз і відповідно призначає відповідну функцію.

Перший тест повинен працювати в більшості сучасних браузерів і тут вже йшлося. Він просто перевіряє, чи елемент є екземпляром HTMLElement. Дуже прямо.

Другий - найцікавіший. Це його основна функціональність:

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

Він перевіряє, чи el є примірником конструктора, на який він претендує. Для цього нам потрібен доступ до провідника елемента. Ось чому ми тестуємо це в if-Statement. Наприклад, IE7 не вдається, оскільки (document.createElement("a")).constructorєundefined в IE7.

Проблема такого підходу полягає в тому, що document.createElementце насправді не найшвидша функція і може легко уповільнити вашу програму, якщо ви протестуєте багато елементів за допомогою неї. Щоб вирішити це, я вирішив кешувати конструктори. Об'єкт ElementConstructorsмає nodeNames як ключі з відповідними конструкторами як значення. Якщо конструктор уже кешований, він використовує його з кешу, інакше він створює Елемент, кешує його конструктор для подальшого доступу та потім тестує проти нього.

Третє випробування - неприємний запас. Він перевіряє, чи el є an object, має nodeTypeвластивість 1та string якnodeName . Звичайно, це не дуже надійно, але переважна більшість користувачів не повинні навіть відступати.

Це найнадійніший підхід, який я придумав, зберігаючи ефективність якнайбільше.

Перевірте, чи objуспадковується від Node .

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

Вузол - це базовий інтерфейс, від якого успадковуються HTMLElement та Text.

диференціювати необроблений js-об’єкт від HTMLElement

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

використання:

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

// АБО

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

використання:

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

ось фокус із використанням jQuery

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

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

таким чином, поставивши його у функцію:

function isElement(obj){

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

}

Не забивати це чи щось, але для браузерів, сумісних з ES5, чому б не просто:

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

Чи не буде працювати на TextNodes і не впевнений , що Shadow DOM або DocumentFragments і т.д. , але буде працювати майже на всіх HTML тегів елементів.

Це буде працювати майже для будь-якого браузера. (Тут немає різниці між елементами та вузлами)

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

Абсолютний правильний метод, check check - це первинний код реального 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);

Кожен DOMElement.constructor повертає функцію HTML ... Element () або [Object HTML ... Element] так ...

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

У мене є особливий спосіб зробити це, який ще не згадувався у відповідях.

Моє рішення засноване на чотирьох тестах. Якщо об'єкт передає всі чотири, то це елемент:

1. Об'єкт недійсний.

2. Об'єкт має метод, який називається "appendChild".

3. Метод "appendChild" був успадкований від класу Node , і це не просто метод imposter (створене користувачем властивість з однаковим іменем).

4. Об'єкт має тип вузла 1 (Елемент). Об'єктами, які успадковують методи з класу Node , завжди є Node , але не обов'язково Elements.

Питання: Як я можу перевірити, чи певна властивість успадковується і чи не є просто імпостером?

Відповідь: Простий тест, щоб перевірити, чи метод насправді успадкований від Node, - це спочатку перевірити, чи є у властивості тип "об'єкт" чи "функція". Далі перетворіть властивість у рядок і перевірте, чи містить результат текст "[Native Code]". Якщо результат виглядає приблизно так:

function appendChild(){
[Native Code]
}

Тоді метод був успадкований від об'єкта Node. Дивіться https://davidwalsh.name/detect-native-function

І нарешті, об’єднавши всі тести разом, рішення:

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

Це перевірятиметься, навіть якщо це елемент jQuery або JavaScript DOM

Єдиний спосіб гарантувати те, що ви перевіряєте фактичний HTMLEement, а не лише об’єкт із тими ж властивостями, що і HTML-елемент, - це визначити, чи він успадковується від Node, оскільки неможливо створити новий Node () в JavaScript. (якщо тільки функція нативного вузла не буде перезаписана, але тоді вам не пощастить). Так:

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