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.)
This question is related to
javascript
html
css-selectors
custom-data-attribute
selectors-api
You could use
var a = document.querySelector('a[data-a="1"]');
instead of
var a = document.querySelector('a[data-a=1]');
An example with variable (ES6):
const item = document.querySelector([data-itemid="${id}"]);
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}"`]
Yes strings must be quoted and in some cases like in applescript, quotes must be escaped
do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"
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.
Source: Stackoverflow.com