11.02.2025

A Impossibilidade de Usar Números como IDs no querySelector

Resumo Rápido

Se você precisa selecionar elementos com IDs numéricos, há duas opções para usar querySelector:

document.querySelector('#\\31 23');  // Escape cada dígito
document.querySelector('[id="123"]');  // Acesse o atributo, simplificando a seleção

Explicação sobre Escape no CSS

Quando se trata de IDs numéricos, precisamos usar o escape no CSS. Colocamos \\3 antes de cada dígito, seguido por um espaço. Este método ajuda a renderizar o caractere corretamente em formato Unicode.

Existem Métodos Mais Simples?

Se a ideia de usar CSS está te dando dor de cabeça, você sempre pode usar o método getElementById:

document.getElementById('123');

No entanto, se manter a consistência dos seletores é importante para você, querySelector será a melhor escolha.

Seletores de Atributo para Salvar o Dia

Quando surgem desafios com IDs numéricos, os seletores de atributo podem te guiar para uma solução:

document.querySelector('[id="123"]');

Essa pode ser, sem dúvida, uma jogada inteligente.

Visualização

Uma demonstração clara de como trabalhar com nomes e IDs numéricos:

Robô 123: 🤖🔢
Robô Alpha: 🤖✨

Tentar aplicar um ID numérico leva a um erro:

document.querySelector('#123');  // Incorreto! Isso é um erro de sintaxe! 🚫💥

Mas ao usar o escape, tudo funciona perfeitamente:

document.querySelector('#\\31 23');  // Uhuul! Funciona! ✅📞

A Atenção aos Detalhes: Regras para Nomear IDs

HTML5 permite IDs numéricos, mas CSS exige uma abordagem especial. Que tal adicionar um prefixo descritivo para facilitar a compreensão do código?

document.querySelector('#mensagem123');

IDs assim são muito mais fáceis de ler e entender.

Compatibilidade Entre Navegadores: Não é Hora de Relaxar

Parece natural usar a função CSS.escape; no entanto, ela não é suportada por todos os navegadores:

const escapedId = CSS.escape('123');
document.querySelector(`#${escapedId}`);

É essencial sempre ter em mente a compatibilidade entre diferentes navegadores.

Automação do Escape — Uma Função em que Você Pode Confiar

Não há necessidade de reinventar a roda a cada nova tarefa. Um ajudante confiável pode ser a função cleanSelector:

function cleanSelector(id) {
  return id.replace(/([0-9])/g, '\\3$1 ');
}
document.querySelector(`#${cleanSelector('123')}`);

Agora, independentemente das circunstâncias, você poderá enfrentar a tarefa com facilidade!

Recursos Úteis

1. Método Document: querySelector() - Web API | MDN – Descrição detalhada sobre o uso de querySelector em JavaScript.
2. IDs Não Podem Começar com um Número | CSS-Tricks – Exame do problema com IDs numéricos.
3. Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document' – Análise e soluções para erros relacionados ao querySelector.
4. Padrão HTML – Informações detalhadas sobre o uso do atributo ID em HTML.
5. Seletores de Nível 3 – Recomendações oficiais do W3C sobre seletores de ID.
6. JSFiddle - Um Playground para Experimentos com Código – Um ótimo lugar para aplicação prática e testes de seletores.

Video

Navigation