属性一覧

コンテンツ属性と IDL 属性

HTML では、ほとんどの属性にコンテンツ属性と IDL (Interface Definition Language) 属性の 2 つの側面があります。

コンテンツ属性はコンテンツ（HTML コード）から設定する属性であり、 element.setAttribute() や element.getAttribute() を使用して設定または取得できます。 コンテンツ属性は値として数値を想定するものであっても、常に文字列です。例えば コンテンツ属性を使用して <input> 要素の maxlength 属性に 42 を設定するには、その要素で setAttribute("maxlength", "42") を呼び出さなければなりません。

IDL 属性は JavaScript プロパティとしても知られています。これらは、 JavaScript のプロパティを使って、 element.foo のように読み込んだり設定したりすることができます。 IDL 属性は常に、取得する際に値を返すために基盤となっているコンテンツ属性を使用し（変換することもあります）、設定するにはコンテンツ属性に何かを保存します。言い換えれば、 IDL 属性は要するにコンテンツ属性を反映します。

ほとんどの場合、IDL 属性は実際に使用する値として自身の値を返します。例えば <input> 要素の type 属性の既定値は "text" であるので、input.type="foobar" を設定すると <input> 要素は (外見と動作が) text 型になりますが、 "type" コンテンツ属性の値は "foobar" になります。しかし、 type の IDL 属性は文字列 "text" を返します。

IDL 属性は常に文字列とは限りません。例えば input.maxlength は数値（符号付き long）です。 IDL 属性を使用するときは望ましい型の値を読み書きするので、input.maxlength は常に数値を返し、また input.maxlength を設定するときは数値を要求します。他の型で渡すと、標準的な JavaScript の型変換規則に従って自動的に数値へ変換されます。

IDL 属性は、他の型を反映することができます。符号なし long、URL、論理値などです。残念ながら、明確な規則はなく、 IDL 属性が対応するコンテンツ属性と結びついてどのように振る舞うかは、属性によって異なります。ほとんどの場合は仕様書にあるレイアウトルールに従いますが、そうでない場合もあります。 HTML 仕様では可能な限り開発者にやさしいものにしようとしていますが、さまざまな理由 (たいていは歴史的な理由) により奇妙な動作になる属性（例えば select.size）があり、実際どのように動作するかを理解するために仕様書を読むようにしましょう。

論理属性

一部のコンテンツ属性（例えば required, readonly, disabled）は「論理属性」 (boolean attributes) と呼ばれています。論理属性は存在すれば、その値が真となり、存在しなければ、その値が偽となります。

HTML では、論理属性に許されている値の制約を定義しています。属性が存在する場合は、値は空文字列（属性の値が割り当てられないことがあります）または属性の正式名に ASCII で大文字・小文字まで一致する値のどちらかで、前後にホワイトスペースを含んではいけません。以下の例は論理属性をマークアップする正しい方法です。

<div itemscope>これは HTML では有効ですが XML では無効です。</div>
<div itemscope=itemscope>これも HTML では有効ですが XML では無効です。</div>
<div itemscope="">これは HTML でも XML でも有効です。</div>
<div itemscope="itemscope">
  これは HTML でも XML でも有効ですが、おそらく少し冗長です。
</div>

明確にするために、 "true" および "false" という値は論理属性では許可されていません。偽の値を表すには、属性ごと省略する必要があります。この制約により、いくつかのよくある誤解が明確になります。例えば checked="false" は、属性が存在するため、その要素の checked 属性が真であると解釈されます。

イベントハンドラー属性

<div onclick="console.log(new URL(location))">悪い例</div>

function onclick(event) {
  with (this.ownerDocument) {
    with (this) {
      console.log(new URL(location)); // 'URL' は、window.URL ではなく document.URL を指すようになった
      // TypeError: URL is not a constructor
    }
  }
}

上の表に掲載されている属性の他に、グローバルイベントハンドラー（onclick など）も、すべての要素のコンテンツ属性として指定することができます。

すべてのイベントハンドラー属性は文字列を受け入れます。この文字列は、 JavaScript 関数、たとえば function name(/*args*/) {body} などを生成するために使用され、name は属性の名前、body は属性の値となります。ハンドラーは、対応する JavaScript イベントハンドラーと同じ引数を受け取ります。ほとんどのハンドラーは event 引数 1 つだけを受け取りますが、onerror は5つの引数 (event, source, lineno, colno, error) を受け取ります。これは、一般的に、属性内で変数 event を使用することができることを意味しています。

<div onclick="console.log(event)">ここをクリック</div>
<!-- 生成されたハンドラーには名前があります。自分自身で参照できます。 -->
<div onclick="console.log(onclick)">ここをクリック</div>

関連情報

• HTML 要素