Merge pull request #185 from HachemiH/master

HachemiH · web-flow · commit b1f87b3fbf49 · 2020-04-10T23:06:25.000+02:00
Node properties: type, tag and contents
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
@@ -1,8 +1,8 @@
-There's a catch here.
+Il y a un piège ici.
 
-At the time of `<script>` execution the last DOM node is exactly `<script>`, because the browser did not process the rest of the page yet.
+Au moment de l'exécution de `<script>`, le dernier nœud DOM est exactement `<script>`, car le navigateur n'a pas encore traité le reste de la page.
 
-So the result is `1` (element node).
+Le résultat est donc `1` (nœud élément).
 
 ```html run height=60
 <html>
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# What's in the nodeType?
+# Qu'y a-t-il dans le nodeType ?
 
-What does the script show?
+Qu'affiche le script ?
 
 ```html
 <html>
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md
@@ -1,21 +1,21 @@
-Let's make a loop over `<li>`:
+Faisons une boucle dans le `<li>`:
 
 ```js
 for (let li of document.querySelectorAll('li')) {
   ...
 }
 ```
 
-In the loop we need to get the text inside every `li`.
+Dans la boucle, nous devons obtenir le texte à l'intérieur de chaque `li`.
 
-We can read the text from the first child node of `li`, that is the text node:
+Nous pouvons lire le texte du premier nœud enfant de `li`, c'est-à-dire le nœud texte :
 
 ```js
 for (let li of document.querySelectorAll('li')) {
   let title = li.firstChild.data;
 
-  // title is the text in <li> before any other nodes
+  // title est le texte dans <li> avant tout autre noeud
 }
 ```
 
-Then we can get the number of descendants as `li.getElementsByTagName('li').length`.
+Ensuite, nous pouvons obtenir le nombre de descendants comme `li.getElementsByTagName('li').length`.
diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md
@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Count descendants
+# Compter les descendants
 
-There's a tree structured as nested `ul/li`.
+Il y a un arbre structuré comme un `ul/li` imbriqué.
 
-Write the code that for each `<li>` shows:
+Écrivez le code qui pour que chaque `<li>` affiche :
 
-1. What's the text inside it (without the subtree)
-2. The number of nested `<li>` -- all descendants, including the deeply nested ones.
+1. Quel est le texte à l'intérieur (sans le sous-arbre)
+2. Le nombre de `<li>` imbriqués - tous les descendants, y compris ceux profondément imbriqués.
 
 [demo src="solution"]
diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md
@@ -1,4 +1,4 @@
-The answer: **`BODY`**.
+La réponse : **`BODY`**.
 
 ```html run
 <script>
@@ -10,8 +10,8 @@ The answer: **`BODY`**.
 </script>
 ```
 
-What's going on step by step:
+Ce qui se passe pas à pas :
 
-1. The content of `<body>` is replaced with the comment. The comment is `<!--BODY-->`, because `body.tagName == "BODY"`. As we remember, `tagName` is always uppercase in HTML.
-2. The comment is now the only child node, so we get it in `body.firstChild`.
-3. The `data` property of the comment is its contents (inside `<!--...-->`): `"BODY"`.
+1. Le contenu de `<body>` est remplacé par le commentaire. Le commentaire est `<!--BODY-->`, car `body.tagName == "BODY"`. Comme nous nous en souvenons, `tagName` est toujours en majuscule en HTML.
+2. Le commentaire est maintenant le seul nœud enfant, donc nous l'avons dans `body.firstChild`.
+3. La propriété `data` du commentaire est son contenu (à l'intérieur `<!--...-->`) : `"BODY"`.
diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md
@@ -2,16 +2,16 @@ importance: 3
 
 ---
 
-# Tag in comment
+# Balise dans le commentaire
 
-What does this code show?
+Qu'affice ce code ?
 
 ```html
 <script>
   let body = document.body;
 
   body.innerHTML = "<!--" + body.tagName + "-->";
 
-  alert( body.firstChild.data ); // what's here?
+  alert( body.firstChild.data ); // Qu'est ce qu'il y a ici ?
 </script>
 ```
diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
@@ -1,40 +1,40 @@
 
-We can see which class it belongs by outputting it, like:
+Nous pouvons voir à quelle classe il appartient en le sortant, comme :
 
 ```js run
 alert(document); // [object HTMLDocument]
 ```
 
-Or:
+Ou :
 
 ```js run
 alert(document.constructor.name); // HTMLDocument
 ```
 
-So, `document` is an instance of `HTMLDocument` class.
+Ainsi, `document` est une instance de la classe `HTMLDocument`.
 
-What's its place in the hierarchy?
+Quelle est sa place dans la hiérarchie ?
 
-Yeah, we could browse the specification, but it would be faster to figure out manually.
+Oui, nous pourrions parcourir les spécifications, mais il serait plus rapide de le déterminer manuellement.
 
-Let's traverse the prototype chain via `__proto__`.
+Parcourons la chaîne du prototype via `__proto__`.
 
-As we know, methods of a class are in the `prototype` of the constructor. For instance, `HTMLDocument.prototype` has methods for documents.
+Comme nous le savons, les méthodes d'une classe sont dans le `prototype` du constructeur. Par exemple, `HTMLDocument.prototype` a des méthodes pour les documents.
 
-Also, there's a reference to the constructor function inside the `prototype`:
+De plus, il y a une référence à la fonction constructeur à l'intérieur du `prototype` :
 
 ```js run
 alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
 ```
 
-To get a name of the class as a string, we can use `constructor.name`. Let's do it for the whole `document` prototype chain, till class `Node`:
+Pour obtenir le nom de la classe sous forme de chaîne de caractères, nous pouvons utiliser `constructor.name`. Faisons-le pour toute la chaîne du prototype de `document`, jusqu'à la classe` Node`:
 
 ```js run
 alert(HTMLDocument.prototype.constructor.name); // HTMLDocument
 alert(HTMLDocument.prototype.__proto__.constructor.name); // Document
 alert(HTMLDocument.prototype.__proto__.__proto__.constructor.name); // Node
 ```
 
-That's the hierarchy.
+Voilà la hiérarchie.
 
-We also could examine the object using `console.dir(document)` and see these names by opening `__proto__`. The console takes them from `constructor` internally.
+Nous pourrions également examiner l'objet en utilisant `console.dir(document)` et voir ces noms en ouvrant `__proto__`. La console les prend du constructeur en interne.
diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md
@@ -2,10 +2,10 @@ importance: 4
 
 ---
 
-# Where's the "document" in the hierarchy?
+# Où est le "document" dans la hiérarchie ?
 
-Which class does the `document` belong to?
+À quelle classe appartient le `document` ?
 
-What's its place in the DOM hierarchy?
+Quelle est sa place dans la hiérarchie DOM ?
 
-Does it inherit from `Node` or `Element`, or maybe `HTMLElement`?
+Hérite-t-il de `Node` ou` Element`, ou peut-être de `HTMLElement` ?
diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md
