Borislav Hadzhiev
Mon Dec 27 2021·1 min read
Photo by Chansereypich Seng
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 in this article.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div title="box1">Box 1</div> <div title="box2">Box 2</div> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
const boxes = document.querySelectorAll('[title*="box"]'); console.log(boxes); // 👉️ [div, div] const box = document.querySelector('[title*="box"]'); console.log(box); // 👉️ div
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.
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
.
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 not match any span
or p
elements even if they have a title
attribute that contains the string box
.