属性とは？プロパティとアトリビュートの違いを解説

Contents

Web開発において、要素には「属性」、「プロパティ」、「アトリビュート」の3つの概念が存在します。これらの言葉は似ているようで異なる役割を持っています。

属性とは、HTML要素に付与される特定の情報のことを指します。例えば、img要素には「src」という属性があり、画像のURLを指定するために利用されます。また、a要素には「href」という属性があり、リンク先のURLを指定するために利用されます。

プロパティとは、要素に対してJavaScriptからアクセスするために使用されるもので、属性と似たようなものです。しかし、属性と異なり、プロパティはHTMLのDOMツリーから取得されるため、動的に変更することが可能です。

例えば、以下のようなHTML要素があったとします。

“`

“`

この要素に対して、JavaScriptを使ってID属性にアクセスする場合、以下のように記述します。

“`
var element = document.getElementById(“sample”);
“`

このように、JavaScriptから要素にアクセスする際には、プロパティを使用するのが一般的です。

アトリビュートとは、属性の値そのものを指します。HTML要素の属性には、属性名とその属性値がありますが、属性値のことをアトリビュートと呼びます。

例えば、以下のようなHTML要素があったとします。

“`

“`

この場合、属性名は「type」「class」であり、それぞれの属性値は「text」「input-text」になります。そして、それぞれの属性値がアトリビュートにあたります。

属性、プロパティ、アトリビュートは、Web開発の基礎となる概念です。属性はHTML要素に付与される情報を、プロパティはJavaScriptから要素にアクセスするためのものを、アトリビュートは属性の値そのものを指します。正確に理解し、適切に扱うことがWeb開発において大切です。

参考記事