Borislav Hadzhiev
Mon Jan 03 2022·2 min read
Photo by Samantha Gades
Use the document.querySelector()
method to get an element by id by partially
matching a string, e.g.
const el = document.querySelector('[id*="my-partial-id"]')
. The method returns
the first element within the document that matches the provided selector.
Here is the HTML for the examples in this article.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box1">Box 1</div> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
// ✅ get element by ID that STARTS WITH `bo` const element1 = document.querySelector(`[id^="bo"]`); console.log(element1); // 👉️ div#box1 // ✅ get element by ID that ENDS WITH `ox1` const element2 = document.querySelector(`[id$="ox1"]`); console.log(element2); // 👉️ div#box1 // ✅ get element by ID that CONTAINS `ox` const element3 = document.querySelector(`[id*="ox"]`); console.log(element3); // 👉️ div#box1 // ✅ get collection of elements with ID that starts with `bo` const elements = document.querySelectorAll(`[id^="bo"]`); console.log(elements); // 👉️ [div#box1]
querySelectorAll
method instead of querySelector
. The method takes the same parameter and returns a NodeList
containing the matching elements.We used the
document.querySelector
method to get an element by partially matching its id
attribute.
If no matches are found, the method returns null
.
The first example selects the first DOM element that has an id
attribute,
whose value starts with bo
.
// ✅ get element by ID that STARTS WITH `bo` const element1 = document.querySelector(`[id^="bo"]`);
^
symbol, which has the same meaning when used with regular expressions.The second example selects the first DOM element that has an id
attribute,
whose value ends with ox1
.
// ✅ get element by ID that ENDS WITH `ox1` const element2 = document.querySelector(`[id$="ox1"]`);
The third example selects the first DOM element that has an id
attribute,
whose value contains ox
.
// ✅ get element by ID that CONTAINS `ox` const element3 = document.querySelector(`[id*="ox"]`);
The string ox
could be located anywhere in the value of the id
attribute for
the condition to be met.
Note that you could also prefix the selector with the specific type of element you want to match, to narrow down the results.
// ✅ get DIV element by ID that STARTS WITH `bo` const element1 = document.querySelector(`div[id^="bo"]`); console.log(element1); // 👉️ div#box1
The example above selects a div
element that has an id
attribute with a
value that starts with bo
.
querySelector
method returns null
. To make sure you dont try to access a property on a null
value or try to invoke a method on one, you should handle this scenario.const element1 = document.querySelector(`div[id^="bo"]`); console.log(element1); // 👉️ div#box1 // 👇️ Check if element1 stores truthy value if (element1) { // 👇️ "Box 1" console.log(element1.textContent); }
In the example, we checked if the element1
variable stores a truthy value
before accessing the textContent
property.
This helps us make sure we don't get an error by trying to access the property
on a null
value.