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

Question

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

Demandé el 11 de Février, 2013: Quand la question a-t-elle été
154557 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

Demandé el 11 de Février, 2013 par weilou

Answer 1

5 Réponses

Answer 2

178voto

Quentin Points 325526

De la spécification des sélecteurs :

Les valeurs des attributs doivent être des identificateurs CSS ou des chaînes de caractères.

Les identificateurs ne peuvent pas commencer par un chiffre. Les chaînes de caractères doivent être citées.

1 n'est donc ni un identifiant valide ni une chaîne de caractères.

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

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

Répondu el 11 de Février, 2013 par Quentin (325526 Points )

Answer 3

7voto

Nikita Points 328

Vous pourriez utiliser

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

au lieu de

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

Répondu el 11 de Février, 2013 par Nikita (328 Points )

Answer 4

2voto

Earth_Believer Points 189

Parce que vous avez besoin de parenthèses autour de la valeur que vous recherchez. Donc ici : document.querySelector('a[data-a="1"]')

Si vous ne connaissez pas à l'avance la valeur mais que vous la recherchez via une variable, vous pouvez utiliser des littéraux de modèle :

Disons que nous avons des divs avec des data-price

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

Nous voulons trouver un élément mais avec le numéro que quelqu'un a choisi (donc nous ne le connaissons pas) :

// User chose 99    
let chosenNumber = 99
document.querySelector(`[data-price="${chosenNumber}"]`)

Répondu el 13 de Juin, 2020 par Earth_Believer (189 Points )

Answer 5

-3voto

vhanahrni Points 79

Oui, les chaînes de caractères doivent être citées et dans certains cas, comme en applescript, les guillemets doivent être échappés.

do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"

Répondu el 11 de Décembre, 2017 par vhanahrni (79 Points )

Answer 6

-3voto

Donat Points 71

J'ai mis du temps à le découvrir, mais si vous avez un nombre stocké dans une variable, par exemple x, et que vous voulez le sélectionner, utilisez la commande suivante

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

Cela est dû à certaines spécifications de dénomination des attributs avec lesquelles je ne suis pas encore très familier. J'espère que cela pourra aider quelqu'un.

Répondu el 29 de Juillet, 2018 par Donat (71 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: