Why does JS code “var a = document.querySelector('a[data-a=1]');” cause error?
Multi tool use
Clash Royale CLAN TAG#URR8PPPWhy does JS code “var a = document.querySelector('a[data-a=1]');” cause error?
I've an element in the DOM:
<a href="#" data-a="1">Link</a>
<a href="#" data-a="1">Link</a>
I want to get this element via its HTML5 custom data attribute data-a. So I write JS codes:
data-a
var a = document.querySelector('a[data-a=1]');
var a = document.querySelector('a[data-a=1]');
But this code doesn't work and I get an error in browser's console. (I tested Chrome and Firefox.)
JS code var a = document.querySelector('a[data-a=a]'); doesn't cause error. So I think the problem is that HTML5's JS API document.querySelector doesn't support to look for the number value in HTML5 custom data attribute.
var a = document.querySelector('a[data-a=a]');
document.querySelector
Is this a problem of browser implementation bug or a problem of HTML5's spec relevant to document.querySelector?
document.querySelector
Then I tested codes below on http://validator.w3.org/:
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<a href="#" data-a="1">Link</a>
They're validated. Since these HTML5 codes are validated. We should can use HTML5's JS API document.querySelector to look for this anchor element via its custom data attribute. But tha fact is that I get error.
document.querySelector
Does HTML5's spec to HTML5 JS API document.querySelector say that this method can not look for an HTML5 data custom attribute with a number value? (An HTML5 spec source is wanted.)
document.querySelector
a[data-a="1"]
querySelectorAll() is not an "HTML5 JS API". It has absolutely nothing to do with HTML5 whatsoever.– BoltClock♦
Jul 20 '13 at 12:24
querySelectorAll()
4 Answers
4
From the selectors specification:
Attribute values must be CSS identifiers or strings.
Identifiers cannot start with a number. Strings must be quoted.
1 is therefore neither a valid identifier nor a string.
1
Use "1" (which is a string) instead.
"1"
var a = document.querySelector('a[data-a="1"]');
and if your number is stored in a variable eg var dataId = 5; then it should be written out this way document.querySelector("a[data-a='"+dataId+"']"); this answer helped but I had trouble with the quotes for a bit hope this helps someone
– James Daly
Jul 28 '14 at 22:45
You could use
var a = document.querySelector('a[data-a="1"]');
instead of
var a = document.querySelector('a[data-a=1]');
Took me a while to find this out but if you a number stored in a variable, say x and you want to select it, use
document.querySelector('a[data-a= + CSS.escape(x) + ']').
This is due to some attribute naming specifications that I'm not yet very familiar with. Hope this will help someone.
Yes strings must be quoted and in some cases like in applescript, quotes must be escaped
do JavaScript "document.querySelector('span[" & attrName & "="" & attrValue & ""]').click();"
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
when using CSS attribute selectors, the value should be wrapped in quotes, e.g.
a[data-a="1"].– Eliran Malka
Feb 11 '13 at 9:53