diff options
Diffstat (limited to 'files/fr/web/api/nodelist')
| -rw-r--r-- | files/fr/web/api/nodelist/entries/index.html | 81 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/foreach/index.html | 123 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/index.html | 201 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/item/index.html | 50 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/keys/index.html | 80 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/length/index.html | 54 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/values/index.html | 81 |
7 files changed, 670 insertions, 0 deletions
diff --git a/files/fr/web/api/nodelist/entries/index.html b/files/fr/web/api/nodelist/entries/index.html new file mode 100644 index 0000000000..7888945118 --- /dev/null +++ b/files/fr/web/api/nodelist/entries/index.html @@ -0,0 +1,81 @@ +--- +title: NodeList.entries() +slug: Web/API/NodeList/entries +tags: + - API + - DOM + - Iteration + - Liste + - Méthodes + - Node + - NodeList + - Noeuds +translation_of: Web/API/NodeList/entries +--- +<div>{{APIRef("DOM")}}</div> + +<p>La méthode <code><strong>NodeList.entries()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet . Les valeurs sont des objets {{domxref("Node")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">list.entries();</pre> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js;highlight:[12]">var node = document.createElement("div"); +var kid1 = document.createElement("p"); +var kid2 = document.createTextNode("hey"); +var kid3 = document.createElement("span"); +node.appendChild(kid1); +node.appendChild(kid2); +node.appendChild(kid3); + +var list = node.childNodes; + +// Utiliser for..of +for (var entry of list.entries()) { + console.log(entry); +} +</pre> + +<p>résultat :</p> + +<pre>Array [ 0, <p> ] +Array [ 1, #text "hey" ] +Array [ 2, <span> ]</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-nodelist','entries() (as iterable<Node>)')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("api.NodeList.entries")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/fr/web/api/nodelist/foreach/index.html b/files/fr/web/api/nodelist/foreach/index.html new file mode 100644 index 0000000000..7ab1ed297b --- /dev/null +++ b/files/fr/web/api/nodelist/foreach/index.html @@ -0,0 +1,123 @@ +--- +title: NodeList.prototype.forEach() +slug: Web/API/NodeList/forEach +tags: + - API + - DOM + - Liste + - Méthodes + - Noeuds +translation_of: Web/API/NodeList/forEach +--- +<p>{{APIRef("DOM")}}</p> + +<p>La méthode <strong><code>forEach()</code></strong> de l'interface {{domxref("NodeList")}} appelle le rappel donné en paramètre une fois pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>nodeList.</em>forEach<em>(callback[, thisArg]);</em> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Fonction à exécuter pour chaque élément, contenant éventuellement 3 arguments : + <dl> + <dt><em><code>currentValue</code></em></dt> + <dd>L'élément en cours de traitement dans la NodeList.</dd> + <dt><code><em>currentIndex</em></code></dt> + <dd>L'index de l'élément en cours de traitement dans la NodeList.</dd> + <dt><em><code>listObj</code></em></dt> + <dd>L'objet NodeList auquel <code>forEach()</code> est appliqué.</dd> + </dl> + </dd> + <dt><code>thisArg</code><code> {{Optional_inline}}</code></dt> + <dd>Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du <code>callback</code> (<em>rappel</em>).</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>{{jsxref('undefined')}} (<em>indéfini</em>).</p> + +<h2 id="Exceptions">Exceptions</h2> + +<p><em>Aucune</em>.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js;highlight:[6]">var node = document.createElement("div"); +var kid1 = document.createElement("p"); +var kid2 = document.createTextNode("hey"); +var kid3 = document.createElement("span"); + +node.appendChild(kid1); +node.appendChild(kid2); +node.appendChild(kid3); + +var list = node.childNodes; + +list.forEach( + function(currentValue, currentIndex, listObj) { + console.log(currentValue + ', ' + currentIndex + ', ' + this); + }, + 'myThisArg' +);</pre> + +<p>résultat :</p> + +<pre>[object HTMLParagraphElement], 0, myThisArg +[object Text], 1, myThisArg +[object HTMLSpanElement], 2, myThisArg</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les navigateurs prenant en charge <a href="https://caniuse.com/#search=es5">ES5</a> :</p> + +<pre class="brush: js">if (window.NodeList && !NodeList.prototype.forEach) { + NodeList.prototype.forEach = function (callback, thisArg) { + thisArg = thisArg || window; + for (var i = 0; i < this.length; i++) { + callback.call(thisArg, this[i], i, this); + } + }; +}</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>Définit <code>NodeList</code> comme <code>iterable<Node> </code>(<em>noeud itérable</em>)</td> + </tr> + <tr> + <td>{{SpecName("WebIDL", "#es-forEach", "forEach")}}</td> + <td>{{Spec2("WebIDL")}}</td> + <td>Définit <code>forEach</code> sur les déclarations <code>iterable</code> (<em>itératives</em>)</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("api.NodeList.forEach")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/fr/web/api/nodelist/index.html b/files/fr/web/api/nodelist/index.html new file mode 100644 index 0000000000..6748e70ec7 --- /dev/null +++ b/files/fr/web/api/nodelist/index.html @@ -0,0 +1,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> diff --git a/files/fr/web/api/nodelist/item/index.html b/files/fr/web/api/nodelist/item/index.html new file mode 100644 index 0000000000..e4d65fc86d --- /dev/null +++ b/files/fr/web/api/nodelist/item/index.html @@ -0,0 +1,50 @@ +--- +title: NodeList.item() +slug: Web/API/NodeList/item +tags: + - API + - DOM + - Liste + - Méthodes + - Noeuds +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> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>nodeItem</em> = <em>nodeList</em>.item(<em>index</em>) +</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>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> + +<h2 id="Syntaxe_alternative">Syntaxe alternative</h2> + +<p>JavaScript propose également une syntaxe semblable à un tableau pour obtenir un élément d'une liste de nœuds par index :</p> + +<pre class="eval"><em>nodeItem</em> = <em>nodeList</em>[<em>index</em>] +</pre> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js">var tables = document.getElementsByTagName("table"); +var firstTable = tables.item(1); // ou simplement tables[1] - renvoie le <strong>second</strong> tableau dans DOM +</pre> + +<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 class="external" 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> + + + +<p>{{Compat("api.NodeList.item")}}</p> diff --git a/files/fr/web/api/nodelist/keys/index.html b/files/fr/web/api/nodelist/keys/index.html new file mode 100644 index 0000000000..6f4f693c1a --- /dev/null +++ b/files/fr/web/api/nodelist/keys/index.html @@ -0,0 +1,80 @@ +--- +title: NodeList.keys() +slug: Web/API/NodeList/keys +tags: + - API + - DOM + - Liste + - Méthodes + - Noeuds +translation_of: Web/API/NodeList/keys +--- +<p>{{APIRef("DOM")}}</p> + +<p>La méthode <code><strong>NodeList.keys()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des <code>unsigned integer</code> (<em>entier non signé</em>).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">nodeList.keys();</pre> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js;highlight:[13]">var node = document.createElement("div"); +var kid1 = document.createElement("p"); +var kid2 = document.createTextNode("hey"); +var kid3 = document.createElement("span"); + +node.appendChild(kid1); +node.appendChild(kid2); +node.appendChild(kid3); + +var list = node.childNodes; + +// Utilisation de for..of +for(var key of list.keys()) { + console.log(key); +} +</pre> + +<p>Le résultat est :</p> + +<pre>0 +1 +2 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-nodelist','keys() (as iterable)')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("api.NodeList.keys")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/fr/web/api/nodelist/length/index.html b/files/fr/web/api/nodelist/length/index.html new file mode 100644 index 0000000000..b68db9816b --- /dev/null +++ b/files/fr/web/api/nodelist/length/index.html @@ -0,0 +1,54 @@ +--- +title: NodeList.length +slug: Web/API/NodeList/length +tags: + - API + - DOM + - Liste + - Noeuds + - Propriétés +translation_of: Web/API/NodeList/length +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Résumé">Résumé</h2> + +<p><code>length</code> renvoie le nombre d'éléments dans une <code>NodeList</code>.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="brush: js"><em>numItems</em> =<em>nodeList</em>.length +</pre> + +<ul> + <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> + +<pre class="brush: js">// tous les paragraphes dans le document +var items = document.getElementsByTagName("p"); +// pour chaque élément de la liste, +// ajouter l'élément entier en tant que chaîne de HTML +var gross = ""; +for (var i = 0; i < items.length; i++) { + gross += items[i].innerHTML; +} +// gross est maintenant tout le HTML pour les paragraphes +</pre> + +<h2 id="Notes" name="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> + +<p><a class="external" 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> + + + +<p>{{Compat("api.NodeList.length")}}</p> diff --git a/files/fr/web/api/nodelist/values/index.html b/files/fr/web/api/nodelist/values/index.html new file mode 100644 index 0000000000..4abe62ad34 --- /dev/null +++ b/files/fr/web/api/nodelist/values/index.html @@ -0,0 +1,81 @@ +--- +title: NodeList.values() +slug: Web/API/NodeList/values +tags: + - API + - DOM + - Itérateur + - Liste + - Méthodes + - Noeuds +translation_of: Web/API/NodeList/values +--- +<p>{{APIRef("DOM")}}</p> + +<p>La méthode <code><strong>NodeList.values()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("Node")}} (<em>noeud</em>).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">nodeList.values();</pre> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js;highlight:[13]">var node = document.createElement("div"); +var kid1 = document.createElement("p"); +var kid2 = document.createTextNode("hey"); +var kid3 = document.createElement("span"); + +node.appendChild(kid1); +node.appendChild(kid2); +node.appendChild(kid3); + +var list = node.childNodes; + +// Utilisation de for..of +for(var value of list.values()) { + console.log(value); +} +</pre> + +<p>Le résultat est :</p> + +<pre><p> +#text "hey" +<span> +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-nodelist','values() (as iterable<Node>)')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("api.NodeList.values")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> |