Estoy tratando de encontrar un elemento con document.querySelector que tenga múltiples atributos de datos :
<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" data-period="current">-</div>Pensé en algo como esto:
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] [data-period="current"]') Pero no funciona.
Sin embargo, funciona bien si pongo el segundo atributo de datos en un elemento secundario como:
<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"> <span data-period="current">-</span> </div> Entonces, ¿hay alguna opción para buscar ambos atributos a la vez ?
He probado varias opciones pero no lo consigo.
No debe haber un espacio entre los 2 selectores.
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]') si deja un espacio entre ellos, se convertirá en un selector descendiente , es decir, buscará un atributo de elemento data-period="current" que está dentro de un elemento con data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" como
<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"> <div data-period="current">-</div> </div>el espacio en el selector busca [data-period="current"] en [data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] . No necesita poner espacio entre el selector de valor de atributo:
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')