aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/nodelist/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/api/nodelist/index.html')
-rw-r--r--files/fr/web/api/nodelist/index.html31
1 files changed, 14 insertions, 17 deletions
diff --git a/files/fr/web/api/nodelist/index.html b/files/fr/web/api/nodelist/index.html
index a6b5649708..38e9a6121e 100644
--- a/files/fr/web/api/nodelist/index.html
+++ b/files/fr/web/api/nodelist/index.html
@@ -9,23 +9,23 @@ tags:
- Noeuds
translation_of: Web/API/NodeList
---
-<p id="Sommaire">{{APIRef("DOM")}}</p>
+<p>{{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><strong>Note :</strong> 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>
+<pre class="brush: js">var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // supposons "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // devrait afficher "3"</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>
@@ -35,9 +35,6 @@ console<span class="punctuation token">.</span><span class="function token">log<
<dl>
<dt>{{domxref("NodeList.length")}}</dt>
-</dl>
-
-<dl>
<dd>Le nombre de nœuds dans la <code>NodeList</code>.</dd>
</dl>
@@ -65,23 +62,23 @@ console<span class="punctuation token">.</span><span class="function token">log<
}
</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>Ne soyez pas tenté d'utiliser <code><a href="/fr/docs/JavaScript/Reference/Instructions/for...in">for… in</a></code> ou <code><a href="/fr/docs/JavaScript/Reference/Instructions/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>
+<p>Les boucles <code><a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/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>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>
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+ item.checked = true;
+});</pre>
<h2 id="Spécifications">Spécifications</h2>