We will check the QuerySelector attribute contains using JavaScript. When working with HTML components in Javascript, this is a crucial skill. Let’s see how to do this!
QuerySelector attribute contains using JavaScript
Using querySelector()
The first element that matches the provided selector is returned by this method. You can go here to get this method’s syntax and its use.
contains() is a method used to check if a string contains a substring given or not. However, if you want to get the element whose attribute contains a specific string, you may need to use the querySelector() to achieve this. For example:
<html> <body> <h1 class="LearnShareIT">LearnShareIT</h1> <script> // Get the first element with class name contains "Share" let share = document.querySelector('[class *= "Share"]'); document.body.innerHTML += share.innerHTML; </script> </body> </html>
Output:

In the previous example, the first element whose attribute “class” includes the word “Learn” was chosen using the querySelector() function. The element we desire has been added after the current element, as shown on the HTML page. If you just want the element whose attribute contains a specific substring at the beginning or the end of it but not in between, you can use the following example instead:
<html> <body> <h1 class="LearnShareIT">LearnShareIT</h1> <script> // Get the first element with class name contains "Le" at the beginning let learn = document.querySelector('[class ^= "Le"]'); document.body.innerHTML += learn.innerHTML; // Get the first element with class name contains "IT" at the end let it = document.querySelector('[class $= "IT"]'); document.body.innerHTML += it.innerHTML; </script> </body> </html>
Output:

If the expected result is exactly what you want, but you want to select all elements with that condition instead of a first found, you can see the next method.
Using querySelectorAll()
This function will return a list of elements that matches a specific selector in the HTML document. Its syntax and usage is introduced here. You can use the querySelectorAll() function to get all the elements that have an id that contains a given keyword:
<html> <body> <h1 id="LearnShareIT">LearnShareIT1</h1> <h1 id="LearnShareIT2022">LearnShareIT2</h1> <script> // Get the elements whose id contains "IT" let it = document.querySelectorAll('[id *= "IT"]'); // Display the results in the list for (i of it) { document.body.innerHTML += i.innerHTML; } </script> </body> </html>
Output:

As can be seen, the querySelectorAll() method will return an array containing two different elements whose id contains the keyword “IT”. If you don’t want to check the “contain” condition anymore but instead you want to check the condition “ends with” or “starts with”, then you can see the examples in the first method as we have introduced each case using querySelector() method. You can apply them to this approach because it will work fine.
Summary
In this article, we have discussed QuerySelector attribute contains using JavaScript via a couple of different approaches. We recommend you use the first method (querySelector() method) because it will return the first element found for you. Good luck!
Maybe you are interested:
- Get nth-child using querySelector in JavaScript
- AddEventListener To The Results From querySelectorAll Using JavaScript
- Check if Element’s Style contains CSS property using JavaScript

I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R