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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
---
title: NodeList
slug: Web/API/NodeList
tags:
- API
- DOM
- Interface
- Liste
- Noeuds
translation_of: Web/API/NodeList
---
<p id="Sommaire">{{APIRef("DOM")}}</p>
<p>Les objets <strong><code>NodeList</code></strong> sont des collections de nœuds comme celles retournées par {{domxref("Node.childNodes")}} et la méthode {{domxref("document.querySelectorAll()")}}.</p>
<div class="note">
<p>Bien que <code>NodeList</code> ne soit pas un tableau (<code>Array</code>), il est possible d'itérer dessus en utilisant <code>forEach()</code>. Il peut également être converti en tableau (<code>Array</code>) en utilisant {{jsxref("Array.from()")}}.</p>
<p>Néanmoins certains vieux navigateurs n'ont pas encore implémenté <code>NodeList.forEach()</code> ni <code>Array.from()</code>. Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document).</p>
</div>
<p>Dans certains cas, la <code>NodeList</code> est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple, {{domxref("Node.childNodes")}} est en direct :</p>
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> parent <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parent'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">var</span> child_nodes <span class="operator token">=</span> parent<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>child_nodes<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// supposons "2"</span>
parent<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>child_nodes<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// devrait afficher "3"</span></code></pre>
<p>Dans d'autres cas, la <code>NodeList</code> est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}} renvoie une <code>NodeList</code> statique.</p>
<p>Il est bon de garder cette distinction à l'esprit pour choisir la façon de parcourir les éléments de la liste des nœuds et, en particulier, pour mettre en cache la longueur de la liste.</p>
<h2 id="Propriétés">Propriétés</h2>
<dl>
<dt>{{domxref("NodeList.length")}}</dt>
</dl>
<dl>
<dd>Le nombre de nœuds dans la <code>NodeList</code>.</dd>
</dl>
<h2 id="Méthodes">Méthodes</h2>
<dl>
<dt>{{domxref("NodeList.item()")}}</dt>
<dd>Retourne un élément de la liste par son index ou <code>null</code> si l'index est en dehors des limites. Équivalent à <code>nodeList[idx]</code> (qui renvoie à la place <code>undefined</code> quand <code>idx</code> est hors des limites).</dd>
<dt>{{domxref("NodeList.entries()")}}</dt>
<dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.</dd>
<dt>{{domxref("NodeList.forEach()")}}</dt>
<dd>exécute une fonction fournie une fois par élément <code>NodeList</code>.</dd>
<dt>{{domxref("NodeList.keys()")}}</dt>
<dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet.</dd>
<dt>{{domxref("NodeList.values()")}}</dt>
<dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les valeurs des paires clé / valeur contenues dans cet objet.</dd>
</dl>
<h2 id="Exemple">Exemple</h2>
<p>Il est possible de boucler sur les éléments d'une <code>NodeList</code> en utilisant :</p>
<pre class="brush: js">for (var i = 0; i < myNodeList.length; ++i) {
var item = myNodeList[i]; // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript
}
</pre>
<p>Ne soyez pas tenté d'utiliser <code><a href="/fr/docs/JavaScript/Reference/Instructions/for...in" title="JavaScript/ Reference/Statements/for...in">for… in</a></code> ou <code><a href="/fr/docs/JavaScript/Reference/Instructions/for_each…in" title="JavaScript/ Reference/Statements/for each...in">for each… in</a></code> pour énumérer les éléments de la liste, car cela énumère également la taille (<code>length</code>) et les propriétés du <code>NodeList</code> et cause des erreurs si votre script ne gère que les objets de type {{domxref("element")}}. De plus, <code>for… in</code> ne garantit pas de visiter les propriétés dans un ordre particulier.</p>
<p>Les boucles <code><a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of" title="JavaScript/Reference/Statements/for...of">for… of</a></code> boucleront correctement sur les objets <code>NodeList</code> :</p>
<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
for (var item of list) {
item.checked = true;
}</pre>
<p id="Comment_convertir_un_NodeList_en_Array">Les navigateurs récents prennent également en charge les méthodes d'itérateur {{domxref("NodeList.forEach()", "forEach()")}}, aussi bien que {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}} et {{domxref("NodeList.keys()", "keys()")}}.</p>
<p>Il y a aussi dans Internet Explorer une façon compatible d'utiliser {{jsxref("Array.forEach()", "Array.prototype.forEach")}} pour l'itération.</p>
<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> list <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span> <span class="string token">'input[type=checkbox]'</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>forEach<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>list<span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>item<span class="punctuation token">)</span> <span class="punctuation token">{</span>
item<span class="punctuation token">.</span>checked <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</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>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>forEach()</code></td>
<td>{{CompatChrome(51)}}</td>
<td>16 (maybe prior)</td>
<td>{{CompatGeckoDesktop(50)}}</td>
<td>{{CompatNo}}</td>
<td>38</td>
<td>10 (maybe prior)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Android</th>
<th>Android Webview</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>forEach()</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>16 (maybe prior)</td>
<td>{{CompatGeckoMobile(50)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>10 (maybe prior)</td>
<td>{{CompatChrome(51)}}</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
|
