querySelectorで先頭が数値で、URLエンコードされたIDの取得はできないの？

Question

このような要素があり、querySelectorで取得したいのですが、

<p id="1-%83Z%83%8C%83N%83%5E%82%CC%83e%83X%83g">1-セレクタのテスト</p>

getElementByIdでは取得できました。

document.getElementById('1-%83Z%83%8C%83N%83%5E%82%CC%83e%83X%83g')

IDの最初の文字が数値の場合、そのUnicodeコードポイントに基づいてエスケープする必要があるそうなので

document.querySelector("#"+CSS.escape(1)+"1-%83Z%83%8C%83N%83%5E%82%CC%83e%83X%83g".substr(1));

としても通らず

document.querySelector('[id="1-%83Z%83%8C%83N%83%5E%82%CC%83e%83X%83g"]');

こちらならなんとか取得可能でした。
querySelectorを使いつつ、タイプセレクタを使わない方法はないのでしょうか？

Answer 1

そのまま入れたらいいかと思います。

document.querySelector('#' + CSS.escape('1-%83Z%83%8C%83N%83%5E%82%CC%83e%83X%83g'))

Answer 2

document.querySelector("#"+CSS.escape("1-%83Z%83%8C%83N%83%5E%82%CC%83e%83X%83g"));

間違った情報に踊らされていただけで、全部の文字をCSSエスケープすればよかったようです。

お騒がせいたしました。

Comments

[otn]

別に間違った情報ではないでしょう。
「IDの最初の文字が数値の場合」だけでなく「IDに%等の記号が含まれる場合」も調べないといけなかったということです。

Answer 3

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector
によれば

標準の CSS 構文に基づかない ID またはセレクター（例えば、コロンやスペースを不適切に使用している）でマッチさせるためには、バックスラッシュ ("") でその文字をエスケープしなければなりません。JavaScript ではバックスラッシュもまたエスケープ文字であり、文字列リテラルを入力する場合、それを 2 回エスケープする必要があります（1 回目は JavaScript の文字列のため、2 回目は querySelector() のため）。

なので、全体をエスケープすれば良い・・・というのがx_xさんの御指摘です.

---

NOTE: コードを見落としていたので、回答を取り下げます.

1が余計じゃね？

document.querySelector("#"+CSS.escape(1)+"-%83Z%83%8C%83N%83%5E%82%CC%83e%83X%83g".substr(1));

Comments

[misak1]

.substr(1)しているので2文字目以降の文字列を使っています

[defghi1977]

ああ、見てなかったすみません.