web-dev-qa-db-fra.com

document.querySelector plusieurs attributs de données dans un élément

J'essaie de trouver un élément avec document.querySelector qui a plusieurs attributs de données:

<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" data-period="current">-</div>

J'ai pensé à quelque chose comme ça:

document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] [data-period="current"]')

mais ça ne marche pas. Cependant, cela fonctionne bien, si je mets le deuxième attribut de données dans un élément enfant comme

<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"> <span data-period="current">-</span> </div>

Alors, existe-t-il une option pour rechercher les deux attributs à la fois? J'ai essayé plusieurs options mais je ne comprends pas.

javascriptjquerydomelement
27
wiesson

Il ne doit pas y avoir d'espace entre les 2 sélecteurs

document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')

si vous donnez un espace entre eux, il deviendra un sélecteur descendant , c'est-à-dire qu'il recherchera un attribut d'élément data-period="current" qui est à l'intérieur d'un élément avec data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" comme

<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3">
    <div data-period="current">-</div>
</div>
51
Arun P Johny

l'espace dans le sélecteur recherche [data-period="current"] dans[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"]. Vous n'avez pas besoin de mettre d'espace entre le sélecteur de valeur d'attribut:

document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')
4
Milind Anantwar