Prerequisite: DOM (Document object model), Instanceof Operator
DOM (Document Object Model): Document Object Model is a hierarchical representation of HTML and XML documents in a format that is easier to interpret in terms of programming. It makes manipulation of tags, elements, attributes, and classes by interpreting its structure in the form of a tree-like model consisting of nodes.
Element: In HTML DOM, Element is the general base class for all objects. An Element object represents all HTML elements.
Approach: In order to check whether a JavaScript object is a DOM object, we need to check whether the given JS object is of Element type Object. In order to check this, we will use instanceof operator. The instanceof operator returns a boolean value which specifies whether or not an object is an instance of a given Class.
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:
<!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>
// Function to check the object
// id DOM object or not
function isDOM(Obj) {
// Function that checks whether
// object is of type Element
return Obj instanceof Element;
}
// Set all elements into HTML
var div = document.getElementById('div1');
var nonElem = document.getElementById('nonElem');
// Creating a non-DOM Object
var x = 1;
// Checks against HTML elements and
// non-HTML elements
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