JavaScriptでHTML要素を操作！属性とプロパティを使いこなす

2024-04-02

HTMLにおける属性とプロパティの違い

属性

属性は、HTML要素に情報を与えるために使用されます。要素の見た目や動作をどのように設定するかを指示します。属性は要素名と属性名の間にコロン(:)、属性値を**クォーテーション("")**で囲んで記述します。

例：

<img src="image.jpg" alt="これは画像です" width="200" height="100">

上記の例では、img要素に以下の属性が設定されています。

src: 画像ファイルのパス
alt: 画像の説明
width: 画像の幅
height: 画像の高さ

属性は要素の静的な情報を定義するために使用されます。つまり、ページが読み込まれた時点で決定され、その後変更されることはありません。

プロパティ

プロパティは、JavaScriptなどのプログラミング言語を使用して、要素の状態や動作を動的に変更するために使用されます。属性とは異なり、プロパティは要素名とプロパティ名の間に**ドット(.)**を使用します。

<img id="my-image">

const image = document.getElementById("my-image");
image.src = "new-image.jpg";
image.width = 300;

上記の例では、img要素にid="my-image"という属性が設定されています。その後、JavaScriptを使用して、image変数にimg要素を取得し、srcプロパティとwidthプロパティを変更しています。

このように、プロパティはJavaScriptを使用して、要素の動的な変更を行うために使用されます。

項目	属性	プロパティ
役割	要素に情報を付与する	要素の状態や動作を動的に変更する
記述方法	要素名:属性名="属性値"	要素名.プロパティ名 = 値
変更タイミング	ページ読み込み時	JavaScriptを使用して動的に変更可能
使用例	画像のパス、幅、高さなど	画像の切り替え、アニメーションなど

HTMLファイル:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
</head>
<body>
  <h1 id="heading">これは見出しです</h1>
  <button id="button">ボタン</button>
  <script src="script.js"></script>
</body>
</html>

JavaScriptファイル:

// 要素を取得
const heading = document.getElementById("heading");
const button = document.getElementById("button");

// 属性を取得
const headingText = heading.getAttribute("textContent");
const buttonText = button.getAttribute("textContent");

// 属性を変更
heading.setAttribute("textContent", "新しい見出し");
button.setAttribute("textContent", "新しいボタン");

// プロパティを取得
const headingStyle = heading.style.color;
const buttonStyle = button.style.backgroundColor;

// プロパティを変更
heading.style.color = "red";
button.style.backgroundColor = "blue";

// イベントリスナーを追加
button.addEventListener("click", () => {
  // ボタンがクリックされた時の処理
  alert("ボタンがクリックされました！");
});