Login/Register
Why does JS code "var a = document.querySelector('a[data-a=1]');" cause error?
Asked Answered
Solved javascripthtmlcss-selectorscustom-data-attributeselectors-api
N

6

102

I've an element in the DOM:

<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:

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.

Is this a problem of browser implementation bug or a problem of HTML5's spec relevant to 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.

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.)

Nisa answered 11/2, 2013 at 9:46 Comment(2)
when using CSS attribute selectors, the value should be wrapped in quotes, e.g. a[data-a="1"]. – Dissymmetry
querySelectorAll() is not an "HTML5 JS API". It has absolutely nothing to do with HTML5 whatsoever. – Bed
B
193

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.

Use "1" (which is a string) instead.

var a = document.querySelector('a[data-a="1"]');
Blunger answered 11/2, 2013 at 9:52 Comment(3)
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 – Gamp
Note, this can also be written as document.querySelector("a[data-a=\"1\"]");. – Detrimental
The clean way to use a variable here would be document.querySelector(a[data-a="${myVariable}"]); (SO might fuck with the formatting but i used backticks instead of " " ) – Chew
L
9

You could use

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

instead of

var a = document.querySelector('a[data-a=1]');
Liles answered 11/2, 2013 at 9:56 Comment(2)
it doesn't work without quote in firefox as of today – Hahn
It is what it is. – Astrogeology
J
3

Because you need parentheses around the value your looking for. So here : document.querySelector('a[data-a="1"]')

If you don't know in advance the value but is looking for it via variable you can use template literals :

Say we have divs with data-price

<div data-price="99">My okay price</div>
<div data-price="100">My too expensive price</div>

We want to find an element but with the number that someone chose (so we don't know it):

// User chose 99    
let chosenNumber = 99
document.querySelector(`[data-price="${chosenNumber}"]`)
Jungjungfrau answered 13/6, 2020 at 14:48 Comment(0)
F
-3

Yes strings must be quoted and in some cases like in applescript, quotes must be escaped

do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"
Ferment answered 11/12, 2017 at 14:36 Comment(0)
G
-3

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.

Geophagy answered 29/7, 2018 at 7:2 Comment(0)
W
-3

An example with variable (ES6):

const item = document.querySelector([data-itemid="${id}"]);

Wornout answered 24/2, 2020 at 16:59 Comment(1)
it's an incomplete answer, but i think it's not terrible enough to be downvoted. Note that everything is surrounded by backticks ` but this is recognized here as denoting text literal contents so it formatted everything within instead of displaying the backticks. document.querySelector(`[data-itemid="${id}"]`); – Ronn

© 2022 - 2024 — McMap. All rights reserved.