QuerySelector Attribute contains/starts with Examples in JS

# Table of Contents

# QuerySelector attribute contains Examples using JavaScript

To get the DOM elements by partially matching an attribute value, pass the following selector to the querySelectorAll method - '[title*="box"]'.

The selector matches all of the DOM elements that have a title attribute that contains the string box.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div title="box1">Box 1</div>
    <div title="box2">Box 2</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const boxes = document.querySelectorAll('[title*="box"]');
console.log(boxes); // 👉️ [div, div]

const box = document.querySelector('[title*="box"]');
console.log(box); // 👉️ div

queryselector attribute contains examples

The code for this article is available on GitHub

We used the document.querySelectorAll() method to select all of the DOM elements that have a title attribute that contains the string box.

The string can be located anywhere in the attribute's value 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 an attribute that contains the string box.

index.js

Copied!
const boxes = document.querySelectorAll('div[title*="box"]');
console.log(boxes); // 👉️ [div, div]

const box = document.querySelector('div[title*="box"]');
console.log(box); // 👉️ div

The selectors we passed to the querySelectorAll and querySelector methods would not match any span or p elements even if they have a title attribute that contains the string box.

# QuerySelector class contains Examples 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.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const boxes = document.querySelectorAll('[class*="box"]');
console.log(boxes); // 👉️ [div.box1, div.box2]

const box = document.querySelector('[class*="box"]');
console.log(box); // 👉️ div.box1

queryselector class contains examples

The code for this article is available on GitHub

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

Copied!
const boxes = document.querySelectorAll('div[class*="box"]');
console.log(boxes); // 👉️ [div.box1, div.box2]

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

# QuerySelector attribute starts with Examples

To get the DOM elements that have an attribute starting with a specific value, pass the following selector to the querySelectorAll method - '[title^="box"]'.

The selector matches all of the DOM elements that have a title attribute that starts with the string box.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div title="box1">Box 1</div>
    <div title="box2">Box 2</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const boxes = document.querySelectorAll('[title^="box"]');
console.log(boxes); // 👉️ [div, div]

const box = document.querySelector('[title^="box"]');
console.log(box); // 👉️ div

queryselector attribute starts with examples

The code for this article is available on GitHub

We used the document.querySelectorAll() method to select all of the DOM elements that have a title attribute that starts with the string box.

You might be familiar with the care ^, which has the same meaning when used in regular expressions.

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 an attribute value that starts with a specific string.

index.js

Copied!
const boxes = document.querySelectorAll('div[title^="box"]');
console.log(boxes); // 👉️ [div, div]

const box = document.querySelector('div[title^="box"]');
console.log(box); // 👉️ div

The selectors we passed to the querySelectorAll and querySelector methods would not match any span or p elements even if they have a title attribute that starts with the string box.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

QuerySelector Attribute contains/starts with Examples in JS

# Table of Contents

# QuerySelector attribute contains Examples using JavaScript

# QuerySelector class contains Examples using JavaScript

# QuerySelector attribute starts with Examples

# Additional Resources

Borislav Hadzhiev