JavaScript isDOM - Как проверить, является ли объект JavaScript объектом DOM?

Question

Я пытаюсь получить:

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

Есть хороший заменитель?

Answer 1

По данным мдн

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

Answer 2

Не забивать на это или что-то еще, кроме браузеров, совместимых с ES5, почему бы просто:

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

Не будет работать с TextNodes и не уверен в Shadow DOM или DocumentFragments и т. Д., Но будет работать почти со всеми элементами HTML-тегов.