L'utilisation de querySelector avec des Identifiants qui sont des nombres

Il est valide, mais nécessite une manutention spéciale. À partir d'ici: http://mathiasbynens.be/notes/css-escapes

Premiers chiffres

Si le premier caractère d'un identificateur numérique, vous aurez besoin de s'échapper sur la base de son point de code Unicode. Par exemple, le point de code pour le caractère 1 est U+0031, donc vous échapper que \000031 ou \31 .

Fondamentalement, pour échapper à tout caractère numérique, juste préfixe avec \3 et ajouter un espace de caractères ( ). Yay Unicode!

De sorte que votre code constituerait (CSS d'abord, JS seconde):

#1  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\ ');

J'ai besoin d'une approche qui a été automatisé. Un récent changement signifiait l'id de valeurs utilisées ont été plus simple de caractères alphabétiques et inclus de nombres et de caractères spéciaux.

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

JS:

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

D'abord, c'est le cas d'échec:

JS:

const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";

HTML:

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

Et maintenant, à l'aide de CSS.escape:

JS:

const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";

HTML:

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

Voir comment il correctement les changements de montrer After, démontrant le sélecteur travaillé!