web-dev-qa-db-fra.com

Pourquoi le code JS "var a = document.querySelector ('a [data-a = 1]');" provoquer une erreur?

J'ai un élément dans le DOM:

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

Je souhaite obtenir cet élément via son attribut de données personnalisé HTML5 data-a. Alors j'écris les codes JS:

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

Mais ce code ne fonctionne pas et je reçois une erreur dans la console du navigateur. (J'ai testé Chrome et Firefox.)

Le code JS var a = document.querySelector('a[data-a=a]'); ne provoque pas d'erreur. Je pense donc que le problème est que l'API JS de HTML5 document.querySelector de HTML5 ne permet pas de rechercher la valeur numérique dans l'attribut de données personnalisées HTML5.

S'agit-il d'un problème de bogue d'implémentation de navigateur ou d'un problème de spécifications HTML5 pertinent pour document.querySelector?

Ensuite, j'ai testé les codes ci-dessous sur http://validator.w3.org/ :

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

Ils sont validés. Depuis ces codes HTML5 sont validés. Nous devrions pouvoir utiliser la JS API document.querySelector de HTML5 pour rechercher cet élément d'ancrage via son attribut de données personnalisé. Mais le fait est que je reçois une erreur.

La spécification HTML5 pour HTML5 JS API document.querySelector indique-t-elle que cette méthode ne peut pas rechercher un attribut personnalisé de données HTML5 avec une valeur numérique? (Une source de spécifications HTML5 est recherchée.)

javascripthtml5css-selectorscustom-data-attributeselectors-api
48
weilou

A partir de la spécification des sélecteurs :

Les valeurs d'attribut doivent être des identificateurs CSS ou des chaînes.

Les identifiants ne peuvent pas commencer par un nombre. Les chaînes doivent être citées.

1 n'est donc ni un identifiant valide ni une chaîne.

Utilisez "1" (qui est une chaîne) à la place.

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

Vous pourriez utiliser

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

au lieu de

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

Cela m’a pris un certain temps pour le découvrir, mais si vous avez un nombre stocké dans une variable, dites x et que vous voulez le sélectionner, utilisez 

document.querySelector('a[data-a= + CSS.escape(x) + ']').

Ceci est dû à certaines spécifications de nommage d'attributs avec lesquelles je ne suis pas encore très familier. J'espère que cela aidera quelqu'un.

0
Donat