문서.query선택기 하나의 요소에 여러 개의 데이터 속성이 있습니다.

문서.query선택기 하나의 요소에 여러 개의 데이터 속성이 있습니다.

저는 당신과 함께 할 요소를 찾고 있습니다.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"]')

하지만 그것은 작동하지 않습니다.
그러나 두 번째 데이터 속성을 다음과 같은 하위 요소에 넣으면 잘 작동합니다.

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

그렇다면 두 속성을 동시에 검색할 수 있는 옵션이 있을까요?
여러 가지 방법을 시도해 보았지만 이해가 안 됩니다.

두 셀렉터 사이에 공간이 없어야 합니다.

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>

선택기에서 찾는 공간[data-period="current"]에[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"].속성 값 선택기 사이에 공백을 둘 필요가 없습니다.

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

이렇게 해서 여러 데이터 세트 속성으로 특정 클래스를 선택할 수 있는 솔루션을 생각해냈습니다.

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

당신이 옳다고 생각한 것은 당신이 선택하려는 클래스를 지정하기만 하면 됩니다.

언급URL : https://stackoverflow.com/questions/29937768/document-queryselector-multiple-data-attributes-in-one-element