JavaScriptで取得した要素の属性 attributes を更新する方法

2024-10-092025-11-16

JavaScriptでは、DOM要素の属性（attributes）を簡単に取得・更新することができます。attributes は、要素の id、class、src などの様々なプロパティを指し、これらを動的に変更することで、ページの挙動や外観をリアルタイムに操作できます。この記事では、属性の取得と更新方法について解説します。

属性の取得方法

要素の属性を取得するには、JavaScriptの getAttribute() メソッドを使用します。このメソッドは、指定した属性の値を取得します。

基本的な構文

element.getAttribute(attributeName);

例：属性を取得する

<img id="exampleImage" src="image.jpg" alt="サンプル画像">

let imageElement = document.getElementById('exampleImage');
let srcValue = imageElement.getAttribute('src');
console.log(srcValue);  // "image.jpg"

このように、getAttribute() を使うことで、指定した要素の属性の値を取得できます。

属性の更新方法

要素の属性を更新するには、setAttribute() メソッドを使用します。これにより、既存の属性を変更したり、新しい属性を追加することができます。

基本的な構文

element.setAttribute(attributeName, value);

例：属性を更新する

<img id="exampleImage" src="image.jpg" alt="サンプル画像">

let imageElement = document.getElementById('exampleImage');

// 画像のsrcを変更
imageElement.setAttribute('src', 'newImage.png');
console.log(imageElement.getAttribute('src'));  // "newImage.png"

上記の例では、画像の src 属性を新しい画像ファイルに変更しています。

属性の削除

不要になった属性を削除したい場合は、removeAttribute() メソッドを使います。これにより、指定した属性を完全に削除することができます。

基本的な構文

element.removeAttribute(attributeName);

例：属性を削除する

<img id="exampleImage" src="image.jpg" alt="サンプル画像">

let imageElement = document.getElementById('exampleImage');

// alt属性を削除
imageElement.removeAttribute('alt');
console.log(imageElement.getAttribute('alt'));  // null

removeAttribute() を使用することで、指定した属性が完全に削除され、getAttribute() で取得しようとしても null が返されます。

クラス属性の操作

特に class 属性は頻繁に操作されるため、classList プロパティを使用してより簡単に操作できます。これにより、クラスの追加、削除、切り替え（toggle）などが可能です。

クラスを追加する

let element = document.getElementById('example');
element.classList.add('new-class');

クラスを削除する

element.classList.remove('old-class');

クラスを切り替える（toggle）

クラスの有無によって、追加または削除を自動的に切り替えることができます。

element.classList.toggle('active');

データ属性の操作

HTML5で導入された data-* 属性は、カスタムデータを要素に保持させるために使用します。これも、getAttribute() や setAttribute() で操作できますが、dataset プロパティを使うことでより簡単に扱えます。

例：データ属性の取得と設定

<div id="example" data-user-id="123" data-role="admin">ユーザー情報</div>

let element = document.getElementById('example');

// データ属性を取得
let userId = element.dataset.userId;
console.log(userId);  // "123"

// データ属性を更新
element.dataset.role = 'user';
console.log(element.dataset.role);  // "user"

応用例：フォームの入力フィールドを動的に操作

以下の例では、フォーム内の入力フィールドの required 属性を動的に追加・削除するシンプルな例を紹介します。

<form>
  <label for="email">Email:</label>
  <input type="email" id="email">
  <button type="button" onclick="toggleRequired()">必須切り替え</button>
</form>

function toggleRequired() {
  let emailInput = document.getElementById('email');

  if (emailInput.hasAttribute('required')) {
    emailInput.removeAttribute('required');
  } else {
    emailInput.setAttribute('required', 'required');
  }
}

ボタンをクリックすることで、required 属性が追加されたり、削除されたりします。hasAttribute() を使うことで、属性が既に存在するかどうかを確認し、条件に応じて処理を切り替えています。

結論

JavaScriptを使って、HTML要素の属性を取得・更新・削除する方法を理解することで、動的なWebページの操作が可能になります。setAttribute() や getAttribute() を使用した基本的な操作に加え、classList や dataset を活用することで、効率的にDOMを操作できるようになります。これらのメソッドを適切に使い分けることで、より柔軟でインタラクティブなユーザー体験を実現できるでしょう。