How to check a JavaScript Object is a DOM Object ?

Last Updated : 03 Oct, 2024

Checking if a JavaScript object is a DOM object involves verifying whether the object represents an element or component within the Document Object Model (DOM) of an HTML or XML document. This can be done by checking if the object is an instance of Node, Element, or other specific DOM interfaces.

What is DOM (Document Object Model)?

The DOM (Document Object Model) is a programming interface that represents the structure of HTML or XML documents as a tree of objects, allowing dynamic manipulation of content.

Element

In HTML DOM, Element is the general base class for all objects. An Element object represents all HTML elements.

Approach: Using instanceof operator.

To check if a JavaScript object is a DOM object, use the instanceof operator. This operator determines whether the object is an instance of the Element class. If true, it indicates the object is part of the DOM, enabling dynamic HTML manipulation.

Syntax

Object instanceof ObjectType

Parameters:

Object: It stores the Object which need to be tested.
ObjectType: It stores the Object Type to be tested against.

Example: In this example we checks if a JavaScript object is a DOM element using instanceof Element. It updates the content of div elements based on whether the object is a DOM element or not.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to check a JavaScript Object is a DOM Object?
    </title>
</head>

<body>
    <div id="div1"></div>
    <div id="nonElem"></div>

    <script>
        // Check if object is a DOM Element
        function isDOM(Obj) {
            return Obj instanceof Element;
        }

        // Get elements
        let div = document.getElementById('div1');
        let nonElem = document.getElementById('nonElem');

        // Non-DOM object
        let x = 1;

        // Check and update innerHTML
        if (isDOM(div))
            div.innerHTML = "Div is detected as a DOM Object";

        if (!isDOM(x))
            nonElem.innerHTML = "x is detected as a non-DOM Object";
    </script>
</body>

</html>

Output:

Div is detected as a DOM Object
x is detected as a non-DOM Object

V

vishodushaozae

Improve

Article Tags :

Similar Reads

How to check if a value is object-like in JavaScript ?

In JavaScript, objects are a collection of related data. It is also a container for name-value pairs. In JavaScript, we can check the type of value in many ways. Basically, we check if a value is object-like using typeof, instanceof, constructor, and Object.prototype.toString.call(k). All of the ope

JavaScript - Convert Two-Dimensional Array Into an Object

Here are the different methods to convert the two-dimensional array into an object in JavaScript.1. Using a for LoopThe simplest way to convert a two-dimensional array into an object is by iterating through the array using a for loop and assigning key-value pairs.JavaScriptconst a = [['name', 'Abhay

How to get all the methods of an object using JavaScript?

In this article, we will learn how to get all the methods of an object using JavaScript. In JavaScript, we can get all the methods of an object by iterating over each object and checking if its property value is a function. An HTML document contains some methods and the task is to get all methods of

How to implement a filter() for Objects in JavaScript ?

In this article, we will learn how to implement a filter() for Objects in JavaScript. In JavaScript, the filter() method is a built-in function for the array, not for the object. The filter() method outputs all the elements of an array that pass a specific test or satisfies a specific function. The

How to add a property to a JavaScript object using a variable as the name?

In JavaScript, you can dynamically add a property to an object using a variable as the name. This allows you to create flexible and dynamic objects based on runtime values, enhancing code reusability and adaptability. There are several methods that can be used to add a property to a JavaScript objec

How to Create Dynamic Values and Objects in JavaScript?

In JavaScript, you can choose dynamic values or variable names and object names and choose to edit the variable name in the future without accessing the array, Dynamic values and objects in JavaScript allow changing, accessing, or creating values and object properties at runtime for flexibility and

JavaScript - Print Object by id in an Array of Objects

Here are the various methods to print objects by id in an array of objects in JavaScript1. Using Array.filter() MethodThe Array.filter() method, creates a new array containing only the object with the specified ID. JavaScriptconst a = [ { id: 1, name: "Alia" }, { id: 2, name: "Dua" }, { id: 3, name:

How to get the last item of JavaScript object ?

In this article, we will learn how to get the last item of a Javascript object. Given a JavaScript object and the task is to get the last element of the JavaScript object. This can be done by the following methods: Using Object.keys() methodUsing for loopmethodApproach 1: Use Object.keys() method to

JavaScript- Add an Object to JS Array

In JavaScript, arrays are used to store multiple values in a single variable, and objects are collections of properties and values. Sometimes, we may need to add an object to an array to manage data more effectively. These are the following ways to add an object to a JS array: Using JavaScript Array

How to iterate over a JavaScript object ?

Iteration involves looping through the object's properties one by one. Depending on the method used, you can access and manipulate different levels of properties efficiently. Here are several methods.There are many methods to iterate over an object which are discussed below: Table of ContentUsing fo