JavaScript - matches() method

revision:

Category : element

The matches() method of the Element interface tests whether the element would be selected by the specified CSS selector.

The method returns true if an element matches a specific CSS selector(s), and false if not.

Syntax : 

        element.matches(selectors)

Parameters:

selectors : required. a string containing valid CSS selectors to test the Element against. One or more (comma separeted) CSS selectors to match. The returned element is the first found in the document

Examples: 

            <p id="demo" class="container"></p>
            <script>
                const element = document.getElementById("demo");
                let text;
                if (element.matches(".container")) {
                text = "This element matches the CSS selector";
                } else {
                text = "This element does not match the CSS selector";
                }
                document.getElementById("demo").innerHTML = text;
            </script>

Practical examples

example: using the matches() method.
  • Orange-winged parrot
  • Philippine eagle
  • Great white pelican

code: 
                    <div>
                        <ul id="birds">
                            <li>Orange-winged parrot</li>
                            <li class="endangered">Philippine eagle</li>
                            <li>Great white pelican</li>
                        </ul>
                        <p id="match-1"></p>
                    </div>
                    <script>
                        const birds = document.querySelectorAll("li");
                        for (const bird of birds) {
                            if (bird.matches(".endangered")) {
                                console.log(`The ${bird.textContent} is endangered!`);
                                document.getElementById("match-1").innerHTML = `the ${bird.textContent} is endangered`;
                            }
                            }
                                    
                    </script>

example: using the JavaScript matches() method.

I like reading the JavaScript Guide.

I like vacuuming.

code: 
                    <div>
                        <div id= "container">
                            <p class="selected">I like reading the JavaScript Guide.</p>
                            <p>I like vacuuming.</p>
                        </div>
                        <p id="match-2"></p>
                    </div>
                    <script>
                        let container = document.getElementById('container');
                        let children = container.children;
                        for (const child of children) {
                            if (child.matches('.selected')) {
                                console.log(`”${child.textContent}” is selected.`);
                                document.getElementById("match-2").innerHTML = `"${child.textContent}" is selected.`;
                            }
                        }
                    </script>

example: does the element match one of the two selectors?

code: 
                    <div>
                        <p id="myElement" class="container"></p>
                    </div>
                    <style>
                        .container { background-color: tomato; color: white; padding: 2vw;}
                    </style>
                    <script>
                        var element = document.getElementById("myElement");
                        if (element.matches(".container, .wrapper")) {
                            element.innerHTML = "This element matches either the \".container\" CSS selector or the \".wrapper\" selector.";
                        } else {
                            element.innerHTML = "This element does not match any of the selectors.";
                        }
                    </script>