Как определить статус объекта DOM в JavaScript

В JavaScript очень важно различать объекты DOM (объектная модель документа) и обычные объекты JavaScript. для определенных операций. Хотя традиционный подход проверки свойства tagName работает в большинстве случаев, он может дать сбой в некоторых браузерах, которые не поддерживают свойства только для чтения.

Комплексное решение

Чтобы решить эту проблему, рассмотрите следующую функцию:

function isElement(obj) {
  try {
    // W3 DOM2 (works for FF, Opera, and Chrome)
    return obj instanceof HTMLElement;
  } catch (e) {
    // Non-DOM2 browsers
    return (
      typeof obj === 'object' &&
      obj.nodeType === 1 &&
      typeof obj.style === 'object' &&
      typeof obj.ownerDocument === 'object'
    );
  }
}

Этот код использует W3 DOM2 для поддерживаемых браузеров и проверяет определенные свойства в браузерах, не поддерживающих DOM2.

Дополнительные параметры

Другой подход заключается в том, чтобы используйте следующий код:

function isNode(o) {
  return typeof Node === 'object'
    ? o instanceof Node
    : o &&
        typeof o === 'object' &&
        typeof o.nodeType === 'number' &&
        typeof o.nodeName === 'string';
}

function isElement(o) {
  return typeof HTMLElement === 'object'
    ? o instanceof HTMLElement
    : o &&
        typeof o === 'object' &&
        o !== null &&
        o.nodeType === 1 &&
        typeof o.nodeName === 'string';
}

Этот код различает узлы и элементы DOM, устраняя потенциальные различия в реализациях браузеров.