Menu
I've an array of HTML DOM objects:
// Console output
(3) […]
0: <div data-selector="5">
1: <div data-selector="9">
2: <div data-selector="2">
3: <div data-selector="6">
4: <div data-selector="13">
length: 5
<prototype>: Array []
How can I find (and return) the HTML object having data-selector equal to 9 (i.e.<div data-selector="9">) using JavaScript?
914
This would solve your problem.
array.find(item => item.dataset.selector === '9');
Explanation:
Javascript allows you to use
datasetto access data attributes in html. That is, they have a pattern such asdata-*
So, if you have a html file that looks like this:
<html>
<div id="root">
<div data-selector="5"></div>
<div data-selector="9"></div>
<div data-selector="2"></div>
<div data-selector="6"></div>
<div data-selector="13"></div>
</div>
</html>
You can get the div with id of root in your javascript file:
const root = document.querySelector('#root');
// get array of div elements inside root
const tagsArray = [...root.children];
// finally, retrieve the specific element you need
const selectedItem = tagsArray.find(elem => elem.dataset.selector === '9');
// A simple check
console.log(selectedItem); // => <div data-selector="9"></div>
answered Oct 29 '25 06:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With