HTML id グローバル属性
id
グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。
試してみましょう
<p>通常の、退屈な段落です。眠くならないように気をつけてください。</p>
<p id="exciting">このページの中で最も期待に満ちた段落です。他に類を見ない、唯一無二の存在です。</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 値、プロパティ値は対応する要素になります。例えば、次のマークアップが指定された場合
<p id="preamble"></p>
次のコードを使用することで、JavaScript でこの段落要素にアクセスすることができます。
const content = window.preamble.textContent;
警告:
window["id-value"]
や window.idValue
というパターンに頼ることは、ブラウザーの既存または将来の API との予期せぬ競合を引き起こす可能性があるため、危険であり、推奨されません。
例えば、将来、ブラウザーが preamble
という組み込みのグローバルプロパティを導入した場合、コードは HTML 要素にアクセスできなくなる可能性があります。
このような競合を避けるため、要素に ID を使用してアクセスするには、常に Document.getElementById()
または Document.querySelector()
メソッドを使用してください。
仕様書
Specification |
---|
HTML # the-id-attribute |
ブラウザーの互換性
関連情報
- すべてのグローバル属性
Element.id
はこの属性を反映しますDocument.getElementById
メソッド- CSS の ID セレクター