【JavaScript】getAttribute・setAttribute の使い方｜HTML属性を取得・変更・削除する方法

HTML 要素には href・src・disabled・data-* といった「属性」があります。これらを JavaScript から読み取ったり、書き換えたり、削除したりするのが getAttribute()・setAttribute()・removeAttribute() です。リンク先を切り替える、ボタンを無効化する、状態を data-* 属性で持たせる、といった操作の基本になります。この記事では、3つのメソッドの使い方と、属性の有無を調べる hasAttribute()、似た仕組みの「プロパティ」との違い、つまずきやすい点までを、動く例とともに初心者の方にも分かるように解説します。

属性を操作する4つのメソッド

属性の読み書きは、対象の要素を取得したうえで、次のメソッドを呼び出します。いずれも「属性名」を文字列で渡すのが基本です。

下の例は、ボタンを押すたびにランプの data-status 属性を on／off で切り替えるものです。getAttribute() で今の値を読み、setAttribute() で反対の値に書き換えています。CSS 側は属性セレクタ [data-status="on"] で色を変えているだけです。動かして確かめてみてください。

<div id="lamp" data-status="off">ランプ</div>
<button id="toggle">切り替え</button>
<p>data-status の値: <span id="state">off</span></p>

#lamp {
  width: 160px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: sans-serif;
  margin-bottom: 12px;
  color: #fff;
}
/* 属性セレクタで data-status の値ごとに見た目を変える */
#lamp[data-status="off"] { background: #9e9e9e; }
#lamp[data-status="on"]  { background: #4caf50; }
button {
  padding: 8px 16px;
  cursor: pointer;
}
p { font-family: sans-serif; }

const lamp = document.getElementById("lamp");
const button = document.getElementById("toggle");
const state = document.getElementById("state");

button.addEventListener("click", () => {
  // 現在の属性値を読み取る
  const current = lamp.getAttribute("data-status");
  // 値を反転させて書き込む
  const next = current === "on" ? "off" : "on";
  lamp.setAttribute("data-status", next);
  // 画面の表示も更新する
  state.textContent = next;
});

getAttribute で値を取得する

getAttribute() は、指定した属性の値を文字列で返します。その属性が付いていない場合は null を返します。リンクの遷移先や画像のパスを読み取るときに使います。

const link = document.querySelector("a");

// href 属性の値を読み取る
const url = link.getAttribute("href"); // 例: "/about"

// 付いていない属性は null
console.log(link.getAttribute("target")); // null（target が無い場合）

setAttribute で値を設定・変更する

setAttribute(名前, 値) は、属性を設定します。すでにある属性なら値を上書きし、無ければ新しく追加します。リンク先を差し替えたり、画像を切り替えたりできます。

const img = document.querySelector("img");

// src を別の画像に差し替える
img.setAttribute("src", "/images/after.png");
// alt も設定する
img.setAttribute("alt", "切り替え後の画像");

第2引数の値は文字列で渡します。数値を渡しても自動的に文字列へ変換されますが、明示的に文字列で書いておくと意図が伝わりやすくなります。data-status のような独自の data-* 属性も、同じ setAttribute() で設定できます。

真偽属性（disabled など）の扱い

disabled や checked のような「付いていれば有効」という属性（真偽属性）は、少し注意が必要です。これらは属性が存在するかどうかで効くため、無効にしたいときは setAttribute("disabled", "") のように設定し、有効に戻すときは値を "false" にするのではなく removeAttribute() で削除します。

const btn = document.querySelector("button");

// ボタンを無効化する（属性を付ける）
btn.setAttribute("disabled", "");

// 有効に戻す（disabled="false" ではなく削除する）
btn.removeAttribute("disabled");

disabled="false" と書いても、属性が存在する限りボタンは無効のままになります。「文字列の false」ではなく「属性そのものの有無」で判断される点に注意してください。

removeAttribute と hasAttribute

removeAttribute() は属性を丸ごと取り除きます。hasAttribute() は属性が付いているかを true／false で返すので、削除や切り替えの前の確認に使えます。

const box = document.querySelector(".box");

if (box.hasAttribute("hidden")) {
  // hidden が付いていれば外して表示する
  box.removeAttribute("hidden");
} else {
  // 無ければ付けて隠す
  box.setAttribute("hidden", "");
}

属性とプロパティの違い

属性の操作には、setAttribute() を使う方法のほかに、element.id = "x" のようにプロパティへ直接代入する方法もあります。多くの場合どちらでも似た結果になりますが、性質が異なる場面があります。

たとえば <a href="/about"> に対して、getAttribute("href") は書いたとおりの "/about" を返しますが、link.href（プロパティ）は "https://example.com/about" のように完全な URL へ解決された値を返します。また checkbox.checked は true／false の真偽値ですが、getAttribute("checked") は属性の有無に基づく文字列または null です。HTMLに書いた生の値がほしいときは getAttribute()、解決済みの値や真偽値で扱いたいときはプロパティ、と使い分けると迷いません。なお data-* 属性は dataset プロパティで読み書きする方法もあります。

うまくいかないときの確認ポイント

取得すると null が返るとき

getAttribute() が null を返すのは、その属性が要素に付いていない場合です。属性名のつづり違い（class を className と書くなど）でも起こります。setAttribute() で使う名前は HTML の属性名（class・for など）であり、プロパティ名（className・htmlFor）とは異なる点に注意してください。

真偽属性が切り替わらないとき

前述のとおり、disabled などは "false" を設定しても無効化が解除されません。有効に戻すときは必ず removeAttribute() を使うか、プロパティ（btn.disabled = false）で切り替えてください。

値が文字列になることを忘れない

getAttribute() が返すのは常に文字列です。data-count に数を入れているときも、計算に使う前に Number() で変換しないと、文字列の連結になってしまいます。数値として扱うことを意識しておきましょう。

まとめ

属性の読み書きは、要素の状態や見た目を JavaScript から動かす基本操作です。要点を整理します。

• getAttribute(名前) で取得（無ければ null）、setAttribute(名前, 値) で設定・上書き。
• removeAttribute(名前) で削除、hasAttribute(名前) で有無を確認。
• disabled などの真偽属性は「有無」で効く。解除は removeAttribute()。
• HTMLの生の値は getAttribute()、解決済み・真偽値はプロパティで扱う。
• 取得値は常に文字列。計算前に Number() で変換する。

まずは data-* 属性を get／set で切り替えるところから試すと、属性操作の流れがつかめます。CSS の属性セレクタと組み合わせると、状態に応じた見た目の変化も手軽に作れます。

参考ページ

• Element: getAttribute() メソッド – Web API | MDN
• Element: setAttribute() メソッド – Web API | MDN
• Element: removeAttribute() メソッド – Web API | MDN
• Element: hasAttribute() メソッド – Web API | MDN