QuerySelector class contains Examples using JavaScript

avatar

Borislav Hadzhiev

Mon Dec 27 20211 min read

banner

Photo by Hanny Naibaho

QuerySelector class contains Example using JavaScript #

To get the DOM elements by partially matching their class names, pass the following selector to the querySelectorAll method - '[class*="box"]'. The selector matches all of the DOM elements that have a class name that contains the string box.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const boxes = document.querySelectorAll('[class*="box"]'); console.log(boxes); // ๐Ÿ‘‰๏ธ [div.box1, div.box2] const box = document.querySelector('[class*="box"]'); console.log(box); // ๐Ÿ‘‰๏ธ div.box1

We used the document.querySelectorAll method to select all of the DOM elements that have a class that contains the string box.

The string can be located anywhere in the class name to match the query.

The second example uses the document.querySelector method, which returns the first element within the document that matches the provided selector.

In short, if you're looking for a single element that matches the provided selector, use querySelector(), and if you're looking for a collection of elements, use querySelectorAll().

You can also make the query more specific by only looking for div elements that have a class that contains the string box.

index.js
const boxes = document.querySelectorAll('div[class*="box"]'); console.log(boxes); // ๐Ÿ‘‰๏ธ [div.box1, div.box2]

The selector we passed to the querySelectorAll method would not not match any span or p elements even if they have a class that contains the string box.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee