javascript - Usando querySelector con IDs que son números

Por lo que entiendo, la especificación de HTML5 te permite usar IDs que son números así.

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

Puedo acceder a estos bien usando getElementById pero no con querySelector. Si intento hacer lo siguiente, obtengo SyntaxError: DOM Exception 12 en la consola.

document.querySelector("#1")

Solo tengo curiosidad de por qué usar números como IDs no funciona con querySelector cuando la especificación de HTML5 dice que son válidos. He probado en varios navegadores.

Respuesta #1

Es válido, pero requiere un manejo especial. Desde aquí: http://mathiasbynens.be/notes/css-escapes

Dígitos iniciales

Si el primer carácter de un identificador es numérico, necesitarás escaparlo según su punto de código Unicode. Por ejemplo, el punto de código para el carácter 1 es U+0031, por lo que lo escaparías como \000031 o \31.

Básicamente, para escapar cualquier carácter numérico, solo prefíjalo con \3 y agregue un espacio ( ). ¡Yay Unicode!

Entonces tu código terminaría así (CSS primero, JS segundo):

#\31  {
    background: hotpink;
}

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

Respuesta #2

Porque aunque son válidos en la especificación de HTML5, no son válidos en CSS, que es lo que significa "query selector".

En su lugar, tendrías que hacer esto: document.querySelector("[id='1']"), lo cual es muy largo considerando que podrías darle un ID significativo como message1 o algo ;)

Respuesta #3

Necesitaba un enfoque que fuera automatizado. Un cambio reciente significaba que los valores de id utilizados ya no eran simples caracteres alfabéticos e incluían números y caracteres especiales.

Terminé usando CSS.escape: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

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

Primero, este es el caso fallido:

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

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

Y ahora usando CSS.escape:

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

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

Mira cómo cambia correctamente para mostrar After, ¡demostrando que el selector funcionó!