[{"data":1,"prerenderedAt":166},["ShallowReactive",2],{"article-queryselector-error-with-numeric":3},{"id":4,"title":5,"body":6,"category":153,"createdAt":155,"description":5,"extension":156,"index":157,"meta":158,"navigation":159,"path":160,"publish":159,"seo":161,"series":157,"seriesTitle":157,"stem":162,"tag":163,"thumbnail":157,"updatedAt":157,"__hash__":165},"articles\u002Farticles\u002Fqueryselector-error-with-numeric.md","Document.querySelector() で先頭が数字のIDを指定するとエラーが起きる。",{"type":7,"value":8,"toc":150},"minimark",[9,30,36,87,93,102,110,116,133,146],[10,11,12,13,17,18,21,22,25,26,29],"p",{},"こんにちはjunです。最近、editor.jsだったり色々バニラJSを触る機会がありました。特定のNodeを取得する時に",[14,15,16],"code",{},"document.querySelector()","を使用することでCSS・jqueryライクに要素を取得できます。今回はIDを持つ要素を",[14,19,20],{},"getByElementId()","を使わず、",[14,23,24],{},"querySelector()","を用いて",[14,27,28],{},"querySelector(\"#~~~\")","と取得した時に遭遇したエラーについてです。",[10,31,32,33,35],{},"タイトルの通りなのですが、",[14,34,24],{},"で先頭が数字のIDを指定するとエラーが起きます。",[37,38,43],"pre",{"className":39,"code":40,"language":41,"meta":42,"style":42},"language-js shiki shiki-themes material-theme-ocean","document.querySelector(\"#16test\");\n\u002F\u002F VM490:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#16test' is not a valid selector.\n","js","",[14,44,45,80],{"__ignoreMap":42},[46,47,50,54,58,62,65,68,72,74,77],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"s0W1g","document",[46,55,57],{"class":56},"sAklC",".",[46,59,61],{"class":60},"sdLwU","querySelector",[46,63,64],{"class":52},"(",[46,66,67],{"class":56},"\"",[46,69,71],{"class":70},"sfyAc","#16test",[46,73,67],{"class":56},[46,75,76],{"class":52},")",[46,78,79],{"class":56},";\n",[46,81,83],{"class":48,"line":82},2,[46,84,86],{"class":85},"sC9rS","\u002F\u002F VM490:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#16test' is not a valid selector.\n",[10,88,89,90,92],{},"簡単にコンソールでチェックできます。「not a valid selector」の通り、有効なセレクタじゃないよと怒っています。なぜこんなことが起きるのかを調べたところ、",[14,91,24],{},"はCSSセレクタの仕様を使っており、CSSのIDセレクタは「#の後に数字をつけてはいけない」という仕様があるからです。",[10,94,95,96],{},"Stackoverflow\n",[97,98,99],"a",{"href":99,"rel":100},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F37270787\u002Funcaught-syntaxerror-failed-to-execute-queryselector-on-document",[101],"nofollow",[10,103,104,105],{},"上記のStackoverflowの回答が役に立ちました。HTML5の仕様としてはIDの最初の文字に数字を入れることは問題ありません。しかしCSS3のIDセレクタの仕様ではなんと、#のあとに数字を使用してはいけないと確かに書かれています。",[97,106,109],{"href":107,"rel":108},"https:\u002F\u002Fwww.w3.org\u002FTR\u002FCSS2\u002Fsyndata.html#characters",[101],"詳細はW3Cのこちらのページにあります。",[111,112,113],"blockquote",{},[10,114,115],{},"they cannot start with a digit, two hyphens, or a hyphen followed by a digit.",[10,117,118,119,122,123,125,126,128,129,132],{},"第一の解決策は",[14,120,121],{},"getElementById()","を使うことです。そう思うと、本来DOMにIDを持つ要素は必ず一つなので",[14,124,121],{},"を使えばいいのに、なんで",[14,127,24],{},"を使っていたんだろうか？と思っていたら、ランダムに生成したIDをもつ要素配下のある子要素を取得する処理を実装する際、",[14,130,131],{},"querySelector(`#{id} .item`)","みたいな感じで実装してた時でした。",[10,134,135,136,139,140,142,143,145],{},"この場合ランダムに生成されるIDに数字が含まれないようにするか、",[14,137,138],{},"getElementById(id)?.querySelector(\".item\")","として一旦",[14,141,121],{},"を使ってから",[14,144,24],{},"を使うといいかなと思います。",[147,148,149],"style",{},"html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":42,"searchDepth":151,"depth":151,"links":152},3,[],[154],"ministack","2022-11-23","md",null,{},true,"\u002Farticles\u002Fqueryselector-error-with-numeric",{"title":5,"description":5},"articles\u002Fqueryselector-error-with-numeric",[164,41],"html","-tKJHB-rOhRzOw2x_oCwOadM10j-DEzx-pvkwNQqzxA",1780987142981]