1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: NodeList
slug: Web/API/NodeList
tags:
- API
- DOM
- Interface
- NodeList
- インターフェイス
translation_of: Web/API/NodeList
---
<div>{{APIRef("DOM")}}</div>
<p><span class="seoSummary"><strong><code>NodeList</code></strong> オブジェクトは{{Glossary("Node/DOM", "ノード")}}の集合であり、 {{domxref("Node.childNodes")}} などのプロパティや {{domxref("document.querySelectorAll()")}} などのメソッドの返値として用いられます。</span></p>
<div class="note">
<p><code>NodeList</code> は <code>Array</code> とは異なりますが、 <code>forEach()</code> メソッドで処理を反復適用することは可能です。 {{jsxref("Array.from()")}} を使うことで <code>Array</code> に変換することができます。</p>
<p>ただし、古いブラウザーでは <code>NodeList.forEach()</code> も <code>Array.from()</code> も実装されていない場合があります。これらの制限は {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} を使うことで回避することが可能です (この文書に詳しく書かれています)。</p>
</div>
<p>場合によっては、 <code>NodeList</code> が<em>ライブ</em>であること、すなわち DOM 内が更新されると自動的にコレクションが更新されることがあります。例えば、 {{domxref("Node.childNodes")}} はライブです。</p>
<pre class="brush: js">var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // "2" と仮定すると
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // "3" が出力される
</pre>
<p>一方、 <code>NodeList</code> が<em>静的</em>である場合、すなわち DOM 内の変更がコレクションの内容に影響を与えない場合もあります。 {{domxref("document.querySelectorAll()")}} メソッドは、静的な <code>NodeList</code> を返します。</p>
<p><code>NodeList</code> の各要素に反復処理を行う方法を選択したり、リストの長さをキャッシュしたりする場合は、この違いを考えておくといいでしょう。</p>
<h2 id="Properties" name="Properties">プロパティ</h2>
<dl>
<dt>{{domxref("NodeList.length")}}</dt>
<dd><code>NodeList</code> に含まれるノードの数です。</dd>
</dl>
<h2 id="Methods" name="Methods">メソッド</h2>
<dl>
<dt>{{domxref("NodeList.item()")}}</dt>
<dd>指定されたインデックスに対応するリスト内の要素を返します。ただし、インデックスが範囲外の場合は <code>null</code> を返します。</dd>
<dd><code>nodeList[i]</code> のアクセスの代替手段です (この場合、<code>i</code> が範囲外の時には <code>undefined</code> が返ります)。これは JavaScript 以外の言語による DOM の実装で便利です。</dd>
<dt>{{domxref("NodeList.entries()")}}</dt>
<dd>{{jsxref("Iteration_protocols","iterator")}} を返し、これによってコードがコレクションに含まれているキー・値の組を順次処理することができます。 (この場合、キーは 0 から始まる数値で値はノードです。)</dd>
<dt>{{domxref("NodeList.forEach()")}}</dt>
<dd>指定された関数を <code>NodeList</code> の各要素に対して実行し、その要素を関数の引数として渡します。</dd>
<dt>{{domxref("NodeList.keys()")}}</dt>
<dd>{{jsxref("Iteration_protocols", "iterator")}} を返し、これによってコードがコレクションに含まれているキー・値の組のキーを順次処理することができます。 (この場合、キーは 0 から始まる数値です。)</dd>
<dt>{{domxref("NodeList.values()")}}</dt>
<dd>{{jsxref("Iteration_protocols", "iterator")}} を返し、これによってコードがコレクションに含まれているキー・値の組の値 (ノード) を順次処理することができます。</dd>
</dl>
<h2 id="Example" name="Example">例</h2>
<p><code>NodeList</code> の各要素について処理を順次適用するには、以下のような方法があります。</p>
<pre class="brush: js">for (var i = 0; i < myNodeList.length; i++) {
var item = myNodeList[i];
}
</pre>
<p>リストの要素について処理を回すために {{jsxref("Statements/for...in", "for...in")}} や {{jsxref("Statements/for_each...in", "for each...in")}} を用いてはいけません。なぜなら、 <code>NodeList</code> のプロパティである要素に加えて、 length プロパティについても処理が適用されるため、 {{domxref("element")}} オブジェクトのみ処理すべきスクリプトではエラーが生じます。また、<code>for..in</code> で取得されるプロパティの順番は保証されていません。</p>
<p>{{jsxref("Statements/for...of", "for...of")}} ループであれば、 <code>NodeList</code> オブジェクトを正しく扱うことができます。</p>
<pre class="brush: js">var list = document.querySelectorAll('input[type=checkbox]');
for (var checkbox of list) {
checkbox.checked = true;
}</pre>
<p>最近のブラウザでは、イテレーターに基づくメソッドとして {{domxref("NodeList.forEach()", "forEach()")}}, {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, {{domxref("NodeList.keys()", "keys()")}} に対応しています。</p>
<p>また、 Internet Explorer と互換性がある手法として、反復に {{jsxref("Array.forEach()", "Array.prototype.forEach")}} を使用することができます。</p>
<pre class="brush: js">var list = document.querySelectorAll('input[type=checkbox]');
Array.prototype.forEach.call(list, function (checkbox) {
checkbox.checked = true;
});</pre>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
<td>{{ Spec2('DOM WHATWG') }}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
<td>{{ Spec2('DOM3 Core') }}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
<td>{{ Spec2('DOM2 Core') }}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
<td>{{ Spec2('DOM1') }}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<p>{{Compat("api.NodeList")}}</p>
|
