Title: *How to find array of properties by data attribute JavaScript – best methods?*
Hey folks!
I’ve been scratching my head over how to find array of properties by data attribute javascript. Like, I need to grab all elements with a specific `data-*` attribute and store their values in an array.
I know `querySelectorAll` is a thing, but is it the *best* way? Or are there faster/more flexible methods? Maybe something with `getAttribute` or `dataset`?
Also, what if I wanna filter them further? Like, only get elements where `data-role="admin"`?
Kinda new to this, so any tips or code snippets would be awesome!
Thanks in advance! 🚀
Hey! querySelectorAll is def a solid choice for how to find array of properties by data attribute javascript.
But if you wanna filter, just chain it with `filter()`:
```javascript
const elements = [...document.querySelectorAll('[data-role]')].filter(el => el.dataset.role === 'admin');
```
Also, check out MDN’s docs on dataset—super helpful for this stuff!
Yo! If speed matters, `getAttribute` can sometimes be faster than `dataset` for simple checks.
For your case:
```javascript
const adminElements = Array.from(document.querySelectorAll('[data-role="admin"]'));
```
Boom, done. No extra filtering needed.
Honestly, querySelectorAll is the go-to, but if you’re working with a huge DOM, maybe try `getElementsByClassName` with a shared class + data attr combo.
Not as elegant, but hey, performance wins sometimes.
Also, jsperf.com is great for testing speed differences.
For modern JS, I’d say stick with `dataset`—it’s cleaner.
```javascript
const dataValues = [...document.querySelectorAll('[data-something]')].map(el => el.dataset.something);
```
If you need filtering, just slap a `.filter()` on there. Easy peasy.
Kinda surprised no one’s mentioned `matches()` yet!
You can do:
```javascript
const admins = [...document.querySelectorAll('[data-role]')].filter(el => el.matches('[data-role="admin"]'));
```
Might be overkill for simple cases, but it’s flexible af.
If you’re using jQuery (I know, I know), this is stupid easy:
```javascript
const admins = $('[data-role="admin"]').toArray();
```
But yeah, vanilla JS with querySelectorAll is the way to go if you’re not already using jQuery.
Don’t forget about `Array.from()`! Makes converting NodeLists way cleaner.
```javascript
const elements = Array.from(document.querySelectorAll('[data-thing]'), el => el.dataset.thing);
```
Also, CSS Tricks has a nice guide on data attributes if you wanna dive deeper.
Wow, thanks for all the replies! Didn’t realize there were so many ways to tackle how to find array of properties by data attribute javascript.
Tried the `dataset` + `filter` combo, and it worked like a charm.
One follow-up—any performance gotchas with huge DOMs? Saw someone mention `getElementsByClassName`, but is it really that much faster?
Thanks again, y’all are legends! 🚀
