37

मैं डोम में एक तत्व है:जेएस कोड "var a = document.querySelector ('a [data-a = 1]') क्यों है;" त्रुटि का कारण बनता है?

<a href="#" data-a="1">Link</a>

मैं के माध्यम से अपने एचटीएमएल 5 कस्टम डेटा का श्रेय data-a इस तत्व प्राप्त करना चाहते हैं। तो मैं लिखने जे एस कोड:

var a = document.querySelector('a[data-a=1]');

लेकिन इस कोड काम नहीं करता और मैं ब्राउज़र के कंसोल में कोई त्रुटि मिलती है। (मैं Chrome और Firefox का परीक्षण किया।)

जे एस कोड var a = document.querySelector('a[data-a=a]'); त्रुटि का कारण नहीं है। तो मुझे लगता है कि समस्या यह है कि एचटीएमएल 5 के जेएस एपीआई document.querySelector एचटीएमएल 5 कस्टम डेटा विशेषता में संख्या मान देखने के लिए समर्थन नहीं करता है।

इस या ब्राउज़र कार्यान्वयन बग की एक समस्या document.querySelector के लिए प्रासंगिक एचटीएमएल 5 के कल्पना की एक समस्या है?

तब मैं http://validator.w3.org/ पर नीचे कोड का परीक्षण किया:

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title>An HTML Document</title> 
<a href="#" data-a="1">Link</a> 

वे मान्य कर रहे हैं। चूंकि ये एचटीएमएल 5 कोड मान्य हैं। हमें अपने कस्टम डेटा विशेषता के माध्यम से इस एंकर तत्व को देखने के लिए HTML5 के JS API document.querySelector का उपयोग करना चाहिए। लेकिन तथ्य यह है कि मुझे त्रुटि मिलती है।

एचटीएमएल 5 जे एस एपीआई document.querySelector को एचटीएमएल 5 के कल्पना का कहना है कि यह है कि इस विधि एक नंबर मूल्य वाला एक HTML5 डेटा कस्टम विशेषता के लिए देखो नहीं कर सकते? (एक एचटीएमएल 5 कल्पना स्रोत की तलाश है।)

+4

जब फरार हो जाना चाहिए [सीएसएस विशेषता चयनकर्ताओं का उपयोग] [http: //www.blo oberry.com/indexdot/css/syntax/selectors/attribute.htm), मान उद्धरणों में लपेटा जाना चाहिए, उदा। 'एक [डेटा-एक =" 1 "]'। –

+2

'querySelectorAll()' एक "HTML5 जेएस एपीआई" नहीं है। एचटीएमएल 5 के साथ ऐसा करने के लिए बिल्कुल कुछ नहीं है। – BoltClock

उत्तर

62

the selectors specification से:

विशेषता मान सीएसएस पहचानकर्ता या तार होना चाहिए।

पहचानकर्ता संख्या से शुरू नहीं कर सकते हैं। स्ट्रिंग्स उद्धृत किया जाना चाहिए। इसलिए

1 न एक वैध पहचानकर्ता है और न ही एक श्रृंखला है।

उपयोग "1" (जो एक स्ट्रिंग है) के बजाय।

var a = document.querySelector('a[data-a="1"]'); 
+3

और अपना नंबर एक चर जैसे वर dataId = 5 में संग्रहीत किया जाता है; तो इसे दस्तावेज़ से इस तरह लिखा जाना चाहिए।querySelector ("एक [डेटा-एक = '' + dataId + '']"); इस उत्तर में मदद मिली लेकिन मुझे थोड़ी उम्मीद के लिए उद्धरणों में परेशानी थी, इससे किसी की मदद मिलती है –

6

आप

var a = document.querySelector('a[data-a="1"]'); 
बजाय

var a = document.querySelector('a[data-a=1]'); 
0

इस्तेमाल कर सकते हैं हाँ तार उद्धृत किया जाना चाहिए और applescript में की तरह कुछ मामलों में, उद्धरण

do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"