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.
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>
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"]')