Question

111

document.querySelector multiple data-attributes in one element

rated 0 times [ 113] [ 2] / answers: 1 / hits: 100569 / 9 Years ago, wed, april 29, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

theo

Add To Favorites

Follow

Total Points: 680

Total Questions: 108

Total Answers: 81

Location: Laos

Member since Fri, Sep 11, 2020

4 Years ago

answered 9 Years ago estefanib · Accepted Answer

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>