document.querySelector multiple data-attributes in one element
Solution 1
There should not be a space between the 2 selectors
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')
if you give a space between them it will become a descendant selector, ie it will search for an element attribute data-period="current"
which is inside an element with data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"
like
<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3">
<div data-period="current">-</div>
</div>
Solution 2
space in selector looks for [data-period="current"]
in[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"]
.You don't need to put space in between attribute value selector:
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')
wiesson
Over the past years, I have been working as a frontend engineer in different roles within various industries such as Energy, Telco, IoT, and E-Commerce. To me, fast customer feedback, short development cycles, and a small complimentary team are essential to scale products and delivering good customer experience. What I'm Looking For: ✅ Creating an impact on the consumer, company, and industry ✅ Working with a modern web development stack (JavaScript, ES6, etc) ✅ A collaborative, fast-paced environment that avoids "red tape" Not Looking For: ❌ Relocating (Unless, of course, it's an offer I can't refuse 😁) ❌ Any positions primarily using .NET, Java, or C/C++ ❌ A culture focused around ping-pong, game rooms, and free beer (okay maybe a few drinks...)
Updated on July 05, 2022Comments
-
wiesson almost 2 years
I'm trying to find an element with
document.querySelector
which has multiple data-attributes:<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" data-period="current">-</div>
I thought about something like this:
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] [data-period="current"]')
But it does not work.
However, it works well, if I put the second data-attribute in a child-element like:<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"> <span data-period="current">-</span> </div>
So, is there an option to search for both attributes at once?
I've tried several options but I don't get it. -
yckart almost 6 years@TamásMárton That's not correct. "So, a valid unquoted attribute value in CSS is any string of text that is not the empty string, is not just a hyphen (-), consists of escaped characters and/or characters matching /[-_\u00A0-\u10FFFF]/ entirely, and doesn’t start with a digit or two hyphens or a hyphen followed by a digit." mathiasbynens.be/notes/unquoted-attribute-values#css
-
Márton Tamás almost 6 years@yckart I wrote it based on an a Firefox observation which I repeated many times. But it seems I either messed up something or bumped into a bug, because the selector works properly with unquoted attribute values now. Thanks for pointing out. (For the record: I deleted my misleading, unnecessary comment.)