備忘録的プログラミングリファレンス

NodeList インターフェイス

　NodeList インターフェイスとは、複数の Node オブジェクトのハンドラーを配列で管理する NodeList オブジェクトを生成するためのインターフェイスです。
　ハンドラーとは、Node オブジェクトそのものではなく、オブジェクトの実体を示すものです。プログラムでのハンドラーとは、オブジェクトの保存場所を示すものである場合があります。

　forEach() メソッドで反復処理ができます。NodeList オブジェクトを Array オブジェクトに変換するには、Array.from() メソッドを使用します。

ページ内 Index

- ad -

プロパティ(Properties)

プロパティ名概要
lengthNode数

メソッド(Methods)

メソッド名概要
item()何番目かを指定することで該当する Node オブジェクトを返す。NodeList[n]でも代用できる
entries()NodeList における順番を示す番号と Node オブジェクトのハンドラーの組み合わせのリストを返す。目的のオブジェクトが何番目かを知ることができる
forEach()繰り返し処理に利用する。NodeList.forEach( console.log(this); ); のようにカッコ内で Node オブジェクトを順次処理できる
keys()NodeList における順番を示すリストを返す
values()NodeList における Node オブジェクトのリストを返す

Example

　NodeList オブジェクトから Node オブジェクトを取得する方法例です。

　例えば、<input type="radio"> や <input type="checkbox"> はそのエレメントを取得すると NodeList で返します。 

<form name="form">
	<label<input type="radio" name="input_name" value="saru" />さる</label>
	<label<input type="radio" name="input_name" value="inu" checked/>いぬ</label>
	<label<input type="radio" name="input_name" value="tori" />とり</label>
</form>
<script>
	var NodeList = document.form.input_name;
</script>

　このような場合での checked 属性が設定されたデータの取り出しには以下のような手法で使用します。

for

　NodeList から for ループで Node オブジェクトを順次取得し処理する方法です。

var list_node = document.getElementsByName('name');
for (var i = 0; i < list_node.length; i++) {
	var item = list_node[i];
	var value = list_node[i].value;
}

　以下のように item() メソッドで書くこともできます。

var list_node = document.getElementsByName('name');
for (var i = 0; i < list_node.length; i++) {
	var item = list_node.item(i);
	var value = list_node.item(i).value;
}

for..of

　for.. of を使用した Node オブジェクトの取得方法です。input エレメントの checkbox タイプなどには便利でしょう。 for.. in や for.. each.. in は思ったような動作をしない場合があり注意が必要です。

var list_checkbox = document.querySelectorAll('input[type=checkbox]');
for (var obj_checkbox of list_checkbox) {
	if( obj_checkbox.checked == true ){
			console.log( obj_checkbox );
	}
}

forEach()

　forEach() メソッドで NodeList の各 Node オブジェクトを取得することもできます。ただし、break や continue が使えません。途中で処理を中断したい場合は for ループを使用します。

var list_node = document.getElementsByName('name');
list_node.forEach(
	console.log( this );
);

entries()

　entries() メソッドを使用すると番号とオブジェクトへのハンドラーのリストを返します。

var list_node = document.getElementsByName('name');
for( const entry of list_node.entries() ) {
	console.log( entry );
}

keys()

　keys() メソッドは Node オブジェクトの並び順を示す番号のリストを返します。

var list_node = document.getElementsByName('name');
for( const key of list_node.keys() ) {
	console.log( key );
}

values()

　values() メソッドは Node オブジェクトのハンドラーのリストを返します。

var list_node = document.getElementsByName('name');
for( const value of list_node.values() ) {
	console.log( value );
}

- ad -

関連（Related）