id
HTML要素の属性を作成する場合、値にはどのような規則がありますか?
**.**)
jQuery を使用するとかなりの問題が発生します。たとえば、jQueryを使用する<input id="me.name" />
と、$("#me.name").val()
jQuery <me>
がクラスのタグを検索しますが、.name
誰も望んでいません。本当に!
id
HTML要素の属性を作成する場合、値にはどのような規則がありますか?
**.**)
jQuery を使用するとかなりの問題が発生します。たとえば、jQueryを使用する<input id="me.name" />
と、$("#me.name").val()
jQuery <me>
がクラスのタグを検索しますが、.name
誰も望んでいません。本当に!
回答:
以下のためにHTML 4、答えは技術的には次のとおりです。
IDトークンとNAMEトークンは文字([A-Za-z])で始まり、その後に任意の数の文字、数字([0-9])、ハイフン( "-")、アンダースコア( "_")を続けることができます、コロン( ":")、およびピリオド( "。")。
HTML 5はさらに許容度が高く、IDには少なくとも1つの文字を含める必要があり、スペース文字を含めることはできません。
純粋に実用的な問題として、特定の文字を避けたい場合があります。ピリオド、コロン、 '#'はCSSセレクターで特別な意味を持つため、CSSのバックスラッシュまたはjQueryに渡されるセレクター文字列のダブルバックスラッシュを使用して、これらの文字をエスケープする必要があります。IDにピリオドとコロンを使用する前に、スタイルシートまたはコードで文字をエスケープする必要がある頻度を考えてください。
たとえば、HTML宣言<div id="first.name"></div>
は有効です。次の#first\.name
ように、CSS やjQuery でその要素を選択できます。$('#first\\.name').
ただし、バックスラッシュを忘れた場合$('#first.name')
は、id first
を持つ要素を探し、クラスも持つ完全に有効なセレクターができますname
。これは見落としやすいバグです。first-name
代わりに、長い目で見れば、ID (ピリオドではなくハイフン)を選択する方が幸せかもしれません。
命名規則に厳密に従うことにより、開発タスクを簡略化できます。たとえば、完全に小文字に限定し、常に単語をハイフンまたはアンダースコアで区切っている場合(両方ではなく、一方を選択し、もう一方を使用しないこと)、覚えやすいパターンになります。「それだったのfirstName
かFirstName
?」入力する必要があることを常に知っているからですfirst_name
。キャメルケースが好きですか?次に、ハイフンやアンダースコアを使用しないでください。常に、最初の文字に大文字または小文字を常に使用し、それらを混在させないでください。
現在、非常にあいまいな問題は、少なくとも1つのブラウザー、Netscape 6がid属性値を大文字と小文字を区別するものとして誤って処理することでした。つまりid="firstName"
、HTML(小文字の「f」)と#FirstName { color: red }
CSS(大文字の「F」)を入力した場合、バグのあるブラウザは要素の色を赤に設定できませんでした。この編集の時点で、2015年4月に、Netscape 6をサポートするように求められていないことを願っています。これは歴史的な脚注と考えてください。
id
属性は、[さw3.org/TR/html4/struct/global.html#adef-id](case HTML4に敏感)とZにAに限定文字()で開始しなければなりません。また、CSSはのクラスでFirstName
はない要素を参照するため、例では要素のテキストの色を赤にしないでくださいid
。
id="firstName"
は、HTML 4またはHTML 5のいずれかと#FirstName { color: red }
CSSを使用している場合、バグのあるブラウザのみが要素の色を赤に設定します。
IDトークンとNAMEトークンは文字([A-Za-z])で始まり、その後に任意の数の文字、数字([0-9])、ハイフン( "-")、アンダースコア( "_")を続けることができます、コロン( ":")、およびピリオド( "。")。
よくある間違いは、数字で始まるIDを使用することです。
技術的には、id / name属性でコロンとピリオドを使用できますが、両方を避けることを強くお勧めします。
CSS(およびjQueryのようないくつかのJavaScriptライブラリ)では、ピリオドとコロンの両方に特別な意味があり、注意しないと問題が発生します。ピリオドはクラスセレクターであり、コロンは疑似セレクターです(たとえば、要素の上にマウスを置いたときの「:hover」)。
要素にID "my.cool:thing"を指定すると、CSSセレクターは次のようになります。
#my.cool:thing { ... /* some rules */ ... }
これは、CSSで言うと、「IDが「my」で、クラスが「cool」で、「thing」の疑似セレクターを持つ要素」ということです。
大文字、小文字、数字、アンダースコア、ハイフンはAZのままにします。上記のように、IDが一意であることを確認してください。
それはあなたの最初の懸念であるべきです。
.
、:
)がIDにあり、それらを削除できない場合(咳... Sharepoint)、CSSでこれを回避するには、IDセレクターの代わりに属性セレクターを使用します。たとえば[id='my.cool:thing']
、このセレクターは、 idセレクター。他の問題を引き起こす可能性があります。
jQuery は有効なID名を処理します。メタ文字(つまり、ドット、セミコロン、角括弧...)をエスケープする必要があるだけです。それはあなたが書くことができないという理由だけでJavaScriptが引用符に問題があると言っているようなものです
var name = 'O'Hara';
id属性に対する追加の制限を取り除きます。ここを参照してください。(ドキュメント内で一意であることを除いて)残っている要件は次のとおりです。
IDは一致する必要があります:
[A-Za-z][-A-Za-z0-9_:.]*
-
(ハイフン)、_
(アンダースコア)、:
(コロン)、.
(ピリオド)を含めることができますしかし、1つは避け:
て.
次のようにすべきです。
たとえば、IDには「ab:c」というラベルを付け、スタイルシートで#ab:cとして参照できますが、要素のIDであるだけでなく、ID「a」、クラス「b」、疑似セレクター「c」。混乱を避け、の使用を避けてください。と:完全に。
HTML5の時点で、IDの値に対する唯一の制限は次のとおりです。
同様のルールがクラスに適用されます(もちろん、一意性を除きます)。
したがって、値はすべて数字、1桁だけ、句読点文字、特殊文字を含むことができます。空白はありません。これはHTML4とは大きく異なります。
HTML 4では、ID値は文字で始まる必要があり、その後に文字、数字、ハイフン、アンダースコア、コロン、ピリオドのみを続けることができます。
HTML5では、これらは有効です。
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>
IDの値に数字、句読点、または特殊文字を使用すると、他のコンテキスト(CSS、JavaScript、正規表現など)で問題が発生する可能性があることに注意してください。
たとえば、次のIDはHTML5で有効です。
<div id="9lions"> ... </div>
ただし、CSSでは無効です。
CSS2.1仕様から:
CSSでは、識別子(要素名、クラス、セレクターのIDを含む)に含めることができるのは、文字[a-zA-Z0-9]とISO 10646文字U + 00A0以上、さらにハイフン(-)とアンダースコア( _); 数字、2つのハイフン、またはハイフンの後に数字を続けることはできません。
ほとんどの場合、制限または特別な意味を持つコンテキストで文字をエスケープできる場合があります。
W3Cリファレンス
HTML5
id
属性は、その要素の一意の識別子(ID)を指定します。値は、要素のホームサブツリー内のすべてのIDの中で一意である必要があり、少なくとも1つの文字を含んでいる必要があります。値にスペース文字を含めることはできません。
注:IDの形式には他の制限はありません。特に、IDは数字のみで構成することも、数字で開始することも、アンダースコアで開始することも、句読点のみで構成することもできます。
この属性を指定する場合は、要素が属するさまざまなクラスを表す、スペースで区切られたトークンのセットである値が必要です。
HTML要素がそれに割り当てたクラスは、class属性の値がスペースで分割されたときに返されるすべてのクラスで構成されます。(重複は無視されます。)
作成者がクラス属性で使用できるトークンに追加の制限はありませんが、作成者は、コンテンツの望ましい表現を説明する値ではなく、コンテンツの性質を説明する値を使用することをお勧めします。
実際にid
は、これは技術的に有効なHTMLではないにもかかわらず、多くのサイトは数字で始まる属性を使用します。
HTML 5のドラフト仕様では用のルールを緩めるid
とname
属性:彼らはスペースを含めることはできません、今ちょうど不透明な文字列です。
ハイフン、アンダースコア、ピリオド、コロン、数字、および文字はすべて、CSSおよびJQueryでの使用に有効です。以下は機能するはずですが、ページ全体で一意である必要があり、また[A-Za-z]で始まる必要があります。
コロンとピリオドの操作にはもう少し作業が必要ですが、次の例に示すように実行できます。
<html>
<head>
<title>Cake</title>
<style type="text/css">
#i\.Really\.Like\.Cake {
color: green;
}
#i\:Really\:Like\:Cake {
color: blue;
}
</style>
</head>
<body>
<div id="i.Really.Like.Cake">Cake</div>
<div id="testResultPeriod"></div>
<div id="i:Really:Like:Cake">Cake</div>
<div id="testResultColon"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var testPeriod = $("#i\\.Really\\.Like\\.Cake");
$("#testResultPeriod").html("found " + testPeriod.length + " result.");
var testColon = $("#i\\:Really\\:Like\\:Cake");
$("#testResultColon").html("found " + testColon.length + " result.");
});
</script>
</body>
</html>
IDは一意でなければならないことに注意してください。同じid値を持つドキュメント内に複数の要素があってはなりません。
HTML5のIDコンテンツに関するルールは次のとおりです(一意であることは別として)。
This attribute's value must not contain white spaces. [...]
Though this restriction has been lifted in HTML 5,
an ID should start with a letter for compatibility.
これはIDに関するW3仕様です(MDNから)。
Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values
(for example, they did not permit ID values to begin with a number).
ピリオドを含むIDを参照するには、バックスラッシュを使用する必要があります。ハイフンまたはアンダースコアが同じかどうかはわかりません。例:HTML
<div id="maintenance.instrumentNumber">############0218</div>
CSS
#maintenance\.instrumentNumber{word-wrap:break-word;}
\--abc
または数字(例:)が続く場合\-123
です。
HTML 4仕様から...
IDトークンとNAMEトークンは文字([A-Za-z])で始まり、その後に任意の数の文字、数字([0-9])、ハイフン( "-")、アンダースコア( "_")を続けることができます、コロン( ":")、およびピリオド( "。")。
編集:d'oh!ボタンに負けた!
要素の一意の識別子。
同じid値を持つドキュメント内に複数の要素があってはなりません。
次の制限がある任意の文字列:
スペース文字を含めることはできません:
以外でASCII letters and digits, '_', '-' and '.'
は文字を使用すると、互換性の問題が発生する可能性がありHTML 4
ます。この制限はで解除されましたHTML 5
が、IDは互換性のために文字で始める必要があります。
コロン(:)とピリオド(。)はHTML仕様では有効ですが、CSSの IDセレクターとしては無効であるため、それらをその目的で使用する場合はおそらく避けるのが最善です。
ために HTML5
値は、要素のホームサブツリー内のすべてのIDの中で一意である必要があり、少なくとも1つの文字を含んでいる必要があります。値にスペース文字を含めることはできません。
少なくとも1文字、スペースなし。
これは、アクセント付き文字の使用などの有効な使用例への扉を開きます。また、本当に注意しない限り、CSSとJavaScriptの両方で問題を引き起こすid値を使用できるようになったので、足元を撃つための弾薬がたくさんあります。
# : . * !
シンボルの使用は避けてください<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
任意の英数字値と「-」と「_」は有効です。ただし、ID名はAZまたはazの間の任意の文字で始める必要があります。
HTMLで
IDは{AZ}または{az}で始まる必要があります。数字、ピリオド、ハイフン、アンダースコア、コロンを追加できます。
例えば:
<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>
ただし、コロン(:)またはピリオド(。)を使用してIDを作成することはできますが、CSSがこれらのIDをセレクターとして使用することは困難です。主に、疑似要素(:before、:after)を使用する場合。
また、JSでは、これらのIDを選択するのは困難です。したがって、最初の4つのIDを使用する必要があります。多くの開発者が好むように、必要であれば、最後の2つも使用できます。
値は次のとおりです。[az]、[AZ]、[0-9]、[* _:-]
HTML5で使用されています...
任意のタグでIDを追加できます。
ES2015以降、ドキュメントの文字セットがUTF8に設定されている場合は、IDにほとんどすべてのUnicode文字を使用することもできます。
ここでテストしてください:https://mothereff.in/js-variables
について読む:https : //mathiasbynens.be/notes/javascript-identifiers-es6
ES2015では、識別子は$、_、またはUnicode派生コアプロパティID_Startを持つ任意の記号で始まる必要があります。
識別子の残りの部分には、$、_、U + 200Cゼロ幅非結合子、U + 200Dゼロ幅結合子、またはUnicode派生コアプロパティID_Continueを持つ任意のシンボルを含めることができます。
const target = document.querySelector("div").id
console.log(
target
)
document.getElementById(target).style.backgroundColor = "black"
div {
border: 1px black solid;
width: 100%;
height: 200px
}
<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">
あなたはそれを使うべきですか?おそらく良い考えではありません!
アルファベット->大文字と
小文字-> 0-9
特殊文字-> ':'、 '-'、 '_'、 '。'
形式は「。」で始まる必要があります。またはアルファベットの後に、さらに多くのアルファベットまたは数字の特殊文字が続きます。idフィールドの値は「_」で終わってはなりません。
また、スペースは使用できません。スペースが指定されている場合、それらは異なる値として扱われます。これは、id属性の場合は無効です。