How do you check if a JavaScript Object is a DOM Object?

In JavaScript, verifying whether an object is a DOM object can be achieved through several methods. The approach depends on the specific type of DOM object you're checking, such as element nodes, text nodes, or others. Below are common techniques:

1. Using instanceof Operator

The instanceof operator checks if an object is an instance of a specific constructor. For DOM objects, constructors like HTMLElement and Node can be used. For example:

javascript
function isDOMElement(obj) {
    return obj instanceof HTMLElement;
}

const element = document.createElement('div');
console.log(isDOMElement(element));  // Output: true

2. Using nodeType Property

Every DOM node has a nodeType property, which is a number indicating the node type. For instance, an element node has a nodeType of 1. Checking this property determines if an object is a DOM node:

javascript
function isDOMNode(obj) {
    return obj && typeof obj === 'object' && 'nodeType' in obj;
}

const node = document.createTextNode("Hello");
console.log(isDOMNode(node));  // Output: true

3. Using nodeName or tagName Properties

For element nodes, nodeName and tagName properties return the element's tag name. Checking for these properties confirms if an object is a DOM element:

javascript
function isDOMElement(obj) {
    return obj && typeof obj === 'object' && ('nodeName' in obj || 'tagName' in obj);
}

const element = document.createElement('p');
console.log(isDOMElement(element));  // Output: true

Application Scenario Example

Suppose you're developing a library that processes user-provided objects, which may be DOM elements or plain JavaScript objects. You need to handle different types appropriately, for example:

javascript
function process(obj) {
    if (isDOMElement(obj)) {
        console.log("Processing DOM element");
        // Perform operations on DOM element
    } else {
        console.log("Processing plain object");
        // Perform operations on plain object
    }
}

const elem = document.createElement('span');
const obj = { name: 'John Doe' };

process(elem);  // Output: Processing DOM element
process(obj);   // Output: Processing plain object

This ensures the function executes operations based on the object type correctly, while enhancing code robustness and maintainability.