HTML - DOM Element matches() Method

The HTML DOM Element matches() method is used to check whether a specified element matches a given CSS selector. A CSS selector is a pattern (way) used to select and style HTML elements. It allows you to select any element in the entire document and apply style to that.

It returns a boolean value true if the given element matches the specified CSS selector and false if it does not.

Syntax

Following is the syntax of the HTML DOM Element matches() method −

element.matches(selectorString);

Parameters

This function accepts a single parameter as mentioned below:

Parameter	Description
selectorString	It specifies one or more (comma-separated) CSS selectors to match.

Return Value

This method returns a boolean value true if the element matches the provided CSS selector, and false otherwise.

Example 1: Checking if p Matches Selector

The following program demonstrates the usage of the HTML DOM Element matches() method −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element matches()</title>
<style>
   .highlight {
       background-color: yellow;
   }
</style>
</head>
<body>
<h3>HTML DOM Element matches() Method</h3>
<p>It compares an element and applies styles if they match...</p>  
<div id="container">
<p>Hello, world!</p>
<span>Not a paragraph</span>
</div>
<p>The <span> does not match p selector, so no .highlight is added.</p>  
<script>
   // Select the <p> element inside #container
   const container = document.getElementById('container');
   const paragraph = container.querySelector('p');
   // Checks if paragraph matches the 'p' and adds highlight 
   if (paragraph.matches('p')) { 
      paragraph.classList.add('highlight');
   }
</script>
</body>
</html>

The above program highlights the paragraph after it matches the specified selector.

Example 2: Using matches() for button highlighting

Following is another example of the HTML DOM Element matches() method. We use this method to check whether the click element matches the button selector −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element matches()</title>
<style>
   .highlight {
      background-color: rgb(9, 104, 9);
      color: white;
   }
</style>
</head>
<body>
<h3>HTML DOM Element matches() Method</h3>
<p>Highlights the button because it matches the given CSS selector.</p>  
<div id="container">
<button>Click Me</button>
<p>Click target will be highlighted.</p>
</div>  
<script>
   document.addEventListener('click', function(event) {
      if (event.target.matches('button')) {
         event.target.classList.add('highlight');
         const message = document.createElement('p');
         message.textContent = 'Button clicked: '+event.target.textContent;
         document.body.appendChild(message);
      }
   });
</script>
</body>
</html>

When the button is clicked, it will be highlighted as it matches the CSS selector.

Example 3

If the element doesnot matchthe given selector, it will returna false−

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element matches()</title>
<style>
   .highlight {
       background-color: yellow;
   }
</style>
</head>
<body>
<h3>HTML DOM Element matches() Method</h3>
<p>It compares an element and applies styles if they match...</p>  
<div id="container">
<p id="firstParagraph">Hello, world!</p>
<span id="firstSpan">Not a paragraph</span>
</div>
<p>The <span> does not match the <code>p</code> selector,
so no .highlight is added.</p>  
<script>
   const spanElement = document.getElementById('firstSpan');
   const output = spanElement.matches('p') ? 'true' : 'false';
   document.write(`Does <span> match the 'p' selector? ${output}`);
</script>
</body>
</html>

The program mentioned above returns "false" because the specified selector does not match.

Supported Browsers

Method
matches()	Yes 33	Yes 15	Yes 34	Yes 7	Yes 21

html_dom.htm

Print Page