diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
| commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
| tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/nodelist | |
| parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
| download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/api/nodelist')
| -rw-r--r-- | files/fr/web/api/nodelist/entries/index.md | 62 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/foreach/index.md | 130 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/index.md | 136 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/item/index.md | 45 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/keys/index.md | 63 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/length/index.md | 42 | ||||
| -rw-r--r-- | files/fr/web/api/nodelist/values/index.md | 63 |
7 files changed, 219 insertions, 322 deletions
diff --git a/files/fr/web/api/nodelist/entries/index.md b/files/fr/web/api/nodelist/entries/index.md index 55a048203d..cfe4b4b73a 100644 --- a/files/fr/web/api/nodelist/entries/index.md +++ b/files/fr/web/api/nodelist/entries/index.md @@ -12,21 +12,22 @@ tags: - Noeuds translation_of: Web/API/NodeList/entries --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<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> +La méthode **`NodeList.entries()`** 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")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">list.entries();</pre> + list.entries(); -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p> +renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var node = document.createElement("div"); +```js +var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); @@ -40,42 +41,25 @@ var list = node.childNodes; for (var entry of list.entries()) { console.log(entry); } -</pre> +``` -<p>résultat :</p> +résultat : -<pre>Array [ 0, <p> ] -Array [ 1, #text "hey" ] -Array [ 2, <span> ]</pre> + Array [ 0, <p> ] + Array [ 1, #text "hey" ] + Array [ 2, <span> ] -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG','#interface-nodelist','entries() (as iterable<Node>)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div> +{{Compat("api.NodeList.entries")}} +## Voir aussi -<p>{{Compat("api.NodeList.entries")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Node")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> +- {{domxref("Node")}} +- {{domxref("NodeList")}} diff --git a/files/fr/web/api/nodelist/foreach/index.md b/files/fr/web/api/nodelist/foreach/index.md index 0a0eb9f1a8..72a8613f55 100644 --- a/files/fr/web/api/nodelist/foreach/index.md +++ b/files/fr/web/api/nodelist/foreach/index.md @@ -9,44 +9,42 @@ tags: - Noeuds translation_of: Web/API/NodeList/forEach --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<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> +La méthode **`forEach()`** 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. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>nodeList.</em>forEach<em>(callback[, thisArg]);</em> -</pre> + nodeList.forEach(callback[, thisArg]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<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> +- `callback` -<h3 id="Valeur_retournée">Valeur retournée</h3> + - : Fonction à exécuter pour chaque élément, contenant éventuellement 3 arguments : -<p>{{jsxref('undefined')}} (<em>indéfini</em>).</p> + - _`currentValue`_ + - : L'élément en cours de traitement dans la NodeList. + - `currentIndex` + - : L'index de l'élément en cours de traitement dans la NodeList. + - _`listObj`_ + - : L'objet NodeList auquel `forEach()` est appliqué. -<h2 id="Exceptions">Exceptions</h2> +- ` thisArg`` {{Optional_inline}} ` + - : Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du `callback` (_rappel_). -<p><em>Aucune</em>.</p> +### Valeur retournée -<h2 id="Exemple">Exemple</h2> +{{jsxref('undefined')}} (_indéfini_). -<pre class="brush: js">var node = document.createElement("div"); +## Exceptions + +_Aucune_. + +## Exemple + +```js +var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); @@ -62,62 +60,42 @@ list.forEach( console.log(currentValue + ', ' + currentIndex + ', ' + this); }, 'myThisArg' -);</pre> +); +``` -<p>résultat :</p> +résultat : -<pre>[object HTMLParagraphElement], 0, myThisArg -[object Text], 1, myThisArg -[object HTMLSpanElement], 2, myThisArg</pre> + [object HTMLParagraphElement], 0, myThisArg + [object Text], 1, myThisArg + [object HTMLSpanElement], 2, myThisArg -<h2 id="Polyfill">Polyfill</h2> +## Polyfill -<p>Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les navigateurs prenant en charge <a href="https://caniuse.com/#search=es5">ES5</a> :</p> +Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les navigateurs prenant en charge [ES5](https://caniuse.com/#search=es5) : -<pre class="brush: js">if (window.NodeList && !NodeList.prototype.forEach) { +```js +if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = function (callback, thisArg) { thisArg = thisArg || window; - for (var i = 0; i < this.length; i++) { + 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> +} +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | Définit `NodeList` comme `iterable<Node> `(_noeud itérable_) | +| {{SpecName("WebIDL", "#es-forEach", "forEach")}} | {{Spec2("WebIDL")}} | Définit `forEach` sur les déclarations `iterable` (_itératives_) | + +## Compatibilité des navigateurs + +{{Compat("api.NodeList.forEach")}} + +## Voir aussi + +- {{domxref("Node")}} +- {{domxref("NodeList")}} diff --git a/files/fr/web/api/nodelist/index.md b/files/fr/web/api/nodelist/index.md index 38e9a6121e..5f326cadc6 100644 --- a/files/fr/web/api/nodelist/index.md +++ b/files/fr/web/api/nodelist/index.md @@ -9,111 +9,87 @@ tags: - Noeuds translation_of: Web/API/NodeList --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<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> +Les objets **`NodeList`** sont des collections de nœuds comme celles retournées par {{domxref("Node.childNodes")}} et la méthode {{domxref("document.querySelectorAll()")}}. -<div class="note"> -<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> +> **Note :** Bien que `NodeList` ne soit pas un tableau (`Array`), il est possible d'itérer dessus en utilisant `forEach()`. Il peut également être converti en tableau (`Array`) en utilisant {{jsxref("Array.from()")}}. +> +> Néanmoins certains vieux navigateurs n'ont pas encore implémenté `NodeList.forEach()` ni `Array.from()`. Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document). -<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> +Dans certains cas, la `NodeList` 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>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">var parent = document.getElementById('parent'); +```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> +console.log(child_nodes.length); // devrait afficher "3" +``` -<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> +Dans d'autres cas, la `NodeList` 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 `NodeList` statique. -<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> +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. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<dl> - <dt>{{domxref("NodeList.length")}}</dt> - <dd>Le nombre de nœuds dans la <code>NodeList</code>.</dd> -</dl> +- {{domxref("NodeList.length")}} + - : Le nombre de nœuds dans la `NodeList`. -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<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> +- {{domxref("NodeList.item()")}} + - : Retourne un élément de la liste par son index ou `null` si l'index est en dehors des limites. Équivalent à `nodeList[idx]` (qui renvoie à la place `undefined` quand `idx` est hors des limites). +- {{domxref("NodeList.entries()")}} + - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. +- {{domxref("NodeList.forEach()")}} + - : exécute une fonction fournie une fois par élément `NodeList`. +- {{domxref("NodeList.keys()")}} + - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet. +- {{domxref("NodeList.values()")}} + - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les valeurs des paires clé / valeur contenues dans cet objet. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Il est possible de boucler sur les éléments d'une <code>NodeList</code> en utilisant :</p> +Il est possible de boucler sur les éléments d'une `NodeList` en utilisant : -<pre class="brush: js">for (var i = 0; i < myNodeList.length; ++i) { +```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">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> +Ne soyez pas tenté d'utiliser [`for… in`](/fr/docs/JavaScript/Reference/Instructions/for...in) ou [`for each… in`](/fr/docs/JavaScript/Reference/Instructions/for_each…in) pour énumérer les éléments de la liste, car cela énumère également la taille (`length`) et les propriétés du `NodeList` et cause des erreurs si votre script ne gère que les objets de type {{domxref("element")}}. De plus, `for… in` ne garantit pas de visiter les propriétés dans un ordre particulier. -<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> +Les boucles [`for… of`](/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of) boucleront correctement sur les objets `NodeList` : -<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' ); +```js +var list = document.querySelectorAll( 'input[type=checkbox]' ); for (var item of list) { item.checked = true; -}</pre> +} +``` -<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> +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>Il y a aussi dans Internet Explorer une façon compatible d'utiliser {{jsxref("Array.forEach()", "Array.prototype.forEach")}} pour l'itération.</p> +Il y a aussi dans Internet Explorer une façon compatible d'utiliser {{jsxref("Array.forEach()", "Array.prototype.forEach")}} pour l'itération. -<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' ); +```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> - -<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> - -<p>{{Compat("api.NodeList")}}</p> +}); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM3 Core') }} | | +| {{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM2 Core') }} | | +| {{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM1') }} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.NodeList")}} diff --git a/files/fr/web/api/nodelist/item/index.md b/files/fr/web/api/nodelist/item/index.md index 8cee3e9216..d2c00f687f 100644 --- a/files/fr/web/api/nodelist/item/index.md +++ b/files/fr/web/api/nodelist/item/index.md @@ -9,42 +9,37 @@ tags: - Noeuds translation_of: Web/API/NodeList/item --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<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> +Renvoie un noeud depuis une [`NodeList`](/en-US/docs/Web/API/NodeList) par l'index. Cette méthode ne lance pas d'exceptions tant que vous fournissez des arguments. Une valeur `null` est renvoyée si l'index est hors des limites et une `TypeError` est lancée si aucun argument n'est fourni. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>nodeItem</em> = <em>nodeList</em>.item(<em>index</em>) -</pre> + nodeItem = nodeList.item(index) -<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">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> +- `nodeList` est une `NodeList`. Elle est généralement obtenue à partir d'une autre propriété ou méthode DOM, telle que [childNodes](/en-US/docs/Web/API/Node/childNodes). +- `index` est l'index du noeud à chercher. L'index commence à zéro. +- `nodeItem` est le numéro d'`index` du noeud dans la `nodeList` retourné par la méthode `item`. -<h2 id="Syntaxe_alternative">Syntaxe alternative</h2> +## Syntaxe alternative -<p>JavaScript propose également une syntaxe semblable à un tableau pour obtenir un élément d'une liste de nœuds par index :</p> +JavaScript propose également une syntaxe semblable à un tableau pour obtenir un élément d'une liste de nœuds par index : -<pre class="eval"><em>nodeItem</em> = <em>nodeList</em>[<em>index</em>] -</pre> + nodeItem = nodeList[index] -<h2 id="Exemple">Exemple</h2> +## Exemple -<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> +```js +var tables = document.getElementsByTagName("table"); +var firstTable = tables.item(1); // ou simplement tables[1] - renvoie le second tableau dans DOM +``` -<h2 id="Spécification">Spécification</h2> +## Spécification -<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> +[DOM Level 1 Core: NodeList.item()](https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item) -<p><a href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136">DOM Level 2 Core: NodeList.item()</a></p> +[DOM Level 2 Core: NodeList.item()](https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136) -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs - - -<p>{{Compat("api.NodeList.item")}}</p> +{{Compat("api.NodeList.item")}} diff --git a/files/fr/web/api/nodelist/keys/index.md b/files/fr/web/api/nodelist/keys/index.md index 79da27b5b6..e0076b5588 100644 --- a/files/fr/web/api/nodelist/keys/index.md +++ b/files/fr/web/api/nodelist/keys/index.md @@ -9,21 +9,22 @@ tags: - Noeuds translation_of: Web/API/NodeList/keys --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<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> +La méthode **`NodeList.keys()`** renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des `unsigned integer` (_entier non signé_). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">nodeList.keys();</pre> + nodeList.keys(); -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p> +Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var node = document.createElement("div"); +```js +var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); @@ -38,43 +39,25 @@ var list = node.childNodes; for(var key of list.keys()) { console.log(key); } -</pre> +``` -<p>Le résultat est :</p> +Le résultat est : -<pre>0 -1 -2 -</pre> + 0 + 1 + 2 -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG','#interface-nodelist','keys() (as iterable)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div> +{{Compat("api.NodeList.keys")}} +## Voir aussi -<p>{{Compat("api.NodeList.keys")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Node")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> +- {{domxref("Node")}} +- {{domxref("NodeList")}} diff --git a/files/fr/web/api/nodelist/length/index.md b/files/fr/web/api/nodelist/length/index.md index 0bc3206cd6..8e952d0472 100644 --- a/files/fr/web/api/nodelist/length/index.md +++ b/files/fr/web/api/nodelist/length/index.md @@ -9,46 +9,44 @@ tags: - Propriétés translation_of: Web/API/NodeList/length --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p><code>length</code> renvoie le nombre d'éléments dans une <code>NodeList</code>.</p> +`length` renvoie le nombre d'éléments dans une `NodeList`. -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><em>numItems</em> =<em>nodeList</em>.length -</pre> +```js +numItems =nodeList.length +``` -<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> +- `numItems` est un entier (_integer_), valeur représentant le nombre d'éléments dans une `NodeList`. -<h2 id="Example">Exemple</h2> +## Exemple -<pre class="brush: js">// tous les paragraphes dans le document +```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++) { +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">Notes</h2> +## Notes -<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> +Malgré l'emplacement de cette page dans la référence, `length` n'est pas une propriété d'[Element](en/DOM/element), mais plutôt d'une `NodeList`. Les objets NodeList sont retournés à partir des méthodes DOM comme [document.getElementsByTagName](en/DOM/document.getElementsByTagName). -<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> +`length` 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. -<h2 id="Specification">Spécification</h2> +## Spécification -<p><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length</a></p> +[length](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337) -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs - - -<p>{{Compat("api.NodeList.length")}}</p> +{{Compat("api.NodeList.length")}} diff --git a/files/fr/web/api/nodelist/values/index.md b/files/fr/web/api/nodelist/values/index.md index 74cf0f4ad5..5d3bc66e7d 100644 --- a/files/fr/web/api/nodelist/values/index.md +++ b/files/fr/web/api/nodelist/values/index.md @@ -10,21 +10,22 @@ tags: - Noeuds translation_of: Web/API/NodeList/values --- -<p>{{APIRef("DOM")}}</p> +{{APIRef("DOM")}} -<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> +La méthode **`NodeList.values()`** 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")}} (_noeud_). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">nodeList.values();</pre> + nodeList.values(); -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p> +Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: js">var node = document.createElement("div"); +```js +var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); @@ -39,43 +40,25 @@ var list = node.childNodes; for(var value of list.values()) { console.log(value); } -</pre> +``` -<p>Le résultat est :</p> +Le résultat est : -<pre><p> -#text "hey" -<span> -</pre> + <p> + #text "hey" + <span> -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG','#interface-nodelist','values() (as iterable<Node>)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<div> +{{Compat("api.NodeList.values")}} +## Voir aussi -<p>{{Compat("api.NodeList.values")}}</p> -</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("Node")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> +- {{domxref("Node")}} +- {{domxref("NodeList")}} |
