diff options
Diffstat (limited to 'files/fr/web/api/nodelist')
| -rw-r--r-- | files/fr/web/api/nodelist/entries/index.html | 2 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/foreach/index.html | 2 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/index.html | 31 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/item/index.html | 8 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/keys/index.html | 2 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/length/index.html | 10 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/values/index.html | 2 |
7 files changed, 27 insertions, 30 deletions
diff --git a/files/fr/web/api/nodelist/entries/index.html b/files/fr/web/api/nodelist/entries/index.html index 7888945118..55a048203d 100644 --- a/files/fr/web/api/nodelist/entries/index.html +++ b/files/fr/web/api/nodelist/entries/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/NodeList/entries <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[12]">var node = document.createElement("div"); +<pre class="brush: js">var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); diff --git a/files/fr/web/api/nodelist/foreach/index.html b/files/fr/web/api/nodelist/foreach/index.html index 7ab1ed297b..0a0eb9f1a8 100644 --- a/files/fr/web/api/nodelist/foreach/index.html +++ b/files/fr/web/api/nodelist/foreach/index.html @@ -46,7 +46,7 @@ translation_of: Web/API/NodeList/forEach <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[6]">var node = document.createElement("div"); +<pre class="brush: js">var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); 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> diff --git a/files/fr/web/api/nodelist/item/index.html b/files/fr/web/api/nodelist/item/index.html index e4d65fc86d..8cee3e9216 100644 --- a/files/fr/web/api/nodelist/item/index.html +++ b/files/fr/web/api/nodelist/item/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/NodeList/item --- <div>{{APIRef("DOM")}}</div> -<p class="summary">Renvoie un noeud depuis une <a href="/en-US/docs/Web/API/NodeList"><code>NodeList</code></a> par l'index. Cette méthode ne lance pas d'exceptions tant que vous fournissez des arguments. Une valeur <code>null</code> est renvoyée si l'index est hors des limites et une <code>TypeError</code> est lancée si aucun argument n'est fourni.</p> +<p>Renvoie un noeud depuis une <a href="/en-US/docs/Web/API/NodeList"><code>NodeList</code></a> par l'index. Cette méthode ne lance pas d'exceptions tant que vous fournissez des arguments. Une valeur <code>null</code> est renvoyée si l'index est hors des limites et une <code>TypeError</code> est lancée si aucun argument n'est fourni.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -19,7 +19,7 @@ translation_of: Web/API/NodeList/item </pre> <ul> - <li><code>nodeList</code> est une <code>NodeList</code>. Elle est généralement obtenue à partir d'une autre propriété ou méthode DOM, telle que <a href="/en-US/docs/Web/API/Node/childNodes" title="childNodes">childNodes</a>.</li> + <li><code>nodeList</code> est une <code>NodeList</code>. Elle est généralement obtenue à partir d'une autre propriété ou méthode DOM, telle que <a href="/en-US/docs/Web/API/Node/childNodes">childNodes</a>.</li> <li><code>index</code> est l'index du noeud à chercher. L'index commence à zéro.</li> <li><code>nodeItem</code> est le numéro d'<code>index</code> du noeud dans la <code>nodeList</code> retourné par la méthode <code>item</code>.</li> </ul> @@ -39,9 +39,9 @@ var firstTable = tables.item(1); // ou simplement tables[1] - renvoie le <strong <h2 id="Spécification">Spécification</h2> -<p><a class="external" href="https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item">DOM Level 1 Core: NodeList.item()</a></p> +<p><a href="https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item">DOM Level 1 Core: NodeList.item()</a></p> -<p><a class="external" href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136">DOM Level 2 Core: NodeList.item()</a></p> +<p><a href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136">DOM Level 2 Core: NodeList.item()</a></p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/nodelist/keys/index.html b/files/fr/web/api/nodelist/keys/index.html index 6f4f693c1a..79da27b5b6 100644 --- a/files/fr/web/api/nodelist/keys/index.html +++ b/files/fr/web/api/nodelist/keys/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/NodeList/keys <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[13]">var node = document.createElement("div"); +<pre class="brush: js">var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); diff --git a/files/fr/web/api/nodelist/length/index.html b/files/fr/web/api/nodelist/length/index.html index b68db9816b..0bc3206cd6 100644 --- a/files/fr/web/api/nodelist/length/index.html +++ b/files/fr/web/api/nodelist/length/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/NodeList/length <p><code>length</code> renvoie le nombre d'éléments dans une <code>NodeList</code>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="brush: js"><em>numItems</em> =<em>nodeList</em>.length </pre> @@ -24,7 +24,7 @@ translation_of: Web/API/NodeList/length <li><code>numItems</code> est un entier (<em>integer</em>), valeur représentant le nombre d'éléments dans une <code>NodeList</code>.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">// tous les paragraphes dans le document var items = document.getElementsByTagName("p"); @@ -37,15 +37,15 @@ for (var i = 0; i < items.length; i++) { // gross est maintenant tout le HTML pour les paragraphes </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Malgré l'emplacement de cette page dans la référence, <code>length</code> n'est pas une propriété d'<a href="en/DOM/element">Element</a>, mais plutôt d'une <code>NodeList</code>. Les objets NodeList sont retournés à partir des méthodes DOM comme <a href="en/DOM/document.getElementsByTagName">document.getElementsByTagName</a>.</p> <p><code>length</code> est une propriété très commune dans la programmation de DOM. Il est très courant de tester la longueur d'une liste (pour voir si elle existe) et de l'utiliser comme itérateur dans une boucle for, comme dans l'exemple ci-dessus.</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length</a></p> +<p><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length</a></p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/nodelist/values/index.html b/files/fr/web/api/nodelist/values/index.html index 4abe62ad34..74cf0f4ad5 100644 --- a/files/fr/web/api/nodelist/values/index.html +++ b/files/fr/web/api/nodelist/values/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/NodeList/values <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[13]">var node = document.createElement("div"); +<pre class="brush: js">var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); |
