17159


以下のような（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`
は意味のある値なのでしょうか？


CC BY-SA 3.0
2015-10-01T19:23:09.150
17152
2015-10-02T00:27:47.667
2391
question
html google-chrome-devtools
DevToolsにおける無効なid属性のセレクタの扱い


31は16進数でASCIIコードの"1"ですね。  
<http://www9.plala.or.jp/sgwr-t/c_sub/ascii.html>

JavaScriptでは文字列リテラルで\xを使ってエスケープすると16進数の文字コードを指定できます。  
<http://www.tohoho-web.com/js/string.htm>

つまり '#\x31' であれば '#1' と同じ文字列となります。


CC BY-SA 3.0
2015-10-02T00:00:26.970
17155
2015-10-02T00:00:26.970
3416
17152
answer


まず、id属性値"1"は無効ではありません。  
<https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute>

CSSセレクタ `#\31` はそのままスタイルシートに書けばちゃんと動きます。"1" がエスケープされているのですね。  
ただし、`#\31` を JavaScript の文字列として書くには、`\` をエスケープする必要がありますから、`"#\\31"`
とする必要がありますね。

ざっと CSS の規格を眺めてみましたが、この場合に数値をエスケープする必要はなさそうなので、DevTools
の挙動は間違ってはいないもののちょっとおかしいですね。


CC BY-SA 3.0
2015-10-02T00:26:44.363
17158
2015-10-02T00:26:44.363
3475
17152
answer


「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]

で成功するはずです。


CC BY-SA 3.0
2015-10-02T00:27:47.667
17159
2015-10-02T00:27:47.667
3054
17152
answer