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

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

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

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

document.querySelector("#1")

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

Это верно, но требует особого обращения. Отсюда: http://mathiasbynens.be/notes/css-escapes

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

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

В основном, чтобы избежать любого числового символа, просто добавьте к нему префикс \ 3 и добавьте пробел (). Ура Юникод!

Таким образом, ваш код будет выглядеть следующим образом (сначала CSS, затем JS):

#\31  {
    background: hotpink;
}

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

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

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

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

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

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

Во-первых, это неудачный случай:

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

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

А теперь используя CSS.escape:

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

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

Посмотрите, как он правильно меняется, чтобы показать After, демонстрируя, что селектор работает!

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

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

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

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

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

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

Перед использованием передайте селектор через эту функцию cleanSelector:

var cleanSelector = function(selector){
    (selector.match(/(#[0-9][^\s:,]*)/g) || []).forEach(function(n){
        selector = selector.replace(n, '[id="' + n.replace("#", "") + '"]');
    });
    return selector;
};

var myselector = ".dog #980sada_as div span#aside:hover div.apple#05crab:nth-of-type(2), .ginger #2_green_div, div.cupcake #darwin p#23434-346365-53453";

var clean_myselector = cleanSelector(myselector);

// print to show difference
console.log(myselector);
console.log(clean_myselector);

//use the new selector like normal
var elems = document.querySelectorAll( clean_myselector );