JavaScript初心者必見！表示要素の実行方法10選

はじめに
●表示要素の検知方法
- ○MutationObserverについて
●基本的な要素表示時の実行方法
- ○サンプルコード1：DOMContentLoadedイベント
- ○サンプルコード2：window.onloadイベント
●応用例とサンプルコード
●注意点
まとめ

はじめに

この記事を読めば、JavaScript初心者でも要素が表示されたら実行する方法が身につきます。

様々なケースに対応できるサンプルコードや応用例を用意していますので、ぜひ参考にしてください。

●表示要素の検知方法

JavaScriptでは、要素が表示されたことを検知するために、MutationObserverというAPIを利用します。

これを使うことで、HTML要素の変更や表示状態の変化を監視し、コールバック関数を実行することができます。

○MutationObserverについて

MutationObserverは、DOMツリーの変更を監視するためのAPIです。

対象となる要素や監視する変更の種類を指定して、コールバック関数を実行できます。

// MutationObserverのインスタンスを作成
const observer = new MutationObserver(callback);

// 監視対象の要素を取得
const targetNode = document.getElementById('target');

// オプションを指定
const config = { attributes: true, childList: true, subtree: true };

// 対象要素の監視を開始
observer.observe(targetNode, config);

// コールバック関数
function callback(mutationsList, observer) {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('子要素が追加されました。');
    }
  }
}

上記のサンプルコードでは、指定した要素の子要素が追加されたときに、コンソールにメッセージが表示されます。

このように、MutationObserverを使って要素の変更を検知し、関数を実行できます。

●基本的な要素表示時の実行方法

要素が表示されたら実行する基本的な方法として、DOMContentLoadedイベントとwindow.onloadイベントがあります。

○サンプルコード1：DOMContentLoadedイベント

DOMContentLoadedイベントは、HTML文書が完全に読み込まれた時点で発火します。

次のサンプルコードでは、DOMContentLoadedイベントが発火したら、メッセージをコンソールに表示します。

document.addEventListener('DOMContentLoaded', () => {
  console.log('HTML文書が完全に読み込まれました。');
});

○サンプルコード2：window.onloadイベント

window.onloadイベントは、ページ全体が読み込まれた後に発火します。

次のサンプルコードでは、window.onloadイベントが発火したら、メッセージをコンソールに表示します。

window.onload = () => {
  console.log('ページ全体が読み込まれました。');
};

●応用例とサンプルコード

表示要素の実行方法を応用して、さまざまなケースで実行できるようになります。

○サンプルコード3：jQueryを使った要素表示時の実行

jQueryを使って要素が表示されたら実行する方法です。

次のサンプルコードでは、要素が表示されたら、メッセージをコンソールに表示します。

$(document).ready(() => {
  console.log('要素が表示されました。');
});

○サンプルコード4：要素の表示状態を監視して実行

要素が表示されたら実行するために、MutationObserverを使って要素の表示状態を監視する方法です。

次のサンプルコードでは、要素が表示されたら、メッセージをコンソールに表示します。

// 監視対象の要素を取得
const targetNode = document.getElementById('target');

// コールバック関数
const callback = (mutationsList, observer) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      console.log('要素が表示されました。');
    }
  }
};

// MutationObserverのインスタンスを作成
const observer = new MutationObserver(callback);

// オプションを指定
const config = { attributes: true, attributeFilter: ['style'] };

// 対象要素の監視を開始
observer.observe(targetNode, config);

○サンプルコード5：スクロールイベントを使った実行

スクロールイベントを使って、画面がスクロールされたら実行する方法です。

次のサンプルコードでは、スクロールイベントが発火したら、メッセージをコンソールに表示します。

window.addEventListener('scroll', () => {
  console.log('スクロールが発生しました。');
});

○サンプルコード6：setTimeoutを使った遅延実行

setTimeoutを使って、一定時間後に実行する方法です。

次のサンプルコードでは、3秒後にメッセージをコンソールに表示します。

setTimeout(() => {
  console.log('3秒後に実行されました。');
}, 3000);

○サンプルコード7：要素が画面内に入ったときの実行

要素が画面内に入ったときに実行する方法です。

次のサンプルコードでは、要素が画面内に入ったら、メッセージをコンソールに表示します。

const target = document.getElementById('target');

window.addEventListener('scroll', () => {
  const rect = target.getBoundingClientRect();
  if (rect.top <= window.innerHeight && rect.bottom >= 0) {
    console.log('要素が画面内に入りました。');
  }
});

○サンプルコード8：Ajaxで読み込んだ要素の表示時実行

Ajaxで読み込んだ要素が表示されたら実行する方法です。

次のサンプルコードでは、要素が表示されたら、メッセージをコンソールに表示します。

$.ajax({
  url: 'example.html',
  success: (data) => {
    $('#container').html(data);
    console.log('Ajaxで読み込んだ要素が表示されました。');
  }
});

○サンプルコード9：IntersectionObserverを使った要素表示時の実行

IntersectionObserverを使って、要素が画面内に入ったときに実行する方法です。

次のサンプルコードでは、要素が画面内に入ったら、メッセージをコンソールに表示します。

// 監視対象の要素を取得
const target = document.getElementById('target');

// コールバック関数
const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('要素が画面内に入りました。');
      observer.unobserve(entry.target); // 監視を解除
    }
  });
};

// IntersectionObserverのインスタンスを作成
const observer = new IntersectionObserver(callback);

// 対象要素の監視を開始
observer.observe(target);