93 votes

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

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

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

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

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

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

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 ne prend pas en charge la recherche de la valeur numérique dans l'attribut de données personnalisé HTML5.

S'agit-il d'un problème d'implémentation du navigateur ou d'un problème de spécification de HTML5 relatif à document.querySelector ?

J'ai ensuite 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. Puisque ces codes HTML5 sont validés. Nous devrions pouvoir utiliser l'API JS de HTML5 document.querySelector pour rechercher cet élément d'ancrage via son attribut de données personnalisé. Mais le fait est que j'obtiens une erreur.

Est-ce que la spécification de HTML5 à l'API HTML5 JS document.querySelector dire que cette méthode ne peut pas rechercher un attribut personnalisé de données HTML5 avec une valeur numérique ? (Une source HTML5 spec est souhaitée).

-4voto

Oksana Points 1

Un exemple avec variable (ES6) :

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X