JavaScriptで要素の属性を変更する方法：setAttributeからプロパティ操作まで

JavaScriptを使用してWebサイトの動的な機能を実現する際、HTML要素の属性を操作する技術は欠かせません。

ユーザーの操作に応じて画像を変更したり、ボタンの有効・無効を切り替えたりする処理は、すべて属性の操作によって行われます。

本記事では、現代のWeb開発において標準的な属性変更の方法を、基礎から応用まで詳しく解説します。

初心者の方から実務でコードを書く方まで、効率的なコーディング手法を身につけるための参考にしてください。

JavaScriptで属性を操作する重要性

WebアプリケーションのUIを動的に制御するためには、HTMLの要素そのものを操作するだけでなく、その「属性」を適切に書き換える必要があります。

例えば、入力フォームのバリデーション結果に応じて「disabled」属性を付与したり、ダークモードへの切り替えで「class」属性を操作したりする場面が多々あります。

これらの操作をJavaScriptで行うことにより、ページをリロードすることなく、ユーザーに対してリアルタイムなフィードバックを提供できます。

特に、モダンなJavaScriptフレームワークが普及した現在でも、DOM（Document Object Model）を直接操作する基礎知識は非常に重要です。

setAttributeメソッドによる属性の変更

最も汎用的で広く使われている方法が、setAttributeメソッドを使用する方法です。

このメソッドは、特定の要素に対して属性名と値を指定することで、属性の内容を更新または新規追加します。

setAttributeの基本構文

setAttributeは、第一引数に属性名、第二引数に設定したい値を指定します。

// 要素を取得します
const myButton = document.querySelector('#submit-btn');

// 属性を変更します
myButton.setAttribute('name', 'main-button');
myButton.setAttribute('title', '送信する');

このメソッドの最大の特徴は、HTMLの属性名をそのまま文字列として指定できる点にあります。

例えば、data-から始まるカスタムデータ属性なども、このメソッドを使えば簡単に操作可能です。

既存の属性値を上書きする場合

setAttributeを使用すると、指定した属性が既に存在する場合は、その値が新しい値に書き換わります。

もし属性が存在しない場合は、新しくその属性が追加されます。

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

// 既存のhref属性を変更します
link.setAttribute('href', 'https://example.com/new-page');

プロパティによる属性の直接操作

JavaScriptでは、DOM要素のプロパティを直接書き換えることで属性を変更することも可能です。

多くの場合、setAttributeを使うよりも記述が簡潔になり、処理速度もわずかに速いというメリットがあります。

プロパティ操作の例

例えば、idやsrc、hrefなどの主要な属性は、要素オブジェクトのプロパティとして直接アクセスできます。

const imgElement = document.querySelector('#hero-image');

// プロパティでsrc属性とalt属性を変更します
imgElement.src = 'images/summer-campaign.jpg';
imgElement.alt = '夏のキャンペーン画像';

このように、ドット記法を用いて直感的に値を代入できるのがプロパティ操作の強みです。

プロパティ操作における注意点

プロパティ操作を行う際には、HTMLの属性名とJavaScript上のプロパティ名が異なる場合があることに注意が必要です。

代表的な例として、HTMLのclass属性は、JavaScriptではclassNameというプロパティ名になります。

これは、classがJavaScriptの予約語であるためです。

setAttributeとプロパティ操作の違い

どちらの方法を使用すべきか迷うことがありますが、それぞれには明確な違いがあります。

以下の表で、主な違いを比較してみましょう。

基本的にはプロパティ操作を優先し、カスタム属性や特殊な属性を扱う場合にはsetAttributeを使用するという使い分けが推奨されます。

クラス属性（class）の変更に特化した操作

要素の見た目を変更する際、class属性の操作は非常に頻繁に行われます。

前述のsetAttributeやclassNameでも変更は可能ですが、複数のクラスを管理する場合にはclassListを使用するのが最もスマートです。

classListを使用した操作

classListプロパティを使用すると、クラスの追加、削除、切り替えを簡単に行うことができます。

const alertBox = document.querySelector('.alert');

// クラスを追加します
alertBox.classList.add('is-visible');

// クラスを削除します
alertBox.classList.remove('is-hidden');

// クラスの有無を切り替えます（トグル）
alertBox.classList.toggle('active');

classList.addやremoveを使用することで、他の既存のクラスに影響を与えることなく、特定のクラスだけをピンポイントで操作できます。

これにより、文字列の結合や置換といった複雑な処理を自分で行う必要がなくなります。

スタイル属性（style）の動的変更

特定のスタイルのみをプログラムから変更したい場合は、styleプロパティを使用します。

これはHTMLのインラインスタイルとして反映されます。

const card = document.querySelector('.card');

// 背景色と文字サイズを変更します
card.style.backgroundColor = '#f0f0f0';
card.style.fontSize = '18px';

JavaScriptでスタイルを操作する際、background-colorのようなハイフンを含むCSSプロパティ名は、キャメルケース（backgroundColor）で記述する必要がある点に注意してください。

真偽値属性（Boolean属性）の操作

checkedやdisabled、readonlyといった属性は「真偽値属性」と呼ばれます。

これらを操作する場合は、setAttributeよりもプロパティ操作を行う方が確実です。

真偽値属性の設定例

const submitBtn = document.querySelector('button[type="submit"]');
const checkbox = document.querySelector('#agree-check');

// ボタンを無効化します
submitBtn.disabled = true;

// チェックボックスをチェック状態にします
checkbox.checked = true;

setAttribute('disabled', 'false')のように記述しても、属性が存在するだけで「有効」とみなされる場合があるため、trueやfalseを直接代入できるプロパティ操作が推奨されます。

カスタムデータ属性（data-*）の変更

独自に定義したdata-属性を操作する場合、datasetプロパティを使用すると便利です。

HTMLでdata-user-idと定義されている属性は、JavaScriptからはdataset.userIdとしてアクセス可能です。

const userProfile = document.querySelector('.profile');

// カスタムデータ属性の値を変更します
userProfile.dataset.userId = '98765';
userProfile.dataset.role = 'admin';

<!-- 実行後のHTMLイメージ -->
<div class="profile" data-user-id="98765" data-role="admin"></div>

この方法により、要素に関連付けられた独自のデータを安全かつ効率的に管理できます。

属性の削除方法

属性を変更するだけでなく、完全に削除したい場合にはremoveAttributeメソッドを使用します。

const inputField = document.querySelector('#search');

// readonly属性を削除して入力可能にします
inputField.removeAttribute('readonly');

属性そのものを消し去ることで、ブラウザのデフォルトの挙動に戻したり、特定のスタイル適用を解除したりすることが可能です。

実践的なユースケース：画像ギャラリーの切り替え

ここで、実際の開発でよくある「クリックしたサムネイル画像をメイン画像に反映させる」処理を例に挙げてみましょう。

// メイン画像要素を取得
const mainImg = document.querySelector('.main-display');

// 全てのサムネイル要素を取得
const thumbnails = document.querySelectorAll('.thumb');

// 各サムネイルにクリックイベントを設定
thumbnails.forEach(thumb => {
    thumb.addEventListener('click', () => {
        // サムネイルのsrc属性を取得してメイン画像に設定
        const newSrc = thumb.getAttribute('src');
        mainImg.src = newSrc;
        
        // alt属性も同期させる
        mainImg.alt = thumb.alt;
    });
});

この短いコードの中に、getAttributeによる取得と、プロパティ操作による変更が組み合わされています。

このように目的や対象となる属性に応じて使い分けることが、美しくメンテナンス性の高いコードを書くコツです。

アクセシビリティへの配慮と属性変更

現代のWeb制作において、アクセシビリティ（ARIA属性）の操作は避けて通れません。

スクリーンリーダーなどの支援技術を利用するユーザーのために、状態の変化を正確に伝える必要があります。

例えば、アコーディオンメニューの開閉状態をaria-expanded属性で管理する場合です。

const menuBtn = document.querySelector('#menu-btn');
let isOpen = false;

menuBtn.addEventListener('click', () => {
    isOpen = !isOpen;
    // ARIA属性を更新します
    menuBtn.setAttribute('aria-expanded', isOpen.toString());
});

ARIA属性はほとんどの場合プロパティとしては存在しないため、setAttributeメソッドを用いて明示的に更新する必要があります。

セキュリティ上の注意点：XSS対策

JavaScriptで属性を動的に変更する際、ユーザーが入力した値をそのまま属性値に含めるのは危険です。

特にhref属性にjavascript:alert('XSS')といった値を設定されると、クロスサイトスクリプティング（XSS）の脆弱性につながる恐れがあります。

外部からのデータを属性に設定する場合は、必ず適切なサニタイズ（無害化）やバリデーションを行うよう心がけましょう。

信頼できない値を扱う際は、不用意にinnerHTMLを使用せず、属性操作においても慎重に値を検証することが重要です。

まとめ

JavaScriptによる要素の属性変更には、主にsetAttributeメソッドとプロパティを直接操作する方法の2種類があります。

標準的な属性であれば簡潔に記述できるプロパティ操作を使い、カスタム属性やアクセシビリティに関する属性にはsetAttributeを使うのが一般的です。

また、クラスの操作にはclassList、インラインスタイルの操作にはstyleプロパティといった、用途に特化した機能が用意されています。

それぞれの特性を正しく理解し、適切に使い分けることで、ユーザー体験の向上とコードの品質確保を両立させることができます。

まずは小さなパーツの属性操作から始めて、動的なWebサイト制作のスキルを磨いていきましょう。