PORTFOLIO & WEB DESIGN MEMORANDOM BLOG   
PORTFOLIO & WEB DESIGN MEMORANDOM BLOG   

【JAVASCRIPT】オブジェクトを利用したDOM操作サンプルと解説

  1. const domHelper = {
  2.   element: document.getElementById('sampleElement'),
  3.   
  4.   setText: function(text) {
  5.     this.element.innerText = text;
  6.   },
  7.   
  8.   setBackgroundColor: function(color) {
  9.     this.element.style.backgroundColor = color;
  10.   },
  11.   
  12.   toggleVisibility: function() {
  13.     if (this.element.style.display === 'none') {
  14.       this.element.style.display = 'block';
  15.     } else {
  16.       this.element.style.display = 'none';
  17.     }
  18.   },
  19.   
  20.   addClass: function(className) {
  21.     this.element.classList.add(className);
  22.   },
  23.   
  24.   removeClass: function(className) {
  25.     this.element.classList.remove(className);
  26.   }
  27. };
  28. // メソッドの使用
  29. domHelper.setText('Welcome to the DOM Helper!');
  30. domHelper.setBackgroundColor('lightblue');
  31. domHelper.addClass('highlight');
  32. setTimeout(() => domHelper.toggleVisibility(), 3000);
  33. setTimeout(() => domHelper.toggleVisibility(), 6000);
  34. setTimeout(() => domHelper.removeClass('highlight'), 9000);

オブジェクトの定義と初期化

  1. const domHelper = {
  2.   element: document.getElementById('sampleElement'),

const domHelper

新しいオブジェクト domHelper を定義しています。const を使っているため、このオブジェクトは再代入されませんが、そのプロパティは変更可能です。

element: document.getElementById(‘sampleElement’)

document.getElementById(‘sampleElement’) により、HTML文書内のIDが sampleElement の要素を取得し、domHelper オブジェクトの element プロパティに代入しています。これにより、他のメソッドでこの要素にアクセスできます。

setText メソッド

  1.   setText: function(text) {
  2.     this.element.innerText = text;
  3.   },

setText: function(text)

text という引数を受け取るメソッド setText を定義しています。

this.element.innerText = text:

this は domHelper オブジェクトを指します。this.element で取得した要素の innerText プロパティを引数 text の値に設定します。これにより、要素の表示テキストが変更されます。

setBackgroundColor メソッド

  1.   setBackgroundColor: function(color) {
  2.     this.element.style.backgroundColor = color;
  3.   },

setBackgroundColor: function(color)

color という引数を受け取るメソッド setBackgroundColor を定義しています。

this.element.style.backgroundColor = color

this.element で取得した要素の style.backgroundColor プロパティを引数 color の値に設定します。これにより、要素の背景色が変更されます。

toggleVisibility メソッド

  1.   toggleVisibility: function() {
  2.     if (this.element.style.display === 'none') {
  3.       this.element.style.display = 'block';
  4.     } else {
  5.       this.element.style.display = 'none';
  6.     }
  7.   },

toggleVisibility: function()

引数を取らないメソッド toggleVisibility を定義しています。

if (this.element.style.display === ‘none’)

this.element.style.display が ‘none’ であれば、要素は非表示状態です。

this.element.style.display = ‘block’

要素を表示状態に変更します。

else { this.element.style.display = ‘none’ }

それ以外の場合、要素を非表示状態に変更します。

このメソッドは、要素の表示/非表示状態をトグル(切り替え)します。

addClass メソッド

  1.   addClass: function(className) {
  2.     this.element.classList.add(className);
  3.   },

addClass: function(className)

className という引数を受け取るメソッド addClass を定義しています。

this.element.classList.add(className)

this.element で取得した要素の classList プロパティに対して add メソッドを呼び出し、引数 className のクラスを追加します。これにより、要素に新しいCSSクラスが追加されます。

removeClass メソッド

  1.   removeClass: function(className) {
  2.     this.element.classList.remove(className);
  3.   }

removeClass: function(className)

className という引数を受け取るメソッド removeClass を定義しています。

this.element.classList.remove(className)

this.element で取得した要素の classList プロパティに対して remove メソッドを呼び出し、引数 className のクラスを削除します。これにより、要素から指定されたCSSクラスが削除されます。

テキストの設定

  1. domHelper.setText('Welcome to the DOM Helper!');

この行は、IDが sampleElement の要素のテキストを “Welcome to the DOM Helper!” に設定します。

背景色の設定

  1. domHelper.setBackgroundColor('lightblue');

この行は、IDが sampleElement の要素の背景色を lightblue に設定します。

CSSクラスの追加

  1. domHelper.addClass('highlight');

この行は、IDが sampleElement の要素に highlight というCSSクラスを追加します。

要素の表示/非表示をトグル

  1. setTimeout(() => domHelper.toggleVisibility(), 3000);

この行は、3秒後にIDが sampleElement の要素の表示/非表示を切り替えます。

再度表示/非表示をトグル

  1. setTimeout(() => domHelper.toggleVisibility(), 6000);

この行は、6秒後に再度IDが sampleElement の要素の表示/非表示を切り替えます。

CSSクラスの削除

  1. setTimeout(() => domHelper.removeClass('highlight'), 9000);

この行は、9秒後にIDが sampleElement の要素から highlight というCSSクラスを削除します。

このサンプルでは、DOM要素に対してテキストの変更、背景色の設定、CSSクラスの追加/削除、表示/非表示のトグルといった操作をオブジェクトを使って簡潔に行う方法を示しています。

MILMONA   MILMONA   MILMONA   MILMONA   MILMONA   
MILMONA   MILMONA   MILMONA   MILMONA   MILMONA