Menu
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.)
220
querySelector() The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
querySelector() returns the first element that matches the selector. q uerySelectorAll() returns an array of DOM Elements. Call these methods differently depending on whether you want to access elements the component owns or access elements passed via slots.
Use the querySelector method to get an element by data attribute, e.g. document. querySelector('[data-id="box1"]') . The querySelector method returns the first element that matches the provided selector or null if no element matches the selector in the document. Here is the HTML for the examples in this article.
The other alternative is element. query / queryAll . These are alternative methods to querySelector and querySelectorAll that exist on DOM parent nodes. They also take selectors, except these selectors are interpreted relative to the element being queried from.
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"]'); You could use
var a = document.querySelector('a[data-a="1"]'); instead of
var a = document.querySelector('a[data-a=1]'); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
