To check if 2 DOM nodes are equal in JavaScript, you can use the isEqualNode()
node method.
Suppose you have 2 HTML elements like this,
<div class="heading">
Hello World
</div>
<div class="heading">
Hello World
</div>
Now, let's use the isEqualNode()
method to check if they are equal or not.
// get all div tags
const allDivtags = document.querySelectorAll("div");
// get first and second div tag
const firstDivTag = allDivtags[0];
const secondDivTag = allDivtags[1];
// check if both DOM nodes are equal
const isEqual = firstDivTag.isEqualNode(secondDivTag);
console.log(isEqual); // true
- The
isEqualNode()
method accepts a valid DOM node reference as an argument. - The method returns
false
for those DOM nodes whose attributes, id, or any other relevant properties are different.
for example,
Consider this HTML, where the 2 div tags are different.
<div class="heading" id="myFavDivTag">
Hello World
</div>
<div class="heading">
Hello World
</div>
Now if you check the equality it will return false
.
// check if both DOM nodes are equal
const isEqual = firstDivTag.isEqualNode(secondDivTag);
console.log(isEqual); // false