JavaScriptの属性存在チェックを徹底解説！12選の使い方＆応用例

はじめに
●JavaScriptの属性存在チェックとは
- ○属性存在チェックの基本
●属性存在チェックの使い方
●属性存在チェックの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptの属性存在チェックの使い方や応用例がマスターできるようになります。

JavaScript初心者でも分かるように、徹底解説します。

12選のサンプルコードと注意点、カスタマイズ方法も紹介します。

●JavaScriptの属性存在チェックとは

JavaScriptでWebページ上の要素（HTML要素）を操作する際、その要素が特定の属性を持っているかどうかを調べることがあります。

この属性の存在をチェックする方法を「属性存在チェック」と言います。

○属性存在チェックの基本

属性存在チェックは、JavaScriptのhasAttributeメソッドを使って行います。

このメソッドは、指定した属性が要素に存在すればtrueを、存在しなければfalseを返します。

●属性存在チェックの使い方

それでは、属性存在チェックの使い方を見ていきましょう。

○サンプルコード1：要素の属性存在チェック

下記のサンプルコードでは、要素がdata-custom属性を持っているかどうかをチェックしています。

const element = document.getElementById('sample');
if (element.hasAttribute('data-custom')) {
  console.log('属性が存在します');
} else {
  console.log('属性が存在しません');
}

○サンプルコード2：属性値の取得

属性が存在することが確認できたら、次にその属性値を取得してみましょう。

getAttributeメソッドを使って属性値を取得できます。

const element = document.getElementById('sample');
if (element.hasAttribute('data-custom')) {
  const value = element.getAttribute('data-custom');
  console.log('属性値:', value);
} else {
  console.log('属性が存在しません');
}

○サンプルコード3：属性値の設定

属性値を設定する場合は、setAttributeメソッドを使います。

const element = document.getElementById('sample');
element.setAttribute('data-custom', '新しい値');

●属性存在チェックの応用例

さらに応用的な使い方を見ていきましょう。

○サンプルコード4：条件分岐を使った属性チェック

条件分岐を使って、属性が存在する場合としない場合で処理を分けることができます。

const elements = document.querySelectorAll('.item');

elements.forEach(element => {
  if (element.hasAttribute('data-active')) {
    // data-active属性が存在する場合の処理
  } else {
    // data-active属性が存在しない場合の処理
  }
});

○サンプルコード5：複数属性チェック

複数の属性が存在するかどうかをチェックすることもできます。

const element = document.getElementById('sample');

if (element.hasAttribute('data-custom1') && element.hasAttribute('data-custom2')) {
  console.log('両方の属性が存在します');
} else {
  console.log('どちらかの属性が存在しません');
}

○サンプルコード6：属性チェックを使ったクラス追加

属性が存在する場合に、クラスを追加する処理を行います。

const elements = document.querySelectorAll('.item');

// 要素のリストをループ処理
elements.forEach(element => {
  // data-active属性が存在する場合
  if (element.hasAttribute('data-active')) {
    // activeクラスを追加
    element.classList.add('active');
  }
});

○サンプルコード7：属性チェックを使ったイベント処理

属性チェックを使って、特定の属性を持つ要素に対してイベントリスナーを登録する例です。

const buttons = document.querySelectorAll('button');

// ボタン要素のリストをループ処理
buttons.forEach(button => {
  // data-action属性が存在する場合
  if (button.hasAttribute('data-action')) {
    // クリックイベントリスナーを登録
    button.addEventListener('click', () => {
      console.log('アクション実行');
    });
  }
});

○サンプルコード8：属性チェックを使ったフォームバリデーション

属性チェックを利用して、フォームの入力項目に対してバリデーションを行う例です。

const form = document.getElementById('sample-form');
const inputs = form.querySelectorAll('input');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  // 入力項目をループ処理
  inputs.forEach(input => {
    // required属性が存在する場合
    if (input.hasAttribute('required')) {
      // 入力値が空の場合、エラーメッセージを表示
      if (input.value.trim() === '') {
        console.log('必須項目が未入力です');
      }
    }
  });
});

○サンプルコード9：属性チェックを使ったスライドショー

属性チェックを活用して、スライドショーの表示・非表示を切り替える例です。

const slides = document.querySelectorAll('.slide');

// スライド要素のリストをループ処理
slides.forEach((slide, index) => {
  // data-visible属性が存在する場合、表示
  if (slide.hasAttribute('data-visible')) {
    slide.style.display = 'block';
  } else {
    slide.style.display = 'none';
  }
});

○サンプルコード10：属性チェックを使ったアコーディオンメニュー

属性チェックを用いて、アコーディオンメニューの開閉を制御する例です。

const accordionHeaders = document.querySelectorAll('.accordion-header');

// アコーディオンヘッダー要素のリストをループ処理
accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const content = header.nextElementSibling;

    // data-open属性が存在する場合
    if (header.hasAttribute('data-open')) {
      // data-open属性を削除し、コンテンツを非表示
      header.removeAttribute('data-open');
      content.style.display = 'none';
    } else {
      // data-open属性を追加し、コンテンツを表示
      header.setAttribute('data-open', '');
      content.style.display = 'block';
    }
  });
});

○サンプルコード11：属性チェックを使ったタブ切り替え

属性チェックを活用して、タブメニューの切り替えを実現する例です。

const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const targetId = tab.getAttribute('data-target');

    // タブのアクティブ状態をリセット
    tabs.forEach(t => t.classList.remove('active'));
    tab.classList.add('active');

    // タブコンテンツの表示を切り替え
    tabContents.forEach(content => {
      if (content.getAttribute('id') === targetId) {
        content.style.display = 'block';
      } else {
        content.style.display = 'none';
      }
    });
  });
});

○サンプルコード12：属性チェックを使ったドロップダウンメニュー

属性チェックを利用して、ドロップダウンメニューの表示・非表示を切り替える例です。

const dropdownToggles = document.querySelectorAll('.dropdown-toggle');

// トグル要素のリストをループ処理
dropdownToggles.forEach(toggle => {
  toggle.addEventListener('click', () => {
    const menu = toggle.nextElementSibling;

    // data-open属性が存在する場合
    if (toggle.hasAttribute('data-open')) {
      // data-open属性を削除し、メニューを非表示
      toggle.removeAttribute('data-open');
      menu.style.display = 'none';
    } else {
      // data-open属性を追加し、メニューを表示
      toggle.setAttribute('data-open', '');
      menu.style.display = 'block';
    }
  });
});