`. But, as we can see in line `(**)`, the value of the old `div` variable hasn't changed!
+Dans la ligne `(*)` nous avons remplacé `div` par `
`. Dans le document externe (le DOM), nous pouvons voir le nouveau contenu au lieu de `
`. Mais, comme nous pouvons le voir dans la ligne `(**)`, la valeur de l'ancienne variable `div` n'a pas changé !
-The `outerHTML` assignment does not modify the DOM element (the object referenced by, in this case, the variable 'div'), but removes it from the DOM and inserts the new HTML in its place.
+L'affectation `outerHTML` ne modifie pas l'élément DOM (l'objet référencé, dans ce cas, la variable 'div'), mais le supprime du DOM et insère le nouveau HTML à sa place.
-So what happened in `div.outerHTML=...` is:
-- `div` was removed from the document.
-- Another piece of HTML `
A new element
` was inserted in its place.
-- `div` still has its old value. The new HTML wasn't saved to any variable.
+Donc, ce qui s'est passé dans `div.outerHTML=...` est :
+- `div` a été supprimé du document.
+- Un autre morceau du HTML `
A new element
` a été inséré à sa place.
+- `div` a toujours son ancienne valeur. Le nouveau HTML n'a été enregistré dans aucune variable.
-It's so easy to make an error here: modify `div.outerHTML` and then continue to work with `div` as if it had the new content in it. But it doesn't. Such thing is correct for `innerHTML`, but not for `outerHTML`.
+Il est si facile de faire une erreur ici : modifiez `div.outerHTML` puis continuez à travailler avec `div` comme s'il contenait le nouveau contenu. Mais ce n'est pas le cas. Ce genre de chose est correcte pour `innerHTML`, mais pas pour `outerHTML`.
-We can write to `elem.outerHTML`, but should keep in mind that it doesn't change the element we're writing to ('elem'). It puts the new HTML in its place instead. We can get references to the new elements by querying the DOM.
+Nous pouvons écrire dans `elem.outerHTML`, mais nous devons garder à l'esprit que cela ne change pas l'élément dans lequel nous écrivons ('elem'). Il place le nouveau HTML à sa place. Nous pouvons obtenir des références aux nouveaux éléments en interrogeant le DOM.
-## nodeValue/data: text node content
+## nodeValue/data : contenu du nœud texte
-The `innerHTML` property is only valid for element nodes.
+La propriété `innerHTML` n'est valide que pour les nœuds élément.
-Other node types, such as text nodes, have their counterpart: `nodeValue` and `data` properties. These two are almost the same for practical use, there are only minor specification differences. So we'll use `data`, because it's shorter.
+D'autres types de nœuds, tels que les nœuds texte, ont leur contrepartie : les propriétés `nodeValue` et `data`. Ces deux sont presque les mêmes pour une utilisation pratique, il n'y a que des différences de spécifications mineures. Nous allons donc utiliser `data`, car il est plus court.
-An example of reading the content of a text node and a comment:
+Un exemple de lecture du contenu d'un nœud texte et d'un commentaire :
```html run height="50"
Hello
-
+
```
-For text nodes we can imagine a reason to read or modify them, but why comments?
+Pour les nœuds texte, nous pouvons imaginer une raison de les lire ou de les modifier, mais pourquoi des commentaires ?
-Sometimes developers embed information or template instructions into HTML in them, like this:
+Parfois, les développeurs incorporent des informations ou des instructions de modèle dans HTML, comme ceci :
```html
@@ -359,13 +359,13 @@ Sometimes developers embed information or template instructions into HTML in the
```
-...Then JavaScript can read it from `data` property and process embedded instructions.
+...Ensuite, JavaScript peut le lire à partir de la propriété `data` et traiter les instructions intégrées.
-## textContent: pure text
+## textContent: texte pur
-The `textContent` provides access to the *text* inside the element: only text, minus all `
`.
+Le `textContent` donne accès au *texte* à l'intérieur de l'élément : seulement le texte, moins tous les ``.
-For instance:
+Par exemple :
```html run
@@ -379,18 +379,18 @@ For instance:
```
-As we can see, only text is returned, as if all `
` were cut out, but the text in them remained.
+Comme nous pouvons le voir, seul le texte est renvoyé, comme si tous les `` étaient supprimés, mais le texte qu'ils contenaient est resté.
-In practice, reading such text is rarely needed.
+En pratique, la lecture d'un tel texte est rarement nécessaire.
-**Writing to `textContent` is much more useful, because it allows to write text the "safe way".**
+**Ecrire dans `textContent` est beaucoup plus utile, car il permet d'écrire du texte de "manière sûre".**
-Let's say we have an arbitrary string, for instance entered by a user, and want to show it.
+Disons que nous avons une chaîne de caractères arbitraire, par exemple entrée par un utilisateur, et que nous voulons l'afficher.
-- With `innerHTML` we'll have it inserted "as HTML", with all HTML tags.
-- With `textContent` we'll have it inserted "as text", all symbols are treated literally.
+- Avec `innerHTML` nous allons l'insérer "au format HTML", avec toutes les balises HTML.
+- Avec `textContent` nous allons l'insérer "en tant que texte", tous les symboles sont traités littéralement.
-Compare the two:
+Comparez les deux :
```html run
@@ -404,16 +404,16 @@ Compare the two:
```
-1. The first `` gets the name "as HTML": all tags become tags, so we see the bold name.
-2. The second `
` gets the name "as text", so we literally see `
Winnie-the-pooh!`.
+1. La première `
` obtient le nom "en HTML" : toutes les balises deviennent des balises, nous voyons donc le nom en gras.
+2. La seconde `
` obtient le nom "sous forme de texte", donc nous voyons littéralement `
Winnie-the-pooh!`.
-In most cases, we expect the text from a user, and want to treat it as text. We don't want unexpected HTML in our site. An assignment to `textContent` does exactly that.
+Dans la plupart des cas, nous attendons le texte d'un utilisateur et souhaitons le traiter comme du texte. Nous ne voulons pas de HTML inattendu sur notre site. Une affectation à `textContent` fait exactement cela.
-## The "hidden" property
+## La propriété "cachée"
-The "hidden" attribute and the DOM property specifies whether the element is visible or not.
+L'attribut "hidden" (caché) et la propriété DOM spécifient si l'élément est visible ou non.
-We can use it in HTML or assign using JavaScript, like this:
+Nous pouvons l'utiliser dans le HTML ou l'attribuer en utilisant JavaScript, comme ceci :
```html run height="80"
Both divs below are hidden
@@ -427,9 +427,9 @@ We can use it in HTML or assign using JavaScript, like this:
```
-Technically, `hidden` works the same as `style="display:none"`. But it's shorter to write.
+Techniquement, `hidden` fonctionne de la même manière que `style="display:none"`. Mais c'est plus court à écrire.
-Here's a blinking element:
+Voici un élément clignotant :
```html run height=50
@@ -440,16 +440,16 @@ Here's a blinking element:
```
-## More properties
+## Plus de propriétés
-DOM elements also have additional properties, in particular those that depend on the class:
+Les éléments DOM ont également des propriétés supplémentaires, en particulier celles qui dépendent de la classe :
-- `value` -- the value for `
`, `