web-dev-qa-db-ja.com

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番目のデータ属性を配置すると、うまく機能します

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

だから、両方の属性を一度に検索するオプションはありますか？いくつかのオプションを試しましたが、わかりません。

javascriptjquerydomelement
27
wiesson

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>
51
Arun P Johny

セレクタのスペースは[data-period="current"] in[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"]を探します。属性値セレクタの間にスペースを入れる必要はありません。

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