HTML id グローバル属性

idグローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。

試してみましょう

<p>通常の、退屈な段落です。眠くならないように気をつけてください。</p><p>このページの中で最も期待に満ちた段落です。他に類を見ない、唯一無二の存在です。</p>

#exciting {  background: linear-gradient(to bottom, #ffe8d4, #f69d3c);  border: 1px solid #696969;  padding: 10px;  border-radius: 10px;  box-shadow: 2px 2px 1px black;}#exciting::before {  content: "ℹ️";  margin-right: 5px;}

構文

id の値にホワイトスペース文字 (空白やタブなど) を含めてはいけません。ブラウザーはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れるclass 属性とは対照的に、要素は ID の値をひとつだけ持つことができます。

技術的には、id 属性の値にはホワイトスペース文字を除いて、どんな文字でも入れることができます。ただし、Document.querySelector() のような API を使用して JavaScript から、あるいは CSS スタイルシート内で CSS セレクターとして使用する場合、 ID 属性値はCSS 識別子として有効でなければなりません。これは、 ID 属性値が有効な CSS 識別子でない場合（例えば、my?id や1234）である場合、セレクターで使用する前に、CSS.escape() メソッドまたは手動を使用してエスケープする必要があります。

このため、開発者は、エスケープを必要としない、CSS の識別子として有効な値を ID 属性に選べます。

また、すべての有効な ID 属性値が JavaScript 識別子として有効であるとは限りません。例えば、1234 は有効な属性値ですが、JavaScript 識別子としては有効ではありません。これは、この値が有効な変数名ではないことを意味します。したがって、window.1234 などのコードを使用して要素にアクセスすることはできません。ただし、window["1234"] を使用するとアクセスできます。

解説

ID 属性の目的は、リンク（フラグメント識別子を使用）、スクリプト、またはスタイル設定（CSS を使用）の際に、単一の要素を識別することです。

ID 属性を持つ要素には、window オブジェクトのグローバルプロパティとしてアクセスできます。この場合、プロパティ名は ID 値、プロパティ値は対応する要素になります。例えば、次のマークアップが指定された場合

html

<p></p>

次のコードを使用することで、JavaScript でこの段落要素にアクセスすることができます。

const content = window.preamble.textContent;

警告:window["id-value"] やwindow.idValue というパターンに頼ることは、ブラウザーの既存または将来の API との予期せぬ競合を引き起こす可能性があるため、危険であり、推奨されません。例えば、将来、ブラウザーがpreamble という組み込みのグローバルプロパティを導入した場合、コードは HTML 要素にアクセスできなくなる可能性があります。このような競合を避けるため、要素に ID を使用してアクセスするには、常にDocument.getElementById() またはDocument.querySelector() メソッドを使用してください。