QuerySelector attribute contains using JavaScript

Posted on by Edward Anderson
QuerySelector attribute contains using JavaScript

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:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *