Использование querySelector с идентификаторами, которые являются числами

Из того, что я понимаю, спецификация HTML5 позволяет использовать идентификаторы, такие как цифры.

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

Я могу получить доступ к ним с помощью getElementById, но не с querySelector. Если я попробую сделать следующее, я получаю SyntaxError: DOM Exception 12 в консоли.

document.querySelector("#1")

Мне просто интересно, почему использование чисел в качестве идентификаторов не работает querySelector, когда спецификация HTML5 говорит, что они действительны. Я попробовал несколько браузеров.

Ответ 1

Это действительно, но требует некоторой специальной обработки. Отсюда: http://mathiasbynens.be/notes/css-escapes

Ведущие цифры

Если первый символ идентификатора является числовым, вам нужно его избежать, основываясь на его кодовой точке Юникода. Например, кодовая точка для символа 1 равна U + 0031, поэтому вы можете избежать ее как \000031 или\31.

В принципе, чтобы избежать любого числового символа, просто префикс его с помощью \3 и добавьте пробельный символ(). Yay Unicode!

Итак, ваш код будет выглядеть как (сначала CSS, JS второй):

#\31  {
    background: hotpink;
}

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

Ответ 2

Поскольку они действительны в спецификации HTML5, они недействительны в CSS, что означает "селектор запросов".

Вместо этого вам нужно будет сделать это: document.querySelector("[id='1']"), который очень длинный, учитывая, что вы могли бы дать ему значимый идентификатор, например message1 или что-то;)

Ответ 3

Мне нужен был подход, который был автоматизирован. Недавнее изменение означало, что используемые значения идентификаторов больше не были простыми буквенными символами и включали цифры и специальные символы.

В итоге я использовал CSS.escape: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

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

Ответ 4

Из документации WaC Синтаксис селекторов атрибутов

Значения атрибута должны быть действительными идентификаторами CSS или строкой.

Таким образом, цифры или буквенно-цифровые строки с первой цифрой не могут считаться действительным идентификатором.

Если вы используете утилиту для генерации идентификатора, вы можете получить буквенно-цифровые идентификаторы с начальными цифрами.

Быстрое решение состоит в том, чтобы либо пропустить цифры из SEED генератора (если это можно изменить), либо всегда добавлять строку к сгенерированному идентификатору.