NodeList インターフェイス
NodeList インターフェイスとは、複数の Node オブジェクトのハンドラーを配列で管理する NodeList オブジェクトを生成するためのインターフェイスです。
ハンドラーとは、Node オブジェクトそのものではなく、オブジェクトの実体を示すものです。プログラムでのハンドラーとは、オブジェクトの保存場所を示すものである場合があります。
forEach() メソッドで反復処理ができます。NodeList オブジェクトを Array オブジェクトに変換するには、Array.from() メソッドを使用します。
- ad -
プロパティ(Properties)
プロパティ名 | 概要 |
---|---|
length | Node数 |
メソッド(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 -