So ermitteln Sie den DOM-Objektstatus in JavaScript

In JavaScript ist die Unterscheidung zwischen DOM-Objekten (Document Object Model) und regulären JavaScript-Objekten von entscheidender Bedeutung für bestimmte Operationen. Während der herkömmliche Ansatz der Überprüfung der tagName-Eigenschaft in den meisten Fällen funktioniert, kann er in einigen Browsern fehlschlagen, die keine schreibgeschützten Eigenschaften erzwingen.

Eine umfassende Lösung

Um dieses Problem zu beheben, betrachten Sie die folgende Funktion:

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

Dieser Code nutzt W3 DOM2 für unterstützte Browser und prüft auf bestimmte Eigenschaften in Nicht-DOM2-Browsern.

Zusätzliche Optionen

Ein anderer Ansatz ist Verwenden Sie den folgenden Code:

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

Dieser Code unterscheidet zwischen DOM-Knoten und Elementen und geht auf mögliche Unterschiede in Browser-Implementierungen ein.