質問: 以下のような(idが数値から始まっている)無効なid属性を含むページがあるとします。 ``` HELLO ``` このページ内でChrome DevToolsを起動して「Elements」→「Copy CSS Path」で要素のセレクタを抽出してみると `#\31` という値がコピーされました。 試しにこの値を使って要素を参照してみるとエラーになります。 ``` > document.querySelector('#\31') ✗ Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#' is not a valid selector. ``` もともと無効な属性を指定しているため意図しない動作であることは想像できるのですが、この場合に抽出されたセレクタ値 `#\31` は意味のある値なのでしょうか?
回答: まず、id属性値"1"は無効ではありません。 CSSセレクタ `#\31` はそのままスタイルシートに書けばちゃんと動きます。"1" がエスケープされているのですね。 ただし、`#\31` を JavaScript の文字列として書くには、`\` をエスケープする必要がありますから、`"#\\31"` とする必要がありますね。 ざっと CSS の規格を眺めてみましたが、この場合に数値をエスケープする必要はなさそうなので、DevTools の挙動は間違ってはいないもののちょっとおかしいですね。