2021-07-10

JavaScript: getElementById()でIDを複数指定したい場合

JavaScriptの getElementById()メソッドは、1つのID名を指定するメソッドです。

複数のID名を指定して一括で取得したい場合、専用の関数を作ってあげると良いでしょう。

ここでは、複数のID名を指定できる関数を紹介します。

複数のID名を指定できる関数サンプル

次の getElements()関数は、複数のID名を指定し、指定した要素の集合を返します。

引数はargumentsオブジェクトを使って取得しています。

// 複数のid名で一括取得
function getElements(){
	
	let elem = {};
	let elements = {};
	let id = '';
	
	// 引数の数だけループ
	for (let i = 0; i < arguments.length; i++){
		id = arguments[i];
		elem = document.getElementById(id);
		
		// id名が定義されている場合のみ、elementsに追加
		if (elem != null){
			elements[id] = elem;
		}
	}
	
	return elements;
}

getElements()関数の使い方

HTML

<p id="test1">コンテンツ1</p>

<p id="test2">コンテンツ2</p>

<p id="test3">コンテンツ3</p>

JavaScript

実際にgetElements()関数を使ってみます。

要素を使用する場合は、「変数名.id名」又は「変数名['id名']」で使用できます。

// 一括取得
let objs = getElements('test1', 'test2', 'test3');

// id="test1"
console.log(objs.test1.textContent);  // コンテンツ1

// id="test2"
console.log(objs['test2'].textContent); // コンテンツ2

// 全部
console.log(objs);  // {test1: p#test1, test2: p#test2, test3: p#test3}