Невозможность использования чисел как ID в querySelector

Быстрый ответ

Если вам нужно выбрать элементы с числовыми идентификаторами, вам предоставляются два варианта применения querySelector:

document.querySelector('#\\31 23');  // Экранирование каждой цифры
document.querySelector('[id="123"]');  // Обращение к атрибуту, упростив выборку

Объяснение принципа экранирования в CSS

В контексте числовых идентификаторов нам приходится использовать экранирование в CSS. Мы ставим \\3 перед каждой цифрой, а за ней – пробел. Этот подход помогает корректно отобразить символ в формате Unicode.

Есть ли способы проще?

Если мысль о CSS заставляет вас голову ломать, вы всегда можете использовать метод getElementById:

document.getElementById('123');

Тем не менее, если вам важно поддерживать консистентность селекторов, метод querySelector станет для вас наилучшим выбором.

Атрибуты-селекторы приходят на помощь

Когда возникают трудности при работе с числовыми идентификаторами, атрибуты-селекторы способны вам подсказать решение:

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

Безусловно, это может стать вашим умным ходом.

Визуализация

Наглядная демонстрация работы с именами и числовыми идентификаторами:

Робот 123: 🤖🔢 Робот альфа: 🤖✨

Попытка применить числовой идентификатор приводит к ошибке:

document.querySelector('#123');  // Неверно! Это синтаксическая ошибка! 🚫💥

Но при использовании экранирования всё проходит как по маслу:

document.querySelector('#\\31 23');  // Ура! Получилось! ✅📞

Бог в деталях: правила именования идентификаторов

HTML5 разрешает использовать числовые идентификаторы, но в CSS они требуют особого подхода. Почему бы не добавить описательный префикс для упрощения понимания кода?

document.querySelector('#message123');

Такие идентификаторы куда проще читать и воспринимать.

Кроссбраузерность: не время для расслабления

Вполне естественно казалось бы использовать функцию CSS.escape, однако она не поддерживается всеми браузерами:

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

Важно всегда иметь в виду совместимость с разными браузерами.

Автоматизация экранирования — функция, на которую вы можете положиться

Не стоит изобретать велосипед для каждой новой задачи. Вашей надежной поддержкой может стать функция cleanSelector:

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

Теперь независимо от обстоятельств вы сможете с лихвой справиться с задачей!

Полезные материалы

1. Метод Document: querySelector() – Веб-API | MDN – подробное описание использования querySelector в JavaScript.
2. ID не могут начинаться с цифры | CSS-Tricks – рассмотрение проблемы числовых идентификаторов.
3. Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document' – анализ и решение ошибок, связанных с применением querySelector.
4. HTML-стандарт – подробная информация об использовании атрибута id в HTML.
5. Селекторы уровня 3 – официальные рекомендации W3C по селекторам идентификаторов.
6. JSFiddle – площадка для экспериментов с кодом – отличное место для практического применения и тестирования селекторов.