initial commit

9 files changed, 930 insertions, 0 deletions

diff --git a/files/fr/web/api/parentnode/append/index.html b/files/fr/web/api/parentnode/append/index.html
new file mode 100644
index 0000000000..d6818894a3
--- /dev/null
+++ b/files/fr/web/api/parentnode/append/index.html
@@ -0,0 +1,137 @@
+---
+title: ParentNode.append()
+slug: Web/API/ParentNode/append
+tags:
+  - API
+  - DOM
+  - Reference
+translation_of: Web/API/ParentNode/append
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <strong><code>ParentNode.append</code></strong> insère un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} après le dernier enfant de <code>ParentNode</code>. Les objets {{domxref("DOMString")}} (c’est-à-dire les chaînes de caractères) sont insérés comme nœuds {{domxref("Text")}} équivalents.</p>
+
+<p>Différences avec {{domxref("Node.appendChild()")}} :</p>
+
+<ul>
+ <li><code>ParentNode.append()</code> vous permet également d’ajouter des objet {{domxref("DOMString")}}, tandis que <code>Node.appendChild()</code> accepte seulement les objets {{domxref("Node")}}.</li>
+ <li><code>ParentNode.append()</code> n’a pas de valeur de retour, tandis que <code>Node.appendChild()</code> retourne l’objet {{domxref("Node")}} ajouté.</li>
+ <li><code>ParentNode.append()</code> peut ajouter plusieurs nœuds et chaînes, alors que<code>Node.appendChild()</code> peut seulement ajouter un nœud.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} à insérer.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}} :<br>
+  Le nœud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajouter_un_élément">Ajouter un élément</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ &lt;p&gt; ]
+</pre>
+
+<h3 id="Ajouter_du_texte">Ajouter du texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Du texte");
+
+console.log(parent.textContent); // "Du texte"</pre>
+
+<h3 id="Ajouter_un_élément_et_du_texte">Ajouter un élément et du texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Du texte", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Du texte", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.append_est_unscopable"><code>ParentNode.append()</code> est <em>unscopable</em></h3>
+
+<p>La méthode <code>append()</code> n’est pas accessible dans un bloc <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d’information.</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Vous pouvez utiliser la méthode <code>append()</code> dans Internet Explorer 9 (et supérieur) avec le code suivant :</p>
+
+<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<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', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ParentNode.append")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} et {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("ChildNode.after()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/parentnode/childelementcount/index.html b/files/fr/web/api/parentnode/childelementcount/index.html
new file mode 100644
index 0000000000..df243c5b32
--- /dev/null
+++ b/files/fr/web/api/parentnode/childelementcount/index.html
@@ -0,0 +1,98 @@
+---
+title: ParentNode.childElementCount
+slug: Web/API/ParentNode/childElementCount
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - Reference
+  - parent
+translation_of: Web/API/ParentNode/childElementCount
+---
+<div>
+<p>{{APIRef("DOM") }}</p>
+</div>
+
+<p>La propriété <code><strong>ParentNode.childElementCount</strong></code> en lecture seule renvoie un <code>unsigned long</code> (<em>long non signé</em>) représentant le nombre d'élèments fils de l'élément donné.</p>
+
+<div class="note">
+<p>Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.<br>
+ Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (<em>noeuds</em>) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, <code>childElementCount</code> a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>count</var> = <em>node</em>.childElementCount;
+</pre>
+
+<dl>
+ <dt>count</dt>
+ <dd>détient la valeur de retour, un type <code>unsigned long</code> (<em>long non signé</em>) (simplement un nombre entier)</dd>
+ <dt>node</dt>
+ <dd>est un objet représentant un <code>Document</code>, un <code>DocumentFragment</code> ou un <code>Element</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span>childElementCount <span class="operator token">&gt;</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// faire quelque chose</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Polyfill_pour_IE8_IE9_Safari">Polyfill pour IE8 &amp; IE9 &amp; Safari</h2>
+
+<p>Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>constructor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>constructor <span class="operator token">&amp;&amp;</span>
+        constructor<span class="punctuation token">.</span>prototype <span class="operator token">&amp;&amp;</span>
+        constructor<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>childElementCount <span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>constructor<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">'childElementCount'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+            <span class="keyword token">get</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                <span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> count <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> node<span class="punctuation token">,</span> nodes <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
+                <span class="keyword token">while</span> <span class="punctuation token">(</span>node <span class="operator token">=</span> nodes<span class="punctuation token">[</span>i<span class="operator token">++</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                    <span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>nodeType <span class="operator token">===</span> <span class="number token">1</span><span class="punctuation token">)</span> count<span class="operator token">++</span><span class="punctuation token">;</span>
+                <span class="punctuation token">}</span>
+                <span class="keyword token">return</span> count<span class="punctuation token">;</span>
+            <span class="punctuation token">}</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span>Node <span class="operator token">||</span> window<span class="punctuation token">.</span>Element<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<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', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Divise l'interface <code>ElementTraversal</code> en {{domxref("ChildNode")}} et <code>ParentNode</code>. La propriété est maintenant définie sur cette dernière.<br>
+    Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajout de sa définition initiale à la pure interface <code>ElementTraversal</code> et de son utilisation sur {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+<p>{{Compat("api.ParentNode.childElementCount")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/children/index.html b/files/fr/web/api/parentnode/children/index.html
new file mode 100644
index 0000000000..52c529a1b8
--- /dev/null
+++ b/files/fr/web/api/parentnode/children/index.html
@@ -0,0 +1,89 @@
+---
+title: ParentNode.children
+slug: Web/API/ParentNode/children
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - parent
+translation_of: Web/API/ParentNode/children
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété <code><strong>children</strong></code> de {{domxref("ParentNode")}} est une propriété en lecture seule qui renvoie une {{domxref("HTMLCollection")}} directe contenant tous les enfants {{domxref("Element","éléments")}} du noeud sur lequel elle a été appelée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{ domxref("HTMLCollection") }}, qui est une collection directe et ordonnée des éléments DOM qui sont enfants du <em><code>node</code></em> (<em>noeud</em>). Vous pouvez accéder aux noeuds enfants individuellement en utilisant la méthode  {{domxref("HTMLCollection.item", "item()")}} (<em>élément</em>) sur la collection ou en utilisant la notation de type tableau (<em>array</em>) de JavaScript.</p>
+
+<p>S'il n'y a pas d'éléments enfants, alors <code>children</code> est une liste vide et a une <code>length</code> (<em>longueur</em>) de <code>0</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> machin <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'machin'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> machin<span class="punctuation token">.</span>children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>machin<span class="punctuation token">.</span>children<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>tagName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Réécrit le prototype 'children' natif.</span>
+<span class="comment token">// Ajoute le support de Document &amp; DocumentFragment pour IE9 &amp; Safari.</span>
+<span class="comment token">// Renvoie un tableau (<em>array</em>) au lieu d'une HTMLCollection.</span>
+<span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>constructeur<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>constructeur <span class="operator token">&amp;&amp;</span>
+        constructeur<span class="punctuation token">.</span>prototype <span class="operator token">&amp;&amp;</span>
+        constructeur<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>children <span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>constructeur<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">'children'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+            <span class="keyword token">get</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                <span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> noeud<span class="punctuation token">,</span> noeuds <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>childNodes<span class="punctuation token">,</span> children <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+                <span class="keyword token">while</span> <span class="punctuation token">(</span>noeud <span class="operator token">=</span> noeuds<span class="punctuation token">[</span>i<span class="operator token">++</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                    <span class="keyword token">if</span> <span class="punctuation token">(</span>noeud<span class="punctuation token">.</span>nodeType <span class="operator token">===</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                        children<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span>noeud<span class="punctuation token">)</span><span class="punctuation token">;</span>
+                    <span class="punctuation token">}</span>
+                <span class="punctuation token">}</span>
+                <span class="keyword token">return</span> children<span class="punctuation token">;</span>
+            <span class="punctuation token">}</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span>Node <span class="operator token">||</span> window<span class="punctuation token">.</span>Element<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<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', '#dom-parentnode-children', 'ParentNode.children')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ParentNode.children")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces {{domxref("ParentNode")}} et{{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Les types d'objets implémentant cette interface : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div>
+ </li>
+ <li>
+  <div class="syntaxbox">{{domxref("Node.childNodes")}}</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/firstelementchild/index.html b/files/fr/web/api/parentnode/firstelementchild/index.html
new file mode 100644
index 0000000000..60983da28f
--- /dev/null
+++ b/files/fr/web/api/parentnode/firstelementchild/index.html
@@ -0,0 +1,45 @@
+---
+title: Element.firstElementChild
+slug: Web/API/ParentNode/firstElementChild
+tags:
+  - Parcours arborescence
+translation_of: Web/API/ParentNode/firstElementChild
+---
+<p>{{ gecko_minversion_header("1.9.1") }}</p>
+
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Summary" name="Summary">Résumé</h3>
+
+<p><strong><span style="font-family: Verdana,Tahoma,sans-serif;">firstElementChild</span></strong> renvoie le premier élément enfant d'un élément ou <code>null</code> s'il n'y a pas de descendants.</p>
+
+<h3 id="Syntax_and_values" name="Syntax_and_values">Syntaxe and valeurs</h3>
+
+<pre class="eval">var <em>N</em><em>oeudEnfant</em> = ReferenceElementNoeud.firstElementChild; </pre>
+
+<p><var>NoeudEnfant</var> est une référence vers le premier élément enfant de l'élément noeud , ou <code>null</code> s'il n'y en a pas.</p>
+
+<p>Cet attribut est en lecture seule.</p>
+
+<h3 id="Example" name="Example">Exemple</h3>
+
+<pre>&lt;p id="para-01"&gt;
+  &lt;span&gt;Premier span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstElementChild.nodeName)
+&lt;/script&gt;</pre>
+
+<p>Dans cet exemple la fonction alert affiche "SPAN", qui est le nom du premier nœud enfant de l'élément paragraphe.</p>
+
+<h3 id="Voir_aussi">Voir aussi</h3>
+
+<ul>
+ <li><a class="internal" href="/en/DOM/Element.childElementCount" title="En/DOM/Element.childElementCount"><code>childElementCount</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.children" title="En/DOM/Element.children"><code>children</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.lastElementChild" title="En/DOM/Element.lastElementChild"><code>lastElementChild</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.nextElementSibling" title="En/DOM/Element.nextElementSibling"><code>nextElementSibling</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.previousElementSibling" title="En/DOM/Element.previousElementSibling"><code>previousElementSibling</code></a></li>
+</ul>
diff --git a/files/fr/web/api/parentnode/index.html b/files/fr/web/api/parentnode/index.html
new file mode 100644
index 0000000000..9b33ade976
--- /dev/null
+++ b/files/fr/web/api/parentnode/index.html
@@ -0,0 +1,75 @@
+---
+title: ParentNode
+slug: Web/API/ParentNode
+tags:
+  - API
+translation_of: Web/API/ParentNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Le <code><strong>ParentNode</strong></code> <span id="result_box" lang="fr"><span>contient des méthodes et des propriétés communes à tous les types d'objets</span></span> {{domxref("Node")}}  qui peuvent avoir des enfants. Il est implémenté par les objets {{domxref("Element")}}, {{domxref("Document")}}, et {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne la {{domxref("HTMLCollection")}} contenant tous les objets de type {{domxref("Element")}} qui sont des enfants de ce <code>ParentNode</code>.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne l' {{domxref("Element")}} qui est le premier enfant de ce <code>ParentNode</code>, ou <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne l'élément {{domxref("Element")}} qui est le dernier enfant de ce <code>ParentNode</code>, ou <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne un <code>unsigned long</code> donnant la quantité d'enfants du parent.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
+ <dd>Insère un ensemble d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} après le dernier enfant du <code>ParentNode</code>. Les objets {{domxref("DOMString")}} sont insérés comme équivalents aux noeuds {{domxref("Text")}} .</dd>
+ <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
+ <dd>Insère un ensemble d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} avant le premier enfant du <code>ParentNode</code>. Les objets {{domxref("DOMString")}} sont insérés comme équivalents aux noeuds {{domxref("Text")}}.</dd>
+ <dt>{{domxref("ParentNode.querySelector()")}}</dt>
+ <dd>Retourne le premier {{domxref("Element")}} avec l'élément actuel en tant que racine qui correspond au groupe de sélecteurs spécifié.</dd>
+ <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
+ <dd>Retourne une {{domxref("NodeList")}} représentant une liste d'éléments avec l'élément courant comme racine qui correspond au groupe de sélecteurs spécifié.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<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', '#parentnode', 'ParentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Divise l'interface <code>ElementTraversal</code> dans {{domxref("ChildNode")}} et {{domxref("ParentNode")}}. Les propriétés {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, et {{domxref("ParentNode.childElementCount")}} sont maintenant définies sur ce dernier. Ajout des propriétés {{domxref("ParentNode.children")}}, et des méthodes {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, et {{domxref("ParentNode.prepend()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajout de la définition initiale de ses propriétés dans l'interface pure<code>ElementTraversal,</code> et son utilisation sur {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ParentNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface pure {{domxref("ChildNode")}} .</li>
+ <li>
+  <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}}, et {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/lastelementchild/index.html b/files/fr/web/api/parentnode/lastelementchild/index.html
new file mode 100644
index 0000000000..8a978b0997
--- /dev/null
+++ b/files/fr/web/api/parentnode/lastelementchild/index.html
@@ -0,0 +1,161 @@
+---
+title: ParentNode.lastElementChild
+slug: Web/API/ParentNode/lastElementChild
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - parent
+translation_of: Web/API/ParentNode/lastElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété en lecture seule <code><strong>ParentNode.lastElementChild</strong></code>  renvoie  le dernier enfant de l'objet {{domxref("Element")}} ou <code>null</code> s'il n'y a pas d'élément enfant.</p>
+
+<div class="note">
+<p>Cette propriiété a été définie initialement dans la pure interface {{domxref("ElementTraversal")}}. Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (<em>noeuds</em>) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, <code>childElementCount</code> a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>element</em> = node.lastElementChild; </pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: html">&lt;ul id="foo"&gt;
+  &lt;li&gt;First  (1)&lt;/li&gt;
+  &lt;li&gt;Second (2)&lt;/li&gt;
+  &lt;li&gt;Third  (3)&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+var foo = document.getElementById('foo');
+// produit : Third  (3)
+console.log(foo.lastElementChild.textContent);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Polyfill_for_IE8_IE9_and_Safari">Polyfill for IE8, IE9 and Safari</h2>
+
+<pre class="brush: js">// Remplace le prototype "lastElementChild" natif.
+// Ajout de Document &amp; DocumentFragment pris en charge pour IE9 &amp; Safari.
+// Renvoie un tableau (array) à la place de HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<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', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Divise l'interface <code>ElementTraversal</code> en {{domxref("ChildNode")}} et <code>ParentNode</code>. La propriété est maintenant définie sur cette dernière.<br>
+    Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajout de sa définition initiale à la pure interface <code>ElementTraversal</code> et de son utilisation sur {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/prepend/index.html b/files/fr/web/api/parentnode/prepend/index.html
new file mode 100644
index 0000000000..a11511c3c8
--- /dev/null
+++ b/files/fr/web/api/parentnode/prepend/index.html
@@ -0,0 +1,137 @@
+---
+title: ParentNode.prepend()
+slug: Web/API/ParentNode/prepend
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - parent
+translation_of: Web/API/ParentNode/prepend
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <strong><code>ParentNode.prepend</code></strong> insère un jeu d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>) avant le premier enfant de <code>ParentNode</code>. Les objets {{domxref("DOMString")}} sont insérés comme équivalant des noeuds {{domxref("Text")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>ParentNode</em>.prepend(<em>nodesToPrepend</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodesToPrepend</code></dt>
+ <dd>Un noeud ou plus à insérer avant le premier noeud enfant dans le <code>ParentNode</code> courant. Chaque noeud peut être spécifié comme un objet {{domxref("Node")}} ou comme une chaîne de caractères ; les chaînes sont insérées comme de nouveaux noeuds {{domxref("Text")}}.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>undefined</code> (<em>indéfini</em>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}} : Le noeud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajout_dun_élément">Ajout d'un élément</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ &lt;span&gt;, &lt;p&gt; ]
+</pre>
+
+<h3 id="Ajout_dun_texte">Ajout d'un texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"</pre>
+
+<h3 id="Ajout_dun_élément_et_dun_texte">Ajout d'un élément et d'un texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.prepend_est_non_accessible"><code>ParentNode.prepend()</code> est non accessible</h3>
+
+<p>La méthode <code>prepend()</code> n'est pas comprise dans l'instruction <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined (<em>prepend n'est pas défini</em>)</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>vous pouvez utiliser le polyfill pour la méthode <code>prepend()</code> si elle n'est pas disponible :</p>
+
+<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<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', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ParentNode.prepend")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} et {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("ChildNode.before()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/parentnode/queryselector/index.html b/files/fr/web/api/parentnode/queryselector/index.html
new file mode 100644
index 0000000000..62844d47b1
--- /dev/null
+++ b/files/fr/web/api/parentnode/queryselector/index.html
@@ -0,0 +1,105 @@
+---
+title: ParentNode.querySelector()
+slug: Web/API/ParentNode/querySelector
+tags:
+  - API
+  - DOM
+  - Draft
+  - Method
+  - NeedsExample
+  - ParentNode
+  - Reference
+  - Selectors
+  - querySelector
+translation_of: Web/API/ParentNode/querySelector
+---
+<p>{{APIRef("DOM")}}{{Draft}}</p>
+
+<p>Le mixin {{DOMxRef("ParentNode")}} définit la méthode <code><strong>querySelector()</strong></code>  comme renvoyant un {{DOMxRef("Element")}} représentant le premier élément correspondant au groupe de sélecteurs spécifié qui sont les descendants de l'objet sur lequel la méthode a été appelée.</p>
+
+<p>Si vous avez besoin de tous les éléments correspondant à la liste de sélecteurs, utilisez plutôt {{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} .</p>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Remarque:</font></font></strong><font><font> Cette méthode est implémentée comme</font></font> {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} et {{DOMxRef("Element.querySelector()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>élément</var> = <em>parentNode</em>.querySelector(<var>sélécteurs</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>sélécteurs</code></dt>
+ <dd>Un {{DOMxRef("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être une <a href="/en-US/docs/Web/CSS/CSS_Selectors">compound selector list</a> <font>valide </font><font>prise en charge par le navigateur; sinon, une </font>exception<font> </font><code>SyntaxError</code> est levée. Voir <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors"><font><font>Localisation des éléments DOM à l'aide de sélecteurs</font></font></a> <font>pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. </font><font>Plusieurs sélecteurs peuvent être spécifiés en les séparant à l'aide de virgules.</font></dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Remarque: </font></font></strong><font><font>Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'un caractère barre oblique inverse. </font><font>Étant donné que JavaScript utilise également l'échappement arrière, une attention particulière doit être apportée lors de l'écriture de littéraux de chaîne à l'aide de ces caractères. </font><font>Voir</font></font> {{anch("Escaping special characters")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="Retourner_une_valeur">Retourner une valeur</h3>
+
+<p>Le premier {{DOMxRef("Element")}} qui correspond à au moins l'un des sélecteurs spécifiés ou <code>null</code> si aucun élément de ce type n'est trouvé.</p>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Remarque:</font></font></strong><font><font> Si le spécifié</font></font> <code>sélécteurs</code> <font><font>inclut un </font></font><font><font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-élément CSS</a>,</font></font>  la valeur renvoyée est toujours <code>null</code>.</p>
+</div>
+
+<h3 id="Des_exceptions">Des exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>La syntaxe de la chaîne <code>sélécteurs</code> <font>spécifiée </font><font>n'est pas valide.</font></dd>
+</dl>
+
+<h2 id="Caractéristiques"><font><font>Caractéristiques</font></font></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", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Niveau de vie</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Définition originale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><font><font>Compatibilité des navigateurs</font></font></h2>
+
+<div class="hidden"><font><font>Aucune donnée de compatibilité trouvée. </font><font>Veuillez fournir des données pour "api.ParentNode.querySelector" (profondeur: 1) au </font></font><a href="https://github.com/mdn/browser-compat-data" rel="noopener"><font><font>référentiel de données de compatibilité MDN</font></font></a><font><font> .</font></font></div>
+
+<p>{{Compat("api.ParentNode.querySelector")}}</p>
+
+<h2 id="Voir_également"><font><font>Voir également</font></font></h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors"><font><font>Localisation des éléments DOM à l'aide de sélecteurs</font></font></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Code_snippets/QuerySelector"><font><font>Extraits de code pour </font></font><code>querySelector()</code></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors"><font><font>Sélecteurs d'attributs</font></font></a><font><font> dans le guide CSS</font></font></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors"><font><font>Sélecteurs d'attributs</font></font></a><font><font> dans la zone d'apprentissage MDN</font></font></li>
+ <li>Cette méthode est disponible {{DOMxRef("Element.querySelector()")}}, {{DOMxRef("Document.querySelector()")}}, et {{DOMxRef("DocumentFragment.querySelector()")}}</li>
+</ul>
diff --git a/files/fr/web/api/parentnode/queryselectorall/index.html b/files/fr/web/api/parentnode/queryselectorall/index.html
new file mode 100644
index 0000000000..7c38961c38
--- /dev/null
+++ b/files/fr/web/api/parentnode/queryselectorall/index.html
@@ -0,0 +1,83 @@
+---
+title: ParentNode.querySelectorAll()
+slug: Web/API/ParentNode/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Sélecteurs
+  - parent
+translation_of: Web/API/ParentNode/querySelectorAll
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Renvoie une {{domxref("NodeList")}} représentant une liste d'éléments avec l'élément courant comme racine et qui correspondent au groupe de sélecteurs spécifiés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>elementList</var> = document.querySelectorAll(<var>selectors</var>);
+</pre>
+
+<p>où</p>
+
+<ul>
+ <li><code>elementList</code> est une {{domxref("NodeList")}} <a href="https://developer.mozilla.org/fr/docs/Web/API/NodeList#A_sometimes-live_collection">non-directe</a> d'objets {{domxref("element")}}.</li>
+ <li><code>selectors</code> est une chaîne de caractères (<em>string</em>) contenant un ou plusieurs <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> séparés par des virgules.</li>
+</ul>
+
+<p>La <code>NodeList</code> retournée contiendra tous les éléments dans le document qui correspondent à l'un des sélecteurs spécifiés. Si la chaîne <code><em>selectors</em></code> contient un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la <code><var>elementList</var></code> retournée sera vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple renvoie une liste de tous les éléments <code>div</code> d'un <code>document</code> avec une classe "<code>note</code>" ou "<code>alert</code>" :</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Renvoie une <code>NodeList</code> <a href="https://developer.mozilla.org/fr/docs/Web/API/NodeList#A_sometimes-live_collection">non directe</a> de tous les noeuds éléments correspondant.</p>
+
+<p>Lance une exception <code>SYNTAX_ERR</code> si le groupe de sélecteurs spécifié est invalide.</p>
+
+<p><code>querySelectorAll()</code> fut introduite dans l'API WebApps.</p>
+
+<p>L'argument chaîne passé à <code>querySelectorAll()</code> doit suivre la syntaxe CSS. Voir {{domxref("document.querySelector")}} pour des exemples concrets.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<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("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ParentNode.querySelectorAll")}}</p>
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.querySelectorAll")}}</li>
+ <li>{{domxref("Document.querySelectorAll")}}</li>
+ <li>{{domxref("DocumentFragment.querySelectorAll")}}</li>
+</ul>