[解決済み] IDが数字である場合のquerySelectorの使用について

質問

HTML5の仕様では、このような数値のIDを使用することができると理解しています。

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

これらへのアクセスは getElementById でアクセスできますが querySelector . もし私が次のようにしようとすると、次のようになります。 SyntaxError: DOM Exception 12 がコンソールに表示されます。

document.querySelector("#1")

なぜ数字をIDにするとうまくいかないのかが気になるところです querySelector と表示されるのはなぜでしょうか？ 複数のブラウザで試してみました。

どのように解決するのですか？

有効ですが、特別な処理が必要です。 ここから http://mathiasbynens.be/notes/css-escapes

先頭の数字

識別子の最初の文字が数字である場合、そのUnicodeコードポイントに基づいてエスケープする必要があります。例えば、1という文字のコードポイントはU+0031なので、" \000031" または "\31 ." とエスケープします。

基本的に、どんな数字もエスケープするには、その前に \3 を付けて、空白文字 ( ) を付ければいいのです。やったねUnicode!

つまり、あなたのコードは（CSSが先、JSが後）になってしまうのです。

#\31  {
    background: hotpink;
}

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