Matches, Closest And Contains Method in JavaScript

These are Many functions and methods available for the convenience in JavaScript out of which here i am going to discuss three method which are more often used in JavaScript programming.

So let’s get into it and see how these method works:-

ELEMENT.MATCHES()

This method is used to match the classes or id’s in the element. It returns True if the element matches else it returns false

let id1 = document.getElementById("id1");
let sp1 = document.getElementById("sp1");

console.log(id1.matches(".class"));  //Returns false as there is no class with class name 'class' exist. 
console.log(id1.matches(".box"));  // it will return true.

ELEMENT.CLOSEST()

This Method search up in the DOM tree which matches the CSS selectors specified.

This method start searching from itself and moves up to the ancestors until it matches the specified selectors

console.log(sp1.closest("#id1"));
console.log(sp1.closest(".box")); //it returns the nearest parent of the element.

ELEMENT.CONTAINS()

This method returns the Boolean value if the element contains the values that is supplied the it will returns TRUE else it will returns FALSE

console.log(sp1.contains(id1)); // Returns FALSE
console.log(id1.contains(sp1)); // Returns TRUE