属性とは？プロパティとアトリビュートの違いを解説
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開発において大切です。