123

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

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

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

document.querySelector("#1")

querySelectorHTML5 仕様で数字が有効であると示されているのに、数字を ID として使用できない理由が気になります。複数のブラウザを試しました。

4

6 に答える 6

127

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

先頭の数字

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

基本的に、数字をエスケープするには、先頭に \3 を付け、空白文字 ( ) を追加します。ユニコードよ！

したがって、コードは次のようになります (CSS が最初、JS が 2 番目):

#\31  {
    background: hotpink;
}

document.getElementById('1');
document.querySelector('#\\31 ');
于 2013-11-30T22:11:11.423 に答える
110

HTML5 仕様では有効ですが、CSS では有効ではないため、「クエリセレクター」が意味します。

代わりに、次のようにする必要がありdocument.querySelector("[id='1']")ます:message1

于 2013-11-30T22:08:45.667 に答える
42

自動化されたアプローチが必要でした。最近の変更により、使用される 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セレクターが機能することを示して、それがどのように正しく show に変化するかを確認してください!

于 2018-11-22T03:56:22.733 に答える
3

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

属性値は、有効な CSS 識別子または文字列である必要があります。

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

識別子の生成に ID ジェネレーター ユーティリティを使用している場合、先頭に数字を含む英数字の ID になる可能性があります。

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

于 2019-08-21T19:57:03.863 に答える