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

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

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

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

document.querySelector("#1")

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

2 60
javascript html5 css-selectors selectors-api

2 ответа:

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

цифры

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

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

Так что ваш код будет в конечном итоге как (CSS во-первых, JS во-вторых):

#  {
    background: hotpink;
}

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

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

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

49