v1

Author: jonathangraff

2-ui/1-document/04-searching-elements-dom/article.md

@@ -1,138 +1,138 @@
-# Searching: getElement*, querySelector*
+# Recherches: getElement*, querySelector*
 
-DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page?
+Les outils de navigation du DOM sont très pratiques quand les éléments sont proches les uns des autres. Mais s'ils ne le sont pas ? Comment atteindre un élément arbitraire de la page ?
 
-There are additional searching methods for that.
+Il existe d'autres méthodes de recherche pour cela. 
 
-## document.getElementById or just id
+## document.getElementById ou juste id
 
-If an element has the `id` attribute, we can get the element using the method `document.getElementById(id)`, no matter where it is.
+Si un élément a l'attribut `id`, on peut atteindre cet élément en utilisant la méthode `document.getElementById(id)`, peu importe où elle se trouve.
 
-For instance:
+Par exemple :
 
 ```html run
 <div id="elem">
-  <div id="elem-content">Element</div>
+  <div id="elem-content">Elément</div>
 </div>
 
 <script>
-  // get the element
+  // récupération de l'élément :
 *!*
   let elem = document.getElementById('elem');
 */!*
 
-  // make its background red
+  // on met son arrière-plan rouge :
   elem.style.background = 'red';
 </script>
 ```
-
-Also, there's a global variable named by `id` that references the element:
+Il y a aussi une variable globale nommée selon l'`id` qui référence l'élément :
 
 ```html run
 <div id="*!*elem*/!*">
-  <div id="*!*elem-content*/!*">Element</div>
+  <div id="*!*elem-content*/!*">Elément</div>
 </div>
 
 <script>
-  // elem is a reference to DOM-element with id="elem"
+  // elem est une référence à l'élément du DOM ayant l'id "elem"
   elem.style.background = 'red';
 
-  // id="elem-content" has a hyphen inside, so it can't be a variable name
-  // ...but we can access it using square brackets: window['elem-content']
+  // id="elem-content" contient un tiret, donc ça ne peut pas être un nom de variable
+  // ...mais on peut y accéder en utilisant les crochets : window['elem-content']
 </script>
 ```
 
-...That's unless we declare a JavaScript variable with the same name, then it takes precedence:
+...A moins qu'on déclare une variable Javascript avec le même nom, auquel cas celle-ci obtient la priorité :
 
 ```html run untrusted height=0
 <div id="elem"></div>
 
 <script>
-  let elem = 5; // now elem is 5, not a reference to <div id="elem">
+  let elem = 5; // maintenant elem vaut 5, ce n'est plus une référence à <div id="elem">
 
   alert(elem); // 5
 </script>
 ```
 
-```warn header="Please don't use id-named global variables to access elements"
-This behavior is described [in the specification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), so it's kind of standard. But it is supported mainly for compatibility.
+```warn header="Ne pas utiliser les variables globales nommées selon l'id pour accéder aux éléments !"
+Ce comportement est décrit [dans la spécification](http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem), donc c'est standard. C'est principalement gardé pour des histoires de compatibilité.
 
-The browser tries to help us by mixing namespaces of JS and DOM. That's fine for simple scripts, inlined into HTML, but generally isn't a good thing. There may be naming conflicts. Also, when one reads JS code and doesn't have HTML in view, it's not obvious where the variable comes from.
+Le navigateur essaie de nous aider en mélangeant les noms de JS et du DOM. C'est bien pour des scripts simples, intégré dans du HTML, mais en genéral ce n'est pas bon. Il peut y avoir des conflits de noms. Aussi, quand quelqu'un lira le code JS sans avoir le HTML à côté, ce ne sera pas évident pour lui d'où vient la variable.
 
-Here in the tutorial we use `id` to directly reference an element for brevity, when it's obvious where the element comes from.
+Dans ce tutoriel, on utilise `id` pour directement référencer un élément rapidement, quand il sera évident d'où il vient.
 
-In real life `document.getElementById` is the preferred method.
+Dans la vraie vie, `document.getElementById` est la méthode à avantager.
 ```
 
-```smart header="The `id` must be unique"
-The `id` must be unique. There can be only one element in the document with the given `id`.
+```smart header="L' `id` doit être unique"
+L'`id` doit être unique. Il ne peut y avoir qu'un élément dans le document avec un `id` donné.
 
-If there are multiple elements with the same `id`, then the behavior of methods that use it is unpredictable, e.g. `document.getElementById` may return any of such elements at random. So please stick to the rule and keep `id` unique.
+S'il y a de multiples éléments avec le même `id`, alors le comportement de la méthode qui l'utilise est imprévisible, par exemple `document.getElementById` pourra renvoyer n'importe lequel de ces éléments aléatoirement. Donc suivez la règle et gardez l'`id` unique.
 ```
 
-```warn header="Only `document.getElementById`, not `anyElem.getElementById`"
-The method `getElementById` can be called only on `document` object. It looks for the given `id` in the whole document.
+```warn header="Seulement `document.getElementById`, pas `anyElem.getElementById`"
+La méthode `getElementById` ne peut être appelée que sur l'objet `document` . Elle va chercher l'`id` dans le document entier.
 ```
 
 ## querySelectorAll [#querySelectorAll]
 
-By far, the most versatile method, `elem.querySelectorAll(css)` returns all elements inside `elem` matching the given CSS selector.
+De loin, la méthode la plus polyvalente, `elem.querySelectorAll(css)` renvoie tous les éléments à l'intérieur de `elem` correspondant au sélecteur CSS donné en paramètre
 
-Here we look for all `<li>` elements that are last children:
+Ici, on recherche tous les éléments `<li>` qui sont les derniers enfants :
 
 ```html run
 <ul>
-  <li>The</li>
+  <li>Le</li>
   <li>test</li>
 </ul>
 <ul>
-  <li>has</li>
-  <li>passed</li>
+  <li>a</li>
+  <li>réussi</li>
 </ul>
 <script>
 *!*
   let elements = document.querySelectorAll('ul > li:last-child');
 */!*
 
   for (let elem of elements) {
-    alert(elem.innerHTML); // "test", "passed"
+    alert(elem.innerHTML); // "test", "réussi"
   }
 </script>
 ```
 
-This method is indeed powerful, because any CSS selector can be used.
+Cette méthode est très puissante, car tous les sélecteurs CSS peuvent être utilisés.
 
-```smart header="Can use pseudo-classes as well"
-Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is over now (in nesting order: from the outermost `<html>` to the most nested one).
+```smart header="On peut aussi utiliser des pseudo-classes"
+
+Les pseudo-classes dans le sélecteur CSS comme `:hover` et `:active` sont aussi acceptés. Par exemple, `document.querySelectorAll(':hover')` renverra l'ensemble des éléments dont le curseur est au-dessus en ce moment (dans l'ordre d'imbrication : du plus extérieur `<html>` au plus imbriqué).
 ```
 
 ## querySelector [#querySelector]
 
-The call to `elem.querySelector(css)` returns the first element for the given CSS selector.
+Un appel à `elem.querySelector(css)` renverra le premier élément d'un sélecteur CSS donné.
 
-In other words, the result is the same as `elem.querySelectorAll(css)[0]`, but the latter is looking for *all* elements and picking one, while `elem.querySelector` just looks for one. So it's faster and also shorter to write.
+En d'autres termes, le résultat sera le même que `elem.querySelectorAll(css)[0]`, mais celui-ci cherchera *tous* les éléments et en choisira un seul, alors que `elem.querySelector` n'en cherchera qu'un. C'est donc plus rapide, et plus court à écrire.
 
 ## matches
 
-Previous methods were searching the DOM.
+Les méthodes précédentes recherchaient dans le DOM.
 
-The [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) does not look for anything, it merely checks if `elem` matches the given CSS-selector. It returns `true` or `false`.
+La commande [elem.matches(css)](http://dom.spec.whatwg.org/#dom-element-matches) ne recherche rien, elle vérifie simplement que `elem` correspond au sélecteur CSS donné. Elle renvoie `true` ou `false`.
 
-The method comes in handy when we are iterating over elements (like in an array or something) and trying to filter out those that interest us.
+Cette méthode devient utile quand on itère sur des éléments (comme dans un array par exemple) et qu'on veut filtrer ceux qui nous intéressent.
 
-For instance:
+Par exemple :
 
 ```html run
 <a href="http://example.com/file.zip">...</a>
 <a href="http://ya.ru">...</a>
 
 <script>
-  // can be any collection instead of document.body.children
+  // on peut mettre n'importe quel ensemble à la place de document.body.children
   for (let elem of document.body.children) {
 *!*
     if (elem.matches('a[href$="zip"]')) {
 */!*
-      alert("The archive reference: " + elem.href );
+      alert("le lien de l'archive : " + elem.href );
     }
   }
 </script>