Borislav Hadzhiev
Mon Jan 03 2022·3 min read
Photo by Brooke Cagle
Use the querySelector
method to get an element by data attribute, e.g.
document.querySelector('[data-id="box1"]')
. The querySelector
method returns
the first element that matches the provided selector or null
if no element
matches the selector in the document.
Here is the HTML for the examples in this article.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div data-id="box1">Box 1</div> <span data-id="box2">Box 2</span> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
// ✅ Get first element with data-id = `box1` const el1 = document.querySelector('[data-id="box1"]'); console.log(el1); // 👉️ div // ✅ Get first element that has data-id attribute set const el2 = document.querySelector('[data-id]'); console.log(el2); // 👉️ div // ✅ Get all elements with data-id = `box1` const elements = document.querySelectorAll('[data-id="box1"]'); console.log(elements); // 👉️ [div]
querySelectorAll
method instead. The method takes the same parameter as querySelector
.We used the
document.querySelector
method to get the first element in the DOM that has a data-id
attribute equal
to box1
.
The second example shows how to get the first element that has the data-id
attribute set to any value.
const el2 = document.querySelector('[data-id]');
You can also narrow things down by looking for a specific type of element, e.g.
a div
that has a data attribute set to a certain value.
const el1 = document.querySelector('div[data-id="box1"]'); console.log(el1); // 👉️ div
The example above would only select div
elements that have a data-id
attribute set to box1
.
querySelector
with querySelectorAll
.To get an element by partially matching a data attribute, use the
querySelector
method with a selector that matches a data attribute whose value
starts with, ends with, or contains a specific string.
// ✅ get element where data-id starts with `bo` const el1 = document.querySelector('[data-id^="bo"]'); console.log(el1); // 👉️ div // ✅ get element where data-id ends with `ox1` const el2 = document.querySelector('[data-id$="ox1"]'); console.log(el2); // 👉️ div // ✅ get element where data-id contains `box` const el3 = document.querySelector('[data-id*="box"]'); console.log(el3); // 👉️ div
querySelectorAll
method to get a collection of elements matching the selector.The first example gets the first DOM element that has a data-id
attribute,
whose value starts with bo
.
const el1 = document.querySelector('[data-id^="bo"]');
^
symbol, which has the same meaning when used with regular expressions.The second example selects the first DOM element that has a data-id
attribute
that ends with ox1
.
const el2 = document.querySelector('[data-id$="ox1"]');
The third example selects the first DOM element that has a data-id
attribute
that contains box
.
const el3 = document.querySelector('[data-id*="box"]');
box
could be located anywhere in the value of the data-id
attribute for the condition to be met.Note that you could also prefix the selector with a specific type of element you want to match to narrow down the results.
const el1 = document.querySelector('div[data-id^="bo"]');
The example above selects a div
element that has a data-id
attribute that
starts with bo
.