如何在JavaScript 中確定DOM 物件狀態

在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 節點和元素，解決瀏覽器實作中的潛在差異。