You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
1.Yes, true. The element `elem.lastChild`is always the last one, it has no`nextSibling`.
2
-
2.No, wrong, because`elem.children[0]`is the first child *among elements*. But there may exist non-element nodes before it. So`previousSibling`may be a text node.
1
+
1.Oui c'est vrai. L'élément `elem.lastChild`est toujours le dernier, il n'a pas de`nextSibling`.
2
+
2.Non, c'est faux, car`elem.children[0]`est le premier enfant *parmi les éléments*. Mais il peut exister des nœuds non-éléments avant lui. Ainsi,`previousSibling`peut être un nœud texte.
3
3
4
-
Please note: for both cases if there are no children, then there will be an error.
4
+
Remarque: dans les deux cas, s'il n'y a pas d'enfants, il y aura une erreur.
5
5
6
-
If there are no children, `elem.lastChild`is `null`, so we can't access `elem.lastChild.nextSibling`. And the collection `elem.children`is empty (like an empty array`[]`).
6
+
S'il n'y a pas d'enfants, `elem.lastChild`est `null`, nous ne pouvons donc pas accéder à `elem.lastChild.nextSibling`. Et la collection `elem.children`est vide (comme un tableau vide`[]`).
Copy file name to clipboardExpand all lines: 2-ui/1-document/03-dom-navigation/article.md
+71-70Lines changed: 71 additions & 70 deletions
Original file line number
Diff line number
Diff line change
@@ -129,127 +129,128 @@ Il y a aussi une fonction spéciale `elem.hasChildNodes()` pour vérifier s'il y
129
129
130
130
### Collections DOM
131
131
132
-
As we can see, `childNodes` looks like an array. But actually it's not an array, but rather a *collection* -- a special array-like iterable object.
132
+
Comme nous pouvons le voir, `childNodes` ressemble à un tableau. Mais en réalité ce n'est pas un tableau, mais plutôt une * collection* -- un objet itérable spécial semblable à un tableau.
133
133
134
-
There are two important consequences:
134
+
Il y a deux conséquences importantes :
135
135
136
-
1. We can use `for..of` to iterate over it:
136
+
1. Nous pouvons utiliser `for..of` pour itérer dessus :
137
137
```js
138
138
for (let node of document.body.childNodes) {
139
139
alert(node); // shows all nodes from the collection
140
140
}
141
141
```
142
-
That's because it's iterable (provides the `Symbol.iterator` property, as required).
142
+
C'est parce qu'il est itérable (fournit la propriété `Symbol.iterator`, selon les besoins).
143
143
144
-
2. Array methods won't work, because it's not an array:
144
+
2. Les méthodes de tableau ne fonctionneront pas, car ce n'est pas un tableau :
145
145
```js run
146
146
alert(document.body.childNodes.filter); // undefined (there's no filter method!)
147
147
```
148
148
149
-
The first thing is nice. The second is tolerable, because we can use `Array.from` to create a "real" array from the collection, if we want array methods:
149
+
La première chose est sympa. La seconde est tolérable, car nous pouvons utiliser `Array.from` pour créer un "vrai" tableau à partir de la collection, si nous voulons des méthodes de tableau :
150
150
151
151
```js run
152
152
alert( Array.from(document.body.childNodes).filter ); // function
153
153
```
154
154
155
-
```warn header="DOM collections are read-only"
156
-
DOM collections, and even more -- *all* navigation properties listed in this chapter are read-only.
155
+
```warn header="Les collections DOM sont en lecture seule"
156
+
Les collections DOM, et plus encore -- *toutes* les propriétés de navigation répertoriées dans ce chapitre sont en lecture seule.
157
157
158
-
We can't replace a child by something else by assigning `childNodes[i] = ...`.
158
+
Nous ne pouvons pas remplacer un enfant par autre chose en attribuant `childNodes[i] = ...`.
159
159
160
-
Changing DOM needs other methods. We will see them in the next chapter.
160
+
Changer le DOM nécessite d'autres méthodes. Nous les verrons dans le prochain chapitre.
161
161
```
162
162
163
-
```warn header="DOM collections are live"
164
-
Almost all DOM collections with minor exceptions are *live*. In other words, they reflect the current state of DOM.
163
+
```warn header="Les collections DOM sont live"
164
+
Presque toutes les collections DOM avec des exceptions mineures sont *live*. En d'autres termes, elles reflètent l'état actuel du DOM.
165
165
166
-
If we keep a reference to `elem.childNodes`, and add/remove nodes into DOM, then they appear in the collection automatically.
166
+
Si nous gardons une référence à `element.childNodes`, et ajoutons/supprimons des nœuds dans le DOM, alors ils apparaissent automatiquement dans la collection.
167
167
```
168
168
169
-
````warn header="Don't use `for..in` to loop over collections"
170
-
Collections are iterable using `for..of`. Sometimes people try to use `for..in` for that.
169
+
````warn header="N'utilisez pas `for..in` pour parcourir les collections"
170
+
Les collections sont itérables en utilisant `for..of`. Parfois, les gens essaient d'utiliser `for..in` pour cela.
171
171
172
-
Please, don't. The `for..in` loop iterates over all enumerable properties. And collections have some "extra" rarely used properties that we usually do not want to get:
172
+
À ne pas faire. La boucle `for..in` parcourt toutes les propriétés énumérables. Et les collections ont des propriétés "supplémentaires" rarement utilisées que nous ne voulons généralement pas obtenir :
173
173
174
174
```html run
175
175
<body>
176
176
<script>
177
-
// shows 0, 1, length, item, values and more.
177
+
// affiche 0, 1, length, item, values et plus encore.
178
178
for (let prop in document.body.childNodes) alert(prop);
179
179
</script>
180
180
</body>
181
181
````
182
182
183
-
## Siblings and the parent
183
+
## Frères, sœurs et parent
184
184
185
-
*Siblings* are nodes that are children of the same parent.
185
+
*Les frères et sœurs* sont des nœuds qui sont les enfants du même parent.
186
186
187
-
For instance, here`<head>`and`<body>`are siblings:
187
+
Par exemple, ici`<head>`et`<body>`sont des frères et sœurs :
188
188
189
189
```html
190
190
<html>
191
191
<head>...</head><body>...</body>
192
192
</html>
193
193
```
194
194
195
-
-`<body>`is said to be the "next" or "right" sibling of`<head>`,
196
-
-`<head>`is said to be the "previous" or "left" sibling of`<body>`.
195
+
-`<body>`est dit être le frère "suivant" ou "droit" de`<head>`,
196
+
-`<head>`est dit être le frère "précédent" ou "gauche" de`<body>`.
197
197
198
-
The next sibling is in `nextSibling` property, and the previous one - in`previousSibling`.
198
+
Le frère suivant est dans la propriété `nextSibling`, et le précédent - dans`previousSibling`.
Navigation properties listed above refer to *all* nodes. For instance, in`childNodes` we can see both text nodes, element nodes, and even comment nodes if there exist.
217
+
Les propriétés de navigation répertoriées ci-dessus font référence à *tous* les nœuds. Par exemple, dans`childNodes`, nous pouvons voir à la fois les nœuds texte, les nœuds élément et même les nœuds commentaire s'il en existe.
218
218
219
-
But for many tasks we don't want text or comment nodes. We want to manipulate element nodes that represent tags and form the structure of the page.
219
+
Mais pour de nombreuses tâches, nous ne voulons pas de nœuds texte ou commentaire. Nous voulons manipuler des nœuds élément qui représentent des balises et forment la structure de la page.
220
220
221
-
So let's see more navigation links that only take *element nodes* into account:
221
+
Voyons donc plus de liens de navigation qui ne prennent en compte que les *nœuds élément*:
222
222
223
223

224
224
225
-
The links are similar to those given above, just with `Element`word inside:
225
+
Les liens sont similaires à ceux donnés ci-dessus, juste avec le mot `Element`à l'intérieur :
226
226
227
-
-`children` -- only those children that are element nodes.
228
-
-`firstElementChild`, `lastElementChild` -- first and last element children.
````smart header="Why`parentElement`? Can the parent be *not* an element?"
233
-
The `parentElement`property returns the "element" parent, while `parentNode`returns "any node" parent. These properties are usually the same: they both get the parent.
232
+
````smart header="Pourquoi`parentElement` ? Le parent peut-il ne *pas* être un élément ?"
233
+
La propriété `parentElement`renvoie l'élément parent, tandis que `parentNode`retourne le parent "peu importe le nœud". Ces propriétés sont généralement les mêmes : elles obtiennent toutes deux le parent.
234
234
235
-
With the one exception of`document.documentElement`:
235
+
À la seule exception de`document.documentElement`:
The reason is that the root node `document.documentElement` (`<html>`) has `document` as its parent. But `document` is not an element node, so `parentNode` returns it and `parentElement` does not.
242
+
La raison en est que le nœud racine `document.documentElement` (`<html>`) a
243
+
`document` comme parent. Mais `document` n'est pas un nœud élément, donc `parentNode` le renvoie et pas `parentElement`.
243
244
244
-
This detail may be useful when we want to travel up from an arbitrary element `elem`to`<html>`, but not to the `document`:
245
+
Ce détail peut être utile lorsque nous voulons passer d'un élément arbitraire `elem`à`<html>`, mais pas au `document`:
245
246
```js
246
-
while(elem =elem.parentElement) { //go up till <html>
247
+
while(elem =elem.parentElement) { //remonter jusqu'à <html>
247
248
alert( elem );
248
249
}
249
250
```
250
251
````
251
252
252
-
Let's modify one of the examples above: replace `childNodes` with `children`. Now it shows only elements:
253
+
Modifions l'un des exemples ci-dessus : remplaçons `childNodes` par `children`. Maintenant, il ne montre que des éléments :
253
254
254
255
```html run
255
256
<html>
@@ -274,31 +275,31 @@ Let's modify one of the examples above: replace `childNodes` with `children`. No
274
275
</html>
275
276
```
276
277
277
-
## More links: tables [#dom-navigation-tables]
278
+
## Plus de liens : tableaux [#dom-navigation-tables]
278
279
279
-
Till now we described the basic navigation properties.
280
+
Jusqu'à présent, nous avons décrit les propriétés de navigation de base.
280
281
281
-
Certain types of DOM elements may provide additional properties, specific to their type, for convenience.
282
+
Certains types d'éléments DOM peuvent fournir des propriétés supplémentaires, spécifiques à leur type, pour plus de commodité.
282
283
283
-
Tables are a great example of that, and represent a particularly important case:
284
+
Les tableaux en sont un excellent exemple et représentent un cas particulièrement important :
284
285
285
-
**The `<table>`** element supports (in addition to the given above) these properties:
286
-
- `table.rows` -- the collection of `<tr>` elements of the table.
287
-
- `table.caption/tHead/tFoot` -- references to elements `<caption>`, `<thead>`, `<tfoot>`.
288
-
- `table.tBodies` -- the collection of `<tbody>` elements (can be many according to the standard, but there will always be at least one -- even if it is not in the source HTML, the browser will put it in the DOM).
286
+
**L'élément `<table>`** supporte (en plus de ce qui précède) ces propriétés :
287
+
- `table.rows` -- la collection d'éléments `<tr>` du tableau.
288
+
- `table.caption/tHead/tFoot` -- références aux éléments `<caption>`, `<thead>`, `<tfoot>`.
289
+
- `table.tBodies` -- la collection d'éléments `<tbody>` (peut être multiple selon la norme, mais il y en aura toujours au moins une - même s'elle n'est pas dans le HTML source, le navigateur la mettra dans le DOM).
289
290
290
-
**`<thead>`, `<tfoot>`, `<tbody>`** elements provide the `rows` property:
291
-
- `tbody.rows` -- the collection of `<tr>` inside.
291
+
**`<thead>`, `<tfoot>`, `<tbody>`** les éléments fournissent la propriété `rows` :
292
+
- `tbody.rows` -- la collection de `<tr>` à l'intérieur.
292
293
293
294
**`<tr>`:**
294
-
- `tr.cells` -- the collection of `<td>` and `<th>` cells inside the given `<tr>`.
295
-
- `tr.sectionRowIndex` -- the position (index) of the given `<tr>` inside the enclosing `<thead>/<tbody>/<tfoot>`.
296
-
- `tr.rowIndex` -- the number of the `<tr>` in the table as a whole (including all table rows).
295
+
- `tr.cells` -- la collection de cellules `<td>` et `<th>` à l'intérieur du `<tr>` donné.
296
+
- `tr.sectionRowIndex` -- la position (index) du `<tr>` donné à l'intérieur du `<thead>/<tbody>/<tfoot>`.
297
+
- `tr.rowIndex` -- le nombre de `<tr>` dans le tableau dans son ensemble (y compris toutes les lignes du tableau).
297
298
298
-
**`<td>` and `<th>`:**
299
-
- `td.cellIndex` -- the number of the cell inside the enclosing `<tr>`.
299
+
**`<td>` et `<th>` : **
300
+
- `td.cellIndex` -- le numéro de la cellule à l'intérieur du `<tr>` qui l'entoure.
300
301
301
-
An example of usage:
302
+
Un exemple d'utilisation :
302
303
303
304
```html run height=100
304
305
<table id="table">
@@ -311,23 +312,23 @@ An example of usage:
311
312
</table>
312
313
313
314
<script>
314
-
// get td with "two" (first row, second column)
315
+
// obtenir td avec "two" (première ligne, deuxième colonne)
315
316
let td = table.*!*rows[0].cells[1]*/!*;
316
-
td.style.backgroundColor = "red"; // highlight it
317
+
td.style.backgroundColor = "red"; // le mettre en valeur
317
318
</script>
318
319
```
319
320
320
-
The specification: [tabular data](https://html.spec.whatwg.org/multipage/tables.html).
321
+
La spécification : [tabular data](https://html.spec.whatwg.org/multipage/tables.html).
321
322
322
-
There are also additional navigation properties for HTML forms. We'll look at them later when we start working with forms.
323
+
Il existe également des propriétés de navigation supplémentaires pour les formulaires HTML. Nous les examinerons plus tard lorsque nous commencerons à travailler avec des formulaires.
323
324
324
-
## Summary
325
+
## Résumé
325
326
326
-
Given a DOM node, we can go to its immediate neighbors using navigation properties.
327
+
Étant donné un nœud DOM, nous pouvons aller vers ses voisins immédiats en utilisant les propriétés de navigation.
327
328
328
-
There are two main sets of them:
329
+
Il en existe deux ensembles principaux :
329
330
330
-
- For all nodes: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`.
331
-
- For element nodes only: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`.
331
+
- Pour tous les nœuds : `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`.
332
+
- Pour les nœuds élément uniquement : `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`.
332
333
333
-
Some types of DOM elements, e.g. tables, provide additional properties and collections to access their content.
334
+
Certains types d'éléments DOM, par exemple , fournissent des propriétés et des collections supplémentaires pour accéder à leur contenu.
0 commit comments