DevToolsにおける無効なid属性のセレクタの扱い


以下のような（idが数値から始まっている）無効なid属性を含むページがあるとします。

[code]

    <div id="1">HELLO</div>
    
[/code]

このページ内でChrome DevToolsを起動して「Elements」→「Copy CSS Path」で要素のセレクタを抽出してみると `#\31`
という値がコピーされました。

試しにこの値を使って要素を参照してみるとエラーになります。

[code]

    > document.querySelector('#\31')
    ✗ Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#' is not a valid selector.
    
[/code]

もともと無効な属性を指定しているため意図しない動作であることは想像できるのですが、この場合に抽出されたセレクタ値 `#\31`
は意味のある値なのでしょうか？




「CSS エスケープ」などで調べてみて下さい。

id が数字で始まる場合は CSSセレクタにそのまま書けないのでエスケープする必要があります。  
`id="1"` ですと、1の文字コードが16進数で31なので `#\31` になります。  
後続の文字とは空白で区切ります。  
`id="123"` の場合、`#\31 23` です。後続の数字は許されているのでそのままです。

JavaScript の `document.querySelector('#\31')` が失敗したのは、JavaScript の文字列リテラルも `\`
でエスケープを行なうからです。  
文字列 `\31` を表現するには `'\\31'` としなければなりません。  
つまり、  

[code]

    document.querySelector("#\\31");
    
[/code]

で成功するはずです。




「CSS エスケープ」などで調べてみて下さい。

id が数字で始まる場合は CSSセレクタにそのまま書けないのでエスケープする必要があります。  
`id="1"` ですと、1の文字コードが16進数で31なので `#\31` になります。  
後続の文字とは空白で区切ります。  
`id="123"` の場合、`#\31 23` です。後続の数字は許されているのでそのままです。

JavaScript の `document.querySelector('#\31')` が失敗したのは、JavaScript の文字列リテラルも `\`
でエスケープを行なうからです。  
文字列 `\31` を表現するには `'\\31'` としなければなりません。  
つまり、  

[code]

    document.querySelector("#\\31");
    
[/code]

で成功するはずです。

