如何區分 DOM 物件和 JavaScript 物件？

如何區分 DOM 物件和 JavaScript 物件

使用 JavaScript 時，區分 DOM 物件和 JavaScript 物件至關重要。 DOM 物件通常與網頁上的元素和屬性相關，而 JavaScript 物件則更抽象。

為了有效地執行這種區分，可以使用 instanceof 運算子。此運算子可用於確認物件是否屬於特定類別或從該類別繼承。

這裡有一個示範其用法的範例：

<code class="javascript">function isElement(obj) {
  try {
    // Using W3 DOM2 (compatible with FF, Opera, and Chrome)
    return obj instanceof HTMLElement;
  } catch (e) {
    // For browsers that don't support W3 DOM2 (like IE7)
    return (
      typeof obj === "object" &&
      obj.nodeType === 1 &&
      typeof obj.style === "object" &&
      typeof obj.ownerDocument === "object"
    );
  }
}</code>

或者，更全面的方法來實現這種區別是透過引入一個新函數isNode() 來驗證物件是否是DOM節點：

<code class="javascript">function isNode(o) {
  return (
    typeof Node === "object" ? o instanceof Node :
    o &&
    typeof o === "object" &&
    typeof o.nodeType === "number" &&
    typeof o.nodeName === "string"
  );
}</code>

有了這個函數，就可以修改isElement() 函數來檢查DOM專屬元素：

<code class="javascript">function isElement(o) {
  return (
    typeof HTMLElement === "object" ? o instanceof HTMLElement : // DOM2
    o &&
    typeof o === "object" &&
    o !== null &&
    o.nodeType === 1 &&
    typeof o.nodeName === "string"
  );
}</code>

以上是如何區分 DOM 物件和 JavaScript 物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！