Title: Essential DOM Search Methods in JavaScript for Web Developers

Introduction: As web developers, understanding how to interact with the Document Object Model (DOM) is crucial for creating dynamic and interactive web pages. The DOM represents the structure of an HTML document and allows us to manipulate its elements using various methods. In this article, we'll explore three important methods for searching and interacting with DOM elements: elem.matches(css), elem.closest(css), and elem.contains(elem).

1. elem.matches(css) Method: The matches method is used to check if an element matches a given CSS selector. This can be particularly helpful when you want to determine if a specific element has a certain class or attribute.

javascriptCopy codeconst id = document.getElementById("id1");
console.log(id.matches(".class")); // Returns true if the element contains the class 'class', otherwise false.

1. elem.closest(css) Method: The closest method searches for the closest ancestor of an element that matches a given CSS selector. This is useful when you want to target the nearest ancestor that satisfies a certain condition.

javascriptCopy codeconst id2 = document.getElementById("sp1");
console.log(id2.closest(".box")); // Returns the CSS selector if found in the element itself or its ancestors.

1. elem.contains(elem) Method: The contains method checks whether an element contains a specified element. It returns true even if the element itself is used for comparison.

javascriptCopy codeconst id3 = document.getElementById("sp1");
console.log(id3.contains(".sp1")); // Returns true if it contains the element, otherwise false.

Changing Background Color of <li> Elements: Suppose you want to change the background color of all <li> tags to cyan using JavaScript. You can achieve this by selecting all <li> elements and iterating through them using the forEach function.

javascriptCopy codeconst liElements = Array.from(document.getElementsByTagName("li"));
liElements.forEach((element) => {
    element.style.backgroundColor = "cyan"; // Change the background color of each <li> element.
});

Conclusion: Mastering the methods to search and manipulate the DOM is essential for web developers. The elem.matches(css) method allows you to determine if an element matches a specific CSS selector. The elem.closest(css) method helps you find the nearest ancestor that meets certain criteria. Lastly, the elem.contains(elem) method lets you check if an element contains another element.