web-dev-qa-db-ja.com

querySelectorを数字であるIDとともに使用する

私が理解していることから、HTML5仕様では、このような数字であるIDを使用できます。

<div id="1"></div>
<div id="2"></div>

getElementByIdを使用してこれらにアクセスできますが、querySelectorでは使用できません。以下を実行しようとすると、コンソールにSyntaxError：DOM Exception 12が表示されます。

document.querySelector("#1")

HTMLの仕様でこれらが有効であると書かれているときに、IDとして数値を使用してもquerySelectorが機能しないのはなぜなのでしょうか。複数のブラウザを試しました。

javascripthtml5css-selectorsselectors-api
75
Berry Blue

有効ですが、特別な処理が必要です。ここから： http://mathiasbynens.be/notes/css-escapes

先頭の数字

識別子の最初の文字が数字の場合、Unicodeコードポイントに基づいてエスケープする必要があります。たとえば、文字1のコードポイントはU + 0031であるため、\ 000031または\ 31としてエスケープします。

基本的に、数字をエスケープするには、\ 3を接頭辞としてスペース文字（）を追加します。やったUnicode！

したがって、コードは次のようになります（CSSが最初、JSが次に）：

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');
88
Dennis

HTML5仕様では有効ですが、CSSでは有効ではないため、「queryselector」が意味するものです。

代わりに、これを行う必要があります：document.querySelector("[id='1']")。これは、message1または何かのような意味のあるIDを与えることができることを考えると、非常に時間がかかります。

67
Niet the Dark Absol

自動化されたアプローチが必要でした。最近の変更により、使用されたid値は単純なアルファベット文字ではなく、数字と特殊文字が含まれるようになりました。

私はCSS.escapeを使用することになりました： https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape

console.log(CSS.escape('1'));

まず、これは失敗したケースです。

const theId = "1";
document.querySelector(`#${theId}`);
const el = document.querySelector(`#${theId}`);
el.innerHTML = "After";
<div id="1">Before</div>

そして今、CSS.escapeを使用しています：

const theId = "1";
const el = document.querySelector(`#${CSS.escape(theId)}`);
el.innerHTML = "After";
<div id="1">Before</div>

Afterを表示するように正しく変更され、セレクターが機能したことを示しています。

4
Glavin001

W3Cドキュメントから 属性セレクター構文

属性値は、有効なCSS識別子または文字列でなければなりません。

したがって、数字または先行数字を含む英数字文字列は、有効な識別子としての資格がありません。

ID生成ユーティリティを使用して識別子を生成している場合は、先頭に数字の付いた英数字のIDになる可能性があります。

簡単な修正方法は、ジェネレータのSEEDから数字を省略するか（変更可能な場合）、または生成されたIDに常に文字列を追加することです。

0
vikash Mishra