How to Tell the Difference Between DOM Objects and JavaScript Objects?

How to Differentiate DOM Objects from JavaScript Objects

When working with JavaScript, it can be crucial to distinguish between DOM objects and JavaScript objects. DOM objects are often related to elements and attributes on a web page, while JavaScript objects are more abstract.

To efficiently perform this differentiation, it's possible to utilize the instanceof operator. This operator can be applied to confirm whether an object belongs to a specific class or inherited from it.

Here's an example demonstrating its usage:

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

Alternatively, a more comprehensive method to implement this differentiation is by introducing a new function, isNode(), which validates whether an object is a DOM node:

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

With this function in place, the isElement() function can be modified to check for DOM elements exclusively:

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

The above is the detailed content of How to Tell the Difference Between DOM Objects and JavaScript Objects?. For more information, please follow other related articles on the PHP Chinese website!