document.querySelector से अधिक डेटा-गुण

Question

मैं जो एक से अधिक डेटा-गुण होते हैं 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> 

तो जैसे एक बच्चे-तत्व में दूसरा डेटा-विशेषता शब्दों में कहें, दोनों एक ही बार में जिम्मेदार बताते हैं के लिए खोज करने के लिए एक विकल्प है? मैंने कई विकल्पों की कोशिश की है लेकिन मुझे यह नहीं मिला है।

Answer 1

वहाँ नहीं यानी यह एक तत्व के लिए खोज करेंगे विशेषता data-period="current" जो data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" साथ एक तत्व के अंदर है,

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

अगर आप उन दोनों के बीच एक जगह देने के लिए यह एक descendant selector हो जाएगा 2 चयनकर्ताओं के बीच एक रिक्ति होना चाहिए जैसे चयनकर्ता में

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

Answer 2

अंतरिक्ष लग रहा है [data-period="current"] के लिए [data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] में है.आप विशेषता मान चयनकर्ता के बीच में खाली स्थान की जरूरत नहीं है:

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