web-dev-qa-db-fra.com

Utilisation de querySelector avec des identifiants numériques

D'après ce que je comprends, les spécifications HTML5 vous permettent d'utiliser des identifiants comme des nombres.

<div id="1"></div>
<div id="2"></div>

Je peux accéder à ces amendes en utilisant getElementById mais pas avec querySelector. Si j'essaie, procédez comme suit: SyntaxError: DOM Exception 12 dans la console.

document.querySelector("#1")

Je suis juste curieux de savoir pourquoi utiliser des nombres comme identifiants ne fonctionne pas querySelector alors que les spécifications HTML5 indiquent que ceux-ci sont valides. J'ai essayé plusieurs navigateurs.

javascripthtml5css-selectorsselectors-api
75
Berry Blue

C'est valide, mais nécessite un traitement spécial. À partir d'ici: http://mathiasbynens.be/notes/css-escapes

Chiffres premiers

Si le premier caractère d’un identifiant est numérique, vous devrez l’échapper en fonction de son point de code Unicode. Par exemple, le point de code pour le caractère 1 est U + 0031, vous devriez donc l’échapper en tant que\000031 ou\31.

Fondamentalement, pour échapper à tout caractère numérique, préfixez-le avec\3 et ajoutez un caractère d'espacement (). Yay Unicode!

Donc votre code finirait par (CSS en premier, JS en second):

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');
88
Dennis

En effet, bien qu’elles soient valides dans la spécification HTML5, elles ne le sont pas en CSS, ce que signifie "requête sélecteur".

Au lieu de cela, vous devrez faire ceci: document.querySelector("[id='1']"), ce qui est très long compte tenu du fait que vous pouvez lui donner un significatif ID comme message1 ou quelque chose ;)

67
Niet the Dark Absol

J'avais besoin d'une approche automatisée. Une modification récente signifie que les valeurs id utilisées ne sont plus de simples caractères alphabétiques, mais des chiffres et des caractères spéciaux inclus.

J'ai fini par utiliser CSS.escape: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

console.log(CSS.escape('1'));

Premièrement, voici le cas qui a échoué:

const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";
<div id="1">Before</div>

Et maintenant, en utilisant CSS.escape:

const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";
<div id="1">Before</div>

Voyez comment cela change correctement pour montrer After, démontrant que le sélecteur a fonctionné!

4
Glavin001

D'après la documentation du W3C Syntaxe des sélecteurs d'attributs

Les valeurs d'attribut doivent être un identificateur CSS ou une chaîne valide.

Ainsi, les chiffres ou les chaînes alphanumériques avec le premier chiffre ne constituent pas un identificateur valide.

Si vous utilisez un utilitaire de génération d'identifiant pour générer un identifiant, vous pouvez vous retrouver avec des identifiants alphanumériques avec des chiffres en avance.

Une solution rapide consisterait à omettre les chiffres du SEED du générateur (s'il peut être modifié) ou à toujours ajouter une chaîne à l'id généré.

0
vikash Mishra