document.querySelector 1つの要素に複数のデータ属性がある場合

質問

を持つ要素を見つけようとしています。 document.querySelector を持っている 複数のデータ属性 :

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

こんな感じで考えてみました。

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

しかし、うまくいきません。

しかし、2つ目のdata-attributeを以下のように子要素に記述するとうまくいきます。

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

で、検索するオプションはありますか？ の両方の属性を一度に検索するオプションはありますか？ ?

いくつかのオプションを試しましたが、理解できません。

どのように解決するのですか？

2つのセレクタの間にスペースを入れてはいけません。

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

間にスペースを入れると の子孫セレクタになります。 になり、つまり、要素の属性 data-period="current" である要素の中にある data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" のように

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