CSSのid/class名のルールとそれにまつわるgetElementByIdとquerySelectorの動きの違い #JavaScript

idとclassの名前の先頭に数字は使えない

CSSのid/classの名前を数字から始めた場合そのid/classに対して記述したスタイルは適用されません

<DOCTYPE html>
<html>
<head>
    <style>
    #0id{
        color : red;
    }
    .0class{
        color : blue;
    }
    <style>
</head>
<body>
    <div id="0id">0id</div>
    <div class="0class">0class</div>
</body>
</html>

どちらの要素もスタイルは適用されません

識別子としては有効

スタイルは適用されませんが、JavaScriptから要素を取得する際の識別子としては先頭が数字でも動作します

<script>
    console.log( document.getElementById( '0id' ) );
    console.log( document.getElementsByClassName( '0class' ) );
</script>

結果

> <p id="0id">0id</p>           // getElementByIdの結果
> [p.0class, item: function]    // getElementsByClassNameの結果

要素が取得できてます

querySelectorだと…

<script>
    console.log( document.querySelector( '#0id' ) );
    console.log( document.querySelector( '.0class' ) );
</script>

結果

> Error: SyntaxError: DOM Exception 12
> Error: SyntaxError: DOM Exception 12

どちらもSyntaxErrorとなります。

querySelectorの場合、先頭が数字のセレクタを渡すとエラーが出るようです。

おわりに

「querySelector使えねーな！」ってことじゃなくて、id/class名の先頭に数字を使わないようにしようねという話です（当たり前なんですが)

なんでこんなことを書いたかというと、とあるノベルゲームのライブラリがid/classに先頭が数字の名前を振りまくってたからです。
JSで拡張機能的なのを書こうとしたらquerySelectorが使えなくてめんどくさかったです。

命名は計画的に。