diff options
Diffstat (limited to 'files/fr/web/api')
30 files changed, 384 insertions, 565 deletions
diff --git a/files/fr/web/api/console_api/index.html b/files/fr/web/api/console_api/index.html index d96eeb965d..f261988da5 100644 --- a/files/fr/web/api/console_api/index.html +++ b/files/fr/web/api/console_api/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Console_API <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Implémentation de Safari DevTools</a></li> </ul> -<p>L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la <code>console</code> - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console">console Web</a> du navigateur.</p> +<p>L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la <code>console</code> - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la <a href="/fr/docs/Tools/Web_Console">console Web</a> du navigateur.</p> <p>La méthode de loin la plus couramment utilisée est {{domxref ("console.log")}}, qui est utilisée pour consigner la valeur en cours contenue dans une variable spécifique.</p> @@ -42,7 +42,7 @@ translation_of: Web/API/Console_API // Output "Hello world" to the console console.log(myString)</pre> -<p>Consultez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Console#Usage">la page de référence de la console</a> pour plus d'exemples.</p> +<p>Consultez <a href="/fr/docs/Web/API/Console#Usage">la page de référence de la console</a> pour plus d'exemples.</p> <h2 id="Spécifications">Spécifications</h2> @@ -69,6 +69,6 @@ console.log(myString)</pre> <ul> <li><a href="/en-US/docs/Tools" title="Tools">Outils</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console">Console Web</a> - comment la console Web de Firefox traite les appels de l'<code>API Console</code>.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Débogage à distance</a> - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile.</li> + <li><a href="/fr/docs/Tools/Web_Console">Console Web</a> - comment la console Web de Firefox traite les appels de l'<code>API Console</code>.</li> + <li><a href="/fr/docs/Tools/Remote_Debugging">Débogage à distance</a> - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile.</li> </ul> diff --git a/files/fr/web/api/document_object_model/introduction/index.html b/files/fr/web/api/document_object_model/introduction/index.html index 664fd5b1eb..a33909ef06 100644 --- a/files/fr/web/api/document_object_model/introduction/index.html +++ b/files/fr/web/api/document_object_model/introduction/index.html @@ -2,26 +2,30 @@ title: Introduction slug: Web/API/Document_Object_Model/Introduction tags: + - Beginner - DOM + - Document - Guide - - Reference + - HTML DOM + - Introduction + - Tutorial translation_of: Web/API/Document_Object_Model/Introduction --- -<p>Le Modèle Objet de Document (<strong>DOM: Document object Model</strong>) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, <span class="tlid-translation translation" lang="fr"><span title="">nous présenterons brièvement le DOM</span></span>. <span class="tlid-translation translation" lang="fr"><span title="">Nous verrons comment le DOM représente un document </span></span> {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.</p> +<div>{{DefaultAPISidebar("DOM")}}</div> -<p><strong>NDTR:</strong> (Cette section consiste en une brève introduction conceptuelle du <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">DOM</a> : elle explique de quoi il s'agit, comment celui-ci fournit une structure pour les documents <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/docs/Glossaire/XML">XML</a>, la manière d'y accéder, et comment cette API présente les informations de référence et exemples).</p> +<p>Le Modèle Objet de Document (<strong>DOM: Document object Model</strong>) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.</p> -<h2 id="Pr.C3.A9sentation_du_DOM" name="Pr.C3.A9sentation_du_DOM"><span class="tlid-translation translation" lang="fr"><span title="">Qu'est-ce que le DOM?</span></span></h2> +<h2 id="what_is_the_dom">Qu'est-ce que le DOM?</h2> <p>Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.</p> <p>Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript.</p> -<p>Les normes <a class="external" href="http://www.w3.org/DOM/">DOM du W3C</a> et <a class="external external-icon" href="https://dom.spec.whatwg.org">WHATWG DOM</a> forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.</p> +<p>Les normes <a href="https://www.w3.org/DOM/">DOM du W3C</a> et <a href="https://dom.spec.whatwg.org">WHATWG DOM</a> forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.</p> -<p>Par exemple, DOM du W3C spécifie que la méthode <code>getElementsByTagName</code> dans le code ci-dessous doit renvoyer une liste de tous les éléments <code><P></code> présents dans le document :</p> +<p>Par exemple, DOM du W3C spécifie que la méthode <code>getElementsByTagName</code> dans le code ci-dessous doit renvoyer une liste de tous les éléments <code><P></code> présents dans le document :</p> -<pre class="notranslate">paragraphes = document.getElementsByTagName("P"); +<pre class="brush: js">const paragraphs = document.querySelectorAll("p"); // paragraphes[0] est le premier élément <p> // paragraphes[1] est le second élément <p>, etc. alert(paragraphes[0].nodeName); @@ -29,63 +33,62 @@ alert(paragraphes[0].nodeName); <p>Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet <code>document</code> qui représente le document lui-même, l'objet <code>table</code> qui implémente l'interface DOM particulière <code>HTMLTableElement</code> permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.</p> -<h2 id="DOM_et_JavaScript" name="DOM_et_JavaScript">DOM et JavaScript</h2> +<h2 id="dom_and_javascript">DOM et JavaScript</h2> -<p>Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">JavaScript</a>. C'est-à-dire qu'il est<em> écrit</em> en JavaScript, mais qu'il<em> utilise</em> le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.</p> +<p>Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en <a href="/fr/docs/Web/JavaScript">JavaScript</a>. C'est-à-dire qu'il est<em> écrit</em> en JavaScript, mais qu'il<em> utilise</em> le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.</p> -<p>À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :</p> +<p>À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :</p> <p>API(page Web ou XML) = DOM + JS(langage de script)</p> -<p>Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :</p> +<p>Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :</p> -<pre class="eval notranslate"># Exemple d'utilisation du DOM en Python +<pre class="brush: python"># Exemple d'utilisation du DOM en Python import xml.dom.minidom as m doc = m.parse("C:\\Projects\\Py\\chap1.xml"); doc.nodeName # Propriété DOM de l'objet document; p_list = doc.getElementsByTagName("para"); </pre> -<p>Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Survol des technologies JavaScript</a>.</p> +<p>Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir <a href="/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Survol des technologies JavaScript</a>.</p> -<h2 id="M.C3.A9thodes_d.27acc.C3.A8s_au_DOM" name="M.C3.A9thodes_d.27acc.C3.A8s_au_DOM">Méthodes d'accès au DOM</h2> +<h2 id="how_do_i_access_the_dom">Méthodes d'accès au DOM</h2> <p>Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.</p> -<p>Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <code><SCRIPT></code> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments <code><a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a></code> ou <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a></code>, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window/alert">alert()</a></code> de l'objet <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a></code>, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.</p> +<p>Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <code><SCRIPT></code> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments <code><a href="/fr/docs/Web/API/Document">document</a></code> ou <code><a href="/fr/docs/Web/API/Window">window</a></code>, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code> de l'objet <code><a href="/fr/docs/Web/API/Window">window</a></code>, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.</p> <p>Le code JavaScript suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).</p> -<pre class="eval notranslate"><body - onload="window.alert('Bienvenue sur ma page Web !');"> +<pre class="brush: html"><body onload="window.alert('Bienvenue sur ma page Web !');"></pre> + +<p>Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :</p> + +<pre class="brush: html"><html> + <head> + <script> + // run this function when the document is loaded + window.onload = function() { + + // create a couple of elements in an otherwise empty HTML page + const heading = document.createElement("h1"); + const heading_text = document.createTextNode("Gros titre !"); + heading.appendChild(heading_text); + document.body.appendChild(heading); + } + </script> + </head> + <body> + </body> +</html> </pre> -<p>Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :</p> - -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="comment token">//exécute la fonction lorsque le document est chargé</span> - window<span class="punctuation token">.</span>onload <span class="operator 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="comment token">// crée </span></span></code> <span id="result_box" lang="fr"><span>un couple d'éléments dans une page HTML autrement vide</span></span><code class="language-html"><span class="language-javascript script token"> - <span class="keyword token">var</span> heading <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"h1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> heading_text <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"Big Head!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - heading<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading_text<span class="punctuation token">)</span><span class="punctuation token">;</span> - document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h2 id="Types_de_donn.C3.A9es_importants" name="Types_de_donn.C3.A9es_importants"><span class="tlid-translation translation" lang="fr"><span title="">Types de données fondamentaux</span></span></h2> +<h2 id="important_data_types">Types de données fondamentaux</h2> <p>Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.</p> <div class="blockIndicator note"> -<p><strong>Note</strong>: Parceque la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. <span class="tlid-translation translation" lang="fr"><span title="">Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN </span></span> <span class="tlid-translation translation" lang="fr"><span title="">fera souvent la même chose, à cause de la fréquence de cette hypothèse.</span></span></p> +<p><strong>Note</strong>: Parceque la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.</p> </div> <p><strong>NDTR: </strong>(Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant <code>elements</code>, aux tableaux de nœuds en tant que <code>nodeLists</code> (ou même simplement éléments), et aux nœuds d'attributs en tant qu'<code>attributes)</code>.</p> @@ -102,19 +105,19 @@ p_list = doc.getElementsByTagName("para"); <tbody> <tr> <td>{{domxref("Document")}}</td> - <td>Lorsqu'un membre renvoie un objet de type <code>document</code> (par exemple la propriété <strong>ownerDocument</strong> d'un élément, qui retourne le <code>document</code> auquel il appartient), cet objet est l'objet <code>document</code> racine lui-même. Le chapitre <a href="https://developer.mozilla.org/fr/docs/Web/API/document">référence de DOM <code>document</code></a> décrit l'objet <code>document</code> en détail.</td> + <td>Lorsqu'un membre renvoie un objet de type <code>document</code> (par exemple la propriété <strong>ownerDocument</strong> d'un élément, qui retourne le <code>document</code> auquel il appartient), cet objet est l'objet <code>document</code> racine lui-même. Le chapitre <a href="/fr/docs/Web/API/Document">référence de DOM <code>document</code></a> décrit l'objet <code>document</code> en détail.</td> </tr> <tr> <td>{{domxref("Node")}}</td> - <td>Chaque objet du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi un nœud text ou nœud attribut.</td> + <td>Chaque objet du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi un nœud text ou nœud attribut.</td> </tr> <tr> <td>{{domxref("Element")}}</td> - <td>Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement">document.createElement()</a> renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces <span class="tlid-translation translation" lang="fr"><span title="">décrivant les capacités d'éléments spécifiques</span></span> ( <span class="tlid-translation translation" lang="fr"><span title="">par exemple</span></span> , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td> + <td>Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode <a href="/fr/docs/Web/API/Document/createElement">document.createElement()</a> renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces décrivant les capacités d'éléments spécifiques ( par exemple , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td> </tr> <tr> <td>{{domxref("NodeList")}}</td> - <td>Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est renvoyé par la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a>. Les éléments d'une <code>nodeList</code> sont accessibles par un index de deux manières différentes : + <td>Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est renvoyé par la méthode <a href="/fr/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a>. Les éléments d'une <code>nodeList</code> sont accessibles par un index de deux manières différentes : <ul> <li>list.item(1)</li> <li>list[1]</li> @@ -134,36 +137,36 @@ p_list = doc.getElementsByTagName("para"); </tbody> </table> -<h2 id="Les_interfaces_DOM" name="Les_interfaces_DOM">Les interfaces DOM</h2> +<h2 id="dom_interfaces">Les interfaces DOM</h2> <p>Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont les<em>choses</em> réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément <code>HTML FORM</code> reçoit sa propriété <strong>name</strong> de l'interface <code>HTMLElement</code>. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.</p> <p>Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.</p> -<h3 id="Les_interfaces_et_les_objets" name="Les_interfaces_et_les_objets">Les interfaces et les objets</h3> +<h3 id="interfaces_and_objects">Les interfaces et les objets</h3> -<p><span class="tlid-translation translation" lang="fr"><span title="">De nombreux objets empruntent à plusieurs interfaces différentes.</span></span> L'objet table par exemple implémente une <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLTableElement">interface spécialisée de l'élément HTML Table</a>, <span class="tlid-translation translation" lang="fr"><span title="">qui comprend des méthodes telles que</span></span> <code>createCaption</code> et <code>insertRow</code>. Mais comme il s'agit également d'un élément HTML, <code>table</code> implémente aussi l'interface <code>Element</code> décrite dans le chapitre <a href="https://developer.mozilla.org/fr/docs/Web/API/element">Référence de DOM <code>element</code></a>. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique <code>Node</code>, dont dérive <code>Element</code>.</p> +<p>De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une <a href="/fr/docs/Web/API/HTMLTableElement">interface spécialisée de l'élément HTML Table</a>, qui comprend des méthodes telles que <code>createCaption</code> et <code>insertRow</code>. Mais comme il s'agit également d'un élément HTML, <code>table</code> implémente aussi l'interface <code>Element</code> décrite dans le chapitre <a href="/fr/docs/Web/API/Element">Référence de DOM <code>element</code></a>. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique <code>Node</code>, dont dérive <code>Element</code>.</p> <p>Lorsque vous obtiendrez une référence à un objet <code>table</code>, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.</p> -<pre class="notranslate">var table = document.getElementById("table"); +<pre class="brush: js">var table = document.getElementById("table"); var tableAttrs = table.attributes; // Interface Node/Element for(var i = 0; i < tableAttrs.length; i++){ - // Interface HTMLTableElement : attribut border + // Interface HTMLTableElement : attribut border if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } -// Interface HTMLTableElement : attribut summary -table.summary = "note : bordure plus large"; +// Interface HTMLTableElement : attribut summary +table.summary = "note : bordure plus large"; </pre> -<h3 id="Interfaces_essentielles_du_DOM" name="Interfaces_essentielles_du_DOM">Interfaces essentielles du DOM</h3> +<h3 id="core_interfaces_in_the_dom">Interfaces essentielles du DOM</h3> -<p>Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples d'utilisation du DOM</a> à la fin de livre.</p> +<p>Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre <a href="/fr/docs/Web/API/Document_Object_Model/Examples">Exemples d'utilisation du DOM</a> à la fin de livre.</p> -<p>Les objets <code>document</code> et <code>window</code> sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet <code>window</code> représente quelque chose comme le navigateur, et l'objet <code>document</code> est la racine du document lui-même. <code>Element</code> hérite de l'interface générique <code>Node</code>, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. <span class="tlid-translation translation" lang="fr"><span title="">Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent</span></span>, comme dans l'objet <code>table</code> donné en exemple dans la section précédente.</p> +<p>Les objets <code>document</code> et <code>window</code> sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet <code>window</code> représente quelque chose comme le navigateur, et l'objet <code>document</code> est la racine du document lui-même. <code>Element</code> hérite de l'interface générique <code>Node</code>, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet <code>table</code> donné en exemple dans la section précédente.</p> -<p>Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM.</p> +<p>Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM.</p> <ul> <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li> @@ -181,9 +184,7 @@ table.summary = "note : bordure plus large"; <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li> </ul> - - -<h2 id="Test_de_l.27API_DOM" name="Test_de_l.27API_DOM">Test de l'API DOM</h2> +<h2 id="testing_the_dom_api">Test de l'API DOM</h2> <p>Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément <script>, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.</p> @@ -191,107 +192,51 @@ table.summary = "note : bordure plus large"; <p>Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction <code>test()</code>, créer plus de boutons, ou ajouter d'autres éléments si nécessaire.</p> -<pre class="notranslate"><html> +<pre class="brush: html"><html> <head> -<title>Tests du DOM</title> -<script type="application/x-javascript"> -function setBodyAttr(attr,value){ - if(document.body) eval('document.body.'+attr+'="'+value+'"'); - else notSupported(); -} -</script> + <title>Tests du DOM</title> + <script type="application/x-javascript"> + function setBodyAttr(attr,value){ + if(document.body) eval('document.body.'+attr+'="'+value+'"'); + else notSupported(); + } + </script> </head> <body> -<div style="margin: .5in; height="400""> -<p><b><tt>text</tt> color</p> -<form> -<select onChange="setBodyAttr('text', - this.options[this.selectedIndex].value);"> -<option value="black">black -<option value="darkblue">darkblue -</select> - <p><b><tt>bgColor</tt></p> - <select onChange="setBodyAttr('bgColor', - this.options[this.selectedIndex].value);"> -<option value="white">white -<option value="lightgrey">gray - </select> -<p><b><tt>link</tt></p> -<select onChange="setBodyAttr('link', - this.options[this.selectedIndex].value);"> -<option value="blue">blue -<option value="green">green -</select> <small> - <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> -(exemple de lien)</a></small><br> -</form> -<form> - <input type="button" value="version" onclick="ver()" /> -</form> -</div> + <div style="margin: .5in; height="400""> + <p><b><tt>text</tt> color</p> + <form> + <select onChange="setBodyAttr('text', + this.options[this.selectedIndex].value);"> + <option value="black">black + <option value="darkblue">darkblue + </select> + <p><b><tt>bgColor</tt></p> + <select onChange="setBodyAttr('bgColor', + this.options[this.selectedIndex].value);"> + <option value="white">white + <option value="lightgrey">gray + </select> + <p><b><tt>link</tt></p> + <select onChange="setBodyAttr('link', + this.options[this.selectedIndex].value);"> + <option value="blue">blue + <option value="green">green + </select> <small> + <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> + (exemple de lien)</a></small><br> + </form> + <form> + <input type="button" value="version" onclick="ver()" /> + </form> + </div> </body> -</html> -</pre> +</html></pre> -<p>Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.</p> +<p>Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.</p> <p>Figure 0.1 Exemple de page de test du DOM</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/391/DOM_Ref_Introduction_to_the_DOM.gif" style="height: 375px; width: 199px;"></p> - -<p>Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (<code>bgColor</code>), la couleur des hyperliens (<code>aLink</code>) et la couleur du texte (<code>text</code>). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.</p> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction au DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Les_%C3%A9v%C3%A8nements_et_le_DOM">Les événements et le DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li> -</ul> +<p><img alt="" src="dom_ref_introduction_to_the_dom.gif"></p> -<article class="approved"> -<div class="boxed translate-rendered text-content"> -<div>{{DefaultAPISidebar("DOM")}}</div> -</div> -</article> - -<article class="localized"> -<header> -<h3 id="Traduction_en_Français">Traduction en Français :</h3> -</header> - -<div class="guide-links"><a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Community" rel="noopener">Besoin d'aide ?</a> • <a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Contribute/Editor" rel="noopener">Guide d'édition</a> • <a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Contribute/Content/Style_guide" rel="noopener">Guide stylistique</a></div> - -<div class="editor-wrapper" id="editor-wrapper"> -<div class="draft-container"> -<div class="draft-old"></div> - -<div class="draft-status"><span id="draft-action">Brouillon enregistré automatiquement : <time class="time-ago" id="draft-time" title="2019-10-19T19:12:47.156Z">19/10/2019 21:12:47</time></span></div> -</div> - -<div class="ckeditor-container editor-container dirty"> -<div class="editor"> -<div class="editor-tools"></div> - -<div style="height: 106px;"> -<div style="border: 1px solid rgb(182, 182, 182); width: 894px; position: fixed; top: 0px;"></div> -</div> -</div> -</div> -</div> -</article> - -<article class="localized"> -<div class="editor-wrapper" id="editor-wrapper"> -<div class="ckeditor-container editor-container dirty"> -<div class="editor"> -<div class="cke" dir="ltr" id="cke_id_content" lang="fr"> -<div> -<div id="cke_1_contents" style="height: 9993px;"></div> -</div> -</div> -</div> -</div> -</div> -</article> +<p>Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (<code>bgColor</code>), la couleur des hyperliens (<code>aLink</code>) et la couleur du texte (<code>text</code>). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.</p> diff --git a/files/fr/web/api/element/index.html b/files/fr/web/api/element/index.html index 9c47374845..05f5a2f840 100644 --- a/files/fr/web/api/element/index.html +++ b/files/fr/web/api/element/index.html @@ -8,11 +8,12 @@ tags: - Interface - Reference - Web API +browser-compat: api.Element translation_of: Web/API/Element --- -<p>{{APIRef("DOM")}}</p> +<div>{{APIRef("DOM")}}</div> -<p><strong><code>Element</code></strong> est la classe de base la plus générale à partir de laquelle tous les objets d'un {{domxref("Document")}} héritent. <span>Il n'a que des méthodes et des propriétés communes à tous les types d'éléments.</span> <span>Les classes plus spécifiques héritent d'<code>Element</code>.</span> <span>Par exemple, l'interface {{domxref("HTMLElement")}} est l'interface de base pour les éléments HTML, tandis que l'interface {{domxref ("SVGElement")}} est la base de tous les éléments SVG.</span> <span>La plupart des fonctionnalités sont spécifiées plus bas dans la hiérarchie des classes.</span></p> +<p><strong><code>Element</code></strong> est la classe de base la plus générale à partir de laquelle tous les objets d'un <a href="/fr/docs/Web/API/Document"><code>Document</code></a> héritent. <span>Il n'a que des méthodes et des propriétés communes à tous les types d'éléments.</span> <span>Les classes plus spécifiques héritent d'<code>Element</code>.</span> <span>Par exemple, l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> est l'interface de base pour les éléments HTML, tandis que l'interface {{domxref ("SVGElement")}} est la base de tous les éléments SVG.</span> <span>La plupart des fonctionnalités sont spécifiées plus bas dans la hiérarchie des classes.</span></p> <p>Les langages en dehors du domaine de la plate-forme Web, comme XUL via l'interface <code>XULElement</code>, implémentent également <code>Element</code>.</p> @@ -20,198 +21,198 @@ translation_of: Web/API/Element <h2 id="Propriétés">Propriétés</h2> -<p><em><span>Hérite des propriétés de son interface parent {{domxref("Node")}} et, par extension, du parent de cette interface {{domxref("EventTarget")}}.</span> <span>Il implémente les propriétés de {{domxref("ParentNode")}}, </span></em> <em>{{domxref("ChildNode")}},</em> <em><span> {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p> +<p><em><span>Hérite des propriétés de son interface parent <a href="/fr/docs/Web/API/Node"><code>Node</code></a> et, par extension, du parent de cette interface <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>.</span> <span>Il implémente les propriétés de <a href="/fr/docs/Web/API/ParentNode"><code>ParentNode</code></a>, </span></em> <em><a href="/fr/docs/Web/API/ChildNode"><code>ChildNode</code></a>,</em> <em><span> <a href="/fr/docs/Web/API/NonDocumentTypeChildNode"><code>NonDocumentTypeChildNode</code></a> et <a href="/fr/docs/Web/API/Animatable"><code>Animatable</code></a>.</span></em></p> <dl> - <dt>{{domxref("Element.attributes")}} {{readOnlyInline}}</dt> - <dd>Retourne un objet {{domxref("NamedNodeMap")}} contenant les attributs assignés de l'élément HTML correspondant.</dd> - <dt>{{domxref("Element.classList")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{domxref("DOMTokenList")}} contenant la liste des attributs de classe.</dd> - <dt>{{domxref("Element.className")}}</dt> - <dd>est une {{domxref("DOMString")}} représentant la classe de l'élément.</dd> - <dt>{{domxref("Element.clientHeight")}} {{experimental_inline}} {{readOnlyInline}}</dt> - <dd>Retourne un {{jsxref("Number")}} représentant la hauteur intérieure de l'élément.</dd> - <dt>{{domxref("Element.clientLeft")}} {{readOnlyInline}}</dt> - <dd>Retourne un {{jsxref("Number")}} représentant la largeur de la bordure gauche de l'élément.</dd> - <dt>{{domxref("Element.clientTop")}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/attributes"><code>Element.attributes</code></a> {{readOnlyInline}}</dt> + <dd>Retourne un objet <a href="/fr/docs/Web/API/NamedNodeMap"><code>NamedNodeMap</code></a> contenant les attributs assignés de l'élément HTML correspondant.</dd> + <dt><a href="/fr/docs/Web/API/Element/classList"><code>Element.classList</code></a> {{readOnlyInline}}</dt> + <dd>Retourne une <a href="/fr/docs/Web/API/DOMTokenList"><code>DOMTokenList</code></a> contenant la liste des attributs de classe.</dd> + <dt><a href="/fr/docs/Web/API/Element/className"><code>Element.className</code></a></dt> + <dd>est une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant la classe de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/clientHeight"><code>Element.clientHeight</code></a> {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Retourne un {{jsxref("Number")}} représentant la hauteur intérieure de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/clientLeft"><code>Element.clientLeft</code></a> {{readOnlyInline}}</dt> + <dd>Retourne un {{jsxref("Number")}} représentant la largeur de la bordure gauche de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/clientTop"><code>Element.clientTop</code></a> {{readOnlyInline}}</dt> <dd>Retourne un {{jsxref("Number")}} représentant la largeur de la bordure haut de l'élément.</dd> - <dt>{{domxref("Element.clientWidth")}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/clientWidth"><code>Element.clientWidth</code></a> {{readOnlyInline}}</dt> <dd>Retourne un {{jsxref("Number")}} représentant la largeur intérieure de l'élément.</dd> - <dt>{{domxref("Element.computedName")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{domxref("DOMString")}} contenant l'étiquette affichée pour l'accessibilité.</dd> - <dt>{{domxref("Element.computedRole")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{domxref("DOMString")}} contenant le rôle ARIA qui a été appliqué à un élément particulier.</dd> - <dt>{{domxref("Element.id")}}</dt> - <dd>est une {{domxref("DOMString")}} représentant l'id <em>(identifiant)</em> de l'élément.</dd> - <dt>{{domxref("Element.innerHTML")}}</dt> - <dd>Est une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd> - <dt>{{ domxref("Element.localName") }} {{readOnlyInline}}</dt> - <dd>une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd> - <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/computedName"><code>Element.computedName</code></a> {{readOnlyInline}}</dt> + <dd>Retourne une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> contenant l'étiquette affichée pour l'accessibilité.</dd> + <dt><a href="/fr/docs/Web/API/Element/computedRole"><code>Element.computedRole</code></a> {{readOnlyInline}}</dt> + <dd>Retourne une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> contenant le rôle ARIA qui a été appliqué à un élément particulier.</dd> + <dt><a href="/fr/docs/Web/API/Element/id"><code>Element.id</code></a></dt> + <dd>est une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant l'id <em>(identifiant)</em> de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/innerHTML"><code>Element.innerHTML</code></a></dt> + <dd>Est une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant la partie locale du nom qualifié de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/localName"><code>Element.localName</code></a> {{readOnlyInline}}</dt> + <dd>une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant la partie locale du nom qualifié de l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/namespaceURI"><code>Element.namespaceURI</code></a> {{readonlyInline}}</dt> <dd>L'URI d'espace de noms de l'élément, ou <code>null</code> s'il n'est pas un espace de noms.</dd> </dl> <div class="note"> -<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, les éléments HTML ne sont pas dans un espace de noms. <span>Dans les versions ultérieures, les éléments HTML se trouvent dans l'espace de noms <code><a class="linkification-ext external external-icon" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> <span lang="fr"><span> dans les arborescences HTML et XML. </span></span> {{gecko_minversion_inline("1.9.2")}}</span></p> +<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, les éléments HTML ne sont pas dans un espace de noms. <span>Dans les versions ultérieures, les éléments HTML se trouvent dans l'espace de noms <code><a href="https://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> <span lang="fr"><span> dans les arborescences HTML et XML. </span></span> </span></p> </div> <dl> - <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt> - <dd>est un {{domxref("Element")}} suivant immédiatement dans l'arbre celui donné, ou <code>null</code> s'il n'y a pas de noeud frère.</dd> - <dt>{{domxref("Element.outerHTML")}}</dt> - <dd>Est une {{domxref("DOMString")}} représentant le balisage de l'élément, y compris son contenu. <span>Lorsqu'il est utilisé en tant qu'initiateur, remplace l'élément par des nœuds analysés à partir de la chaîne donnée.</span></dd> - <dt>{{DOMxRef("Element.part")}}</dt> - <dd>Représente le ou les identifiants <code>part</code> de l'élément (c'est-à-dire définis en utilisant l'attribut <code>part</code>), retournés dans un {{domxref("DOMTokenList")}}.</dd> - <dt>{{domxref("Element.prefix")}} {{readOnlyInline}}</dt> - <dd>Une {{domxref("DOMString")}} représentant le préfixe de l'espace de noms de l'élément, ou <code>null</code> si aucun préfixe n'est spécifié.</dd> - <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt> - <dd>Est un {{domxref("Element")}}, celui précédant immédiatement dans l'arbre l'élément donné, ou <code>null</code> s'il n'y a pas d'élément frère.</dd> - <dt>{{domxref("Element.scrollHeight")}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling"><code>NonDocumentTypeChildNode.nextElementSibling</code></a> {{readOnlyInline}}</dt> + <dd>est un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> suivant immédiatement dans l'arbre celui donné, ou <code>null</code> s'il n'y a pas de noeud frère.</dd> + <dt><a href="/fr/docs/Web/API/Element/outerHTML"><code>Element.outerHTML</code></a></dt> + <dd>Est une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le balisage de l'élément, y compris son contenu. <span>Lorsqu'il est utilisé en tant qu'initiateur, remplace l'élément par des nœuds analysés à partir de la chaîne donnée.</span></dd> + <dt><a href="/fr/docs/Web/API/Element/part"><code>Element.part</code></a></dt> + <dd>Représente le ou les identifiants <code>part</code> de l'élément (c'est-à-dire définis en utilisant l'attribut <code>part</code>), retournés dans un <a href="/fr/docs/Web/API/DOMTokenList"><code>DOMTokenList</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/prefix"><code>Element.prefix</code></a> {{readOnlyInline}}</dt> + <dd>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le préfixe de l'espace de noms de l'élément, ou <code>null</code> si aucun préfixe n'est spécifié.</dd> + <dt><a href="/fr/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling"><code>NonDocumentTypeChildNode.previousElementSibling</code></a> {{readOnlyInline}}</dt> + <dd>Est un <a href="/fr/docs/Web/API/Element"><code>Element</code></a>, celui précédant immédiatement dans l'arbre l'élément donné, ou <code>null</code> s'il n'y a pas d'élément frère.</dd> + <dt><a href="/fr/docs/Web/API/Element/scrollHeight"><code>Element.scrollHeight</code></a> {{readOnlyInline}}</dt> <dd>Retourne un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>la hauteur de vue de défilement d'un élément.</span></span></dd> - <dt>{{domxref("Element.scrollLeft")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollLeft"><code>Element.scrollLeft</code></a></dt> <dd>Est un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>le décalage de défilement gauche de l'élément.</span></span></dd> - <dt>{{domxref("Element.scrollLeftMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt> - <dd>Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement gauche possible pour l'élément.</dd> - <dt>{{domxref("Element.scrollTop")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollLeftMax"><code>Element.scrollLeftMax</code></a> {{non-standard_inline}} {{readOnlyInline}}</dt> + <dd>Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement gauche possible pour l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/scrollTop"><code>Element.scrollTop</code></a></dt> <dd>Est un {{jsxref("Number")}} représentant le décalage de défilement haut de l'élément.</dd> - <dt>{{domxref("Element.scrollTopMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollTopMax"><code>Element.scrollTopMax</code></a> {{non-standard_inline}} {{readOnlyInline}}</dt> <dd>Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement haut possible pour l'élément.</dd> - <dt>{{domxref("Element.scrollWidth")}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollWidth"><code>Element.scrollWidth</code></a> {{readOnlyInline}}</dt> <dd>Retourne un {{jsxref("Number")}} représentant la largeur de vue de défilement de l'élément.</dd> - <dt>{{domxref("Element.shadowRoot")}} {{readOnlyInline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/shadowRoot"><code>Element.shadowRoot</code></a> {{readOnlyInline}}</dt> <dd>Renvoie la racine shadow la plus jeune hébergée par l'élément.</dd> - <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt> - <dd>Retourne la racine fantôme qui a l'élément pour hôte, qu'elle soit ouverte ou fermée. <strong>Disponible seulement pour les <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> - <dt>{{domxref("Element.slot")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/openOrClosedShadowRoot"><code>Element.openOrClosedShadowRoot</code></a> {{Non-standard_Inline}}{{readOnlyInline}}</dt> + <dd>Retourne la racine fantôme qui a l'élément pour hôte, qu'elle soit ouverte ou fermée. <strong>Disponible seulement pour les <a href="/fr/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd> + <dt><a href="/fr/docs/Web/API/Element/slot"><code>Element.slot</code></a> {{experimental_inline}}</dt> <dd>Renvoie le nom de l'emplacement du DOM shadow attaché à l'élément. <span>Un emplacement (<em>slot</em>) est un espace réservé dans un composant web que les utilisateurs peuvent remplir avec leur propre balisage.</span></dd> - <dt>{{domxref("Element.tabStop")}} {{non-standard_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/tabStop"><code>Element.tabStop</code></a> {{non-standard_inline}}</dt> <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément peut recevoir un focus d'entrée via la touche de tabulation.</dd> - <dt>{{domxref("Element.tagName")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{domxref("String")}} avec le nom de la balise pour l'élément donné.</dd> - <dt>{{domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt> - <dd>Retourne le {{domxref("UndoManager")}} associé à l'élément.</dd> - <dt>{{domxref("Element.undoScope")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/tagName"><code>Element.tagName</code></a> {{readOnlyInline}}</dt> + <dd>Retourne une <a href="/fr/docs/Web/API/String"><code>String</code></a> avec le nom de la balise pour l'élément donné.</dd> + <dt><a href="/fr/docs/Web/API/Element/undoManager"><code>Element.undoManager</code></a> {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>Retourne le <a href="/fr/docs/Web/API/UndoManager"><code>UndoManager</code></a> associé à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/undoScope"><code>Element.undoScope</code></a> {{experimental_inline}}</dt> <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément <span class="short_text" id="result_box" lang="fr"><span>est un hôte de portée d'annulation, ou non.</span></span></dd> </dl> <div class="note"> -<p><strong>Note :</strong> DOM niveau 3 définit <code>namespaceURI</code>, <code>localName</code> et <code>prefix </code>sur l'interface {{domxref("Node")}}. Dans DOM4, ils ont été déplacés dans <code>Element</code>.</p> +<p><strong>Note :</strong> DOM niveau 3 définit <code>namespaceURI</code>, <code>localName</code> et <code>prefix </code>sur l'interface <a href="/fr/docs/Web/API/Node"><code>Node</code></a>. Dans DOM4, ils ont été déplacés dans <code>Element</code>.</p> <p>Ce changement est implémenté dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.</p> </div> <h3 id="Propriété_inclue_dans_Slotable">Propriété inclue dans "Slotable"</h3> -<p><em>L'interface <code>Element</code> inclut la propriété suivante, définie sur le "mixin" </em> <em>{{domxref("Slotable")}}. </em></p> +<p><em>L'interface <code>Element</code> inclut la propriété suivante, définie sur le "mixin" </em> <em><a href="/fr/docs/Web/API/Slotable"><code>Slotable</code></a>. </em></p> <dl> - <dt>{{domxref("Slotable.assignedSlot")}}{{readonlyInline}}</dt> - <dd>renvoie un {{domxref("HTMLSlotElement")}} représentant le {{htmlelement("slot")}} sur lequel le noeud est inséré.</dd> + <dt><a href="/fr/docs/Web/API/Slotable/assignedSlot"><code>Slotable.assignedSlot</code></a>{{readonlyInline}}</dt> + <dd>renvoie un <a href="/fr/docs/Web/API/HTMLSlotElement"><code>HTMLSlotElement</code></a> représentant le {{htmlelement("slot")}} sur lequel le noeud est inséré.</dd> </dl> <h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2> -<p><em>Hérite des méthodes de son parent {{domxref ("Node")}} et de son propre parent {{domxref ("EventTarget")}}, et implémente celles de {{domxref("ParentNode")}}, </em> <em><em>{{domxref("ChildNode")}}</em></em> <em><span lang="fr">, {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p> +<p><em>Hérite des méthodes de son parent {{domxref ("Node")}} et de son propre parent {{domxref ("EventTarget")}}, et implémente celles de <a href="/fr/docs/Web/API/ParentNode"><code>ParentNode</code></a>, </em> <em><em><a href="/fr/docs/Web/API/ChildNode"><code>ChildNode</code></a></em></em> <em><span lang="fr">, <a href="/fr/docs/Web/API/NonDocumentTypeChildNode"><code>NonDocumentTypeChildNode</code></a> et <a href="/fr/docs/Web/API/Animatable"><code>Animatable</code></a>.</span></em></p> <dl> - <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dt><a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>EventTarget.addEventListener()</code></a></dt> <dd>enregistre sur l'élément un gestionnaire d'évènements propre à un type d'évènements.</dd> - <dt>{{domxref("Element.attachShadow()")}}</dt> - <dd>Attache un arbre DOM shadow à l'élément spécifié et renvoie une référence à sa {{domxref("ShadowRoot")}} (<em>racine</em>).</dd> - <dt>{{domxref("Element.animate()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/attachShadow"><code>Element.attachShadow()</code></a></dt> + <dd>Attache un arbre DOM shadow à l'élément spécifié et renvoie une référence à sa <a href="/fr/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a> (<em>racine</em>).</dd> + <dt><a href="/fr/docs/Web/API/Element/animate"><code>Element.animate()</code></a> {{experimental_inline}}</dt> <dd>Une méthode raccourcie pour créer et exécuter une animation sur un élément. <span class="short_text" id="result_box" lang="fr"><span>Renvoie l'instance d'objet Animation créée.</span></span></dd> - <dt>{{domxref("Element.closest()")}}</dt> - <dd>Retourne l'{{domxref("Element")}} qui est l'ancêtre le plus proche de l'élément courant (ou l'élément courant lui-même) qui correspond aux sélecteurs donnés dans le paramètre.</dd> - <dt>{{domxref("Element.createShadowRoot()")}} {{experimental_inline}} {{deprecated_inline()}}</dt> - <dd>Crée un <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> sur l'élément, <span class="short_text" id="result_box" lang="fr"><span>le transforme en un hôte fantôme.</span> <span>Renvoie un </span></span> {{domxref("ShadowRoot")}}.</dd> - <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt> - <dd>Retourne une interface {{DOMxRef("StylePropertyMapReadOnly")}} fournissant une représentation en lecture seule d'un bloc de déclaration de règles CSS. Il s'agit d'une alternative à {{DOMxRef("CSSStyleDeclaration")}}.</dd> - <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/closest"><code>Element.closest()</code></a></dt> + <dd>Retourne l'<a href="/fr/docs/Web/API/Element"><code>Element</code></a> qui est l'ancêtre le plus proche de l'élément courant (ou l'élément courant lui-même) qui correspond aux sélecteurs donnés dans le paramètre.</dd> + <dt><a href="/fr/docs/Web/API/Element/createShadowRoot"><code>Element.createShadowRoot()</code></a> {{experimental_inline}} {{deprecated_inline()}}</dt> + <dd>Crée un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> sur l'élément, <span class="short_text" id="result_box" lang="fr"><span>le transforme en un hôte fantôme.</span> <span>Renvoie un </span></span> <a href="/fr/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/computedStyleMap"><code>Element.computedStyleMap()</code></a> {{Experimental_Inline}}</dt> + <dd>Retourne une interface <a href="/fr/docs/Web/API/StylePropertyMapReadOnly"><code>StylePropertyMapReadOnly</code></a> fournissant une représentation en lecture seule d'un bloc de déclaration de règles CSS. Il s'agit d'une alternative à <a href="/fr/docs/Web/API/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/EventTarget/dispatchEvent"><code>EventTarget.dispatchEvent()</code></a></dt> <dd>Répartit un évènement sur ce noeud dans le DOM et renvoie un {{jsxref("Boolean")}} qui indique qu'au-moins un gestionnaire ne l'a pas annulé.</dd> - <dt>{{domxref("Element.getAnimations()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getAnimations"><code>Element.getAnimations()</code></a> {{experimental_inline}}</dt> <dd>Renvoie un tableau d'objets Animation actuellement actifs sur l'élément.</dd> - <dt>{{domxref("Element.getAttribute()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getAttribute"><code>Element.getAttribute()</code></a></dt> <dd>Retrouve la valeur de l'attribut nommé depuis le noeud courant et le retourne comme un {{jsxref("Object")}}.</dd> - <dt>{{domxref("Element.getAttributeNames()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getAttributeNames"><code>Element.getAttributeNames()</code></a></dt> <dd>Retourne un tableau des noms d'attribut de l'élément courant.</dd> - <dt>{{domxref("Element.getAttributeNS()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getAttributeNS"><code>Element.getAttributeNS()</code></a></dt> <dd>Retrouve la valeur de l'attribut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{jsxref("Object")}}.</dd> - <dt>{{domxref("Element.getBoundingClientRect()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getBoundingClientRect"><code>Element.getBoundingClientRect()</code></a></dt> <dd>Retourne la taille d'un élément et ses positions relatives au "viewport".</dd> - <dt>{{domxref("Element.getClientRects()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getClientRects"><code>Element.getClientRects()</code></a></dt> <dd>Retourne une collection de rectangles qui indiquent les rectangles de délimitation pour chaque ligne de texte dans un client.</dd> - <dt>{{domxref("Element.getElementsByClassName()")}}</dt> - <dd>Retourne une {{domxref("HTMLCollection")}} qui contient tous les descendants de l'élément courant qui possèdent la liste des classes donnée dans le paramètre.</dd> - <dt>{{domxref("Element.getElementsByTagName()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getElementsByClassName"><code>Element.getElementsByClassName()</code></a></dt> + <dd>Retourne une <a href="/fr/docs/Web/API/HTMLCollection"><code>HTMLCollection</code></a> qui contient tous les descendants de l'élément courant qui possèdent la liste des classes donnée dans le paramètre.</dd> + <dt><a href="/fr/docs/Web/API/Element/getElementsByTagName"><code>Element.getElementsByTagName()</code></a></dt> <dd>Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de tag particulier, de l'élément en cours.</dd> - <dt>{{domxref("Element.getElementsByTagNameNS()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getElementsByTagNameNS"><code>Element.getElementsByTagNameNS()</code></a></dt> <dd>Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de balise particulier et d'un espace de nom, de l'élément en cours.</dd> - <dt>{{domxref("Element.hasAttribute()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/hasAttribute"><code>Element.hasAttribute()</code></a></dt> <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié ou non.</dd> - <dt>{{domxref("Element.hasAttributeNS()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/hasAttributeNS"><code>Element.hasAttributeNS()</code></a></dt> <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié, dans l'espace de noms spécifié, ou non.</dd> - <dt>{{domxref("Element.hasAttributes()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/hasAttributes"><code>Element.hasAttributes()</code></a></dt> <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un ou plusieurs attributs HTML présents.</dd> - <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt> - <dd>Indique si l'élément sur lequel la méthode est invoquée a une capture de pointeur pour le pointeur spécifié par son identifiant.</dd> - <dt>{{domxref("Element.insertAdjacentElement")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/hasPointerCapture"><code>Element.hasPointerCapture()</code></a></dt> + <dd>Indique si l'élément sur lequel la méthode est invoquée a une capture de pointeur pour le pointeur spécifié par son identifiant.</dd> + <dt><a href="/fr/docs/Web/API/Element/insertAdjacentElement"><code>Element.insertAdjacentElement</code></a></dt> <dd>Insère un noeud d'élément donné à la position donnée par rapport à l'élément sur lequel il a été invoqué.</dd> - <dt>{{domxref("Element.insertAdjacentHTML")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/insertAdjacentHTML"><code>Element.insertAdjacentHTML</code></a></dt> <dd>Analyse le texte au format HTML ou XML et insère les nœuds résultants dans l'arborescence dans la position indiquée.</dd> - <dt>{{domxref("Element.insertAdjacentText")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/insertAdjacentText"><code>Element.insertAdjacentText</code></a></dt> <dd>Insère un noeud de texte donné à la position donnée par rapport à l'élément qui l'invoque.</dd> - <dt>{{domxref("Element.matches()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/matches"><code>Element.matches()</code></a></dt> <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément serait sélectionné ou non par la chaîne de sélection spécifiée.</dd> - <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt> - <dd>Retourne un {{DOMxRef("CSSPseudoElement")}} représentant les pseudo-élément enfants correspondant au sélecteur de pseudo-élément fourni.</dd> - <dt>{{domxref("Element.querySelector()")}}</dt> - <dd>Retourne le premier {{domxref("Node")}} correspondant à la chaîne du sélecteur spécifiée par rapport à l'élément.</dd> - <dt>{{domxref("Element.querySelectorAll")}}</dt> - <dd>Retourne une {{domxref("NodeList")}} des noeuds qui correspondent à la chaîne du sélecteur par rapport à l'élément.</dd> - <dt>{{domxref("Element.releasePointerCapture")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/pseudo"><code>Element.pseudo()</code></a> {{Experimental_Inline}}</dt> + <dd>Retourne un <a href="/fr/docs/Web/API/CSSPseudoElement"><code>CSSPseudoElement</code></a> représentant les pseudo-élément enfants correspondant au sélecteur de pseudo-élément fourni.</dd> + <dt><a href="/fr/docs/Web/API/Element/querySelector"><code>Element.querySelector()</code></a></dt> + <dd>Retourne le premier <a href="/fr/docs/Web/API/Node"><code>Node</code></a> correspondant à la chaîne du sélecteur spécifiée par rapport à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/querySelectorAll"><code>Element.querySelectorAll</code></a></dt> + <dd>Retourne une <a href="/fr/docs/Web/API/NodeList"><code>NodeList</code></a> des noeuds qui correspondent à la chaîne du sélecteur par rapport à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/Element/releasePointerCapture"><code>Element.releasePointerCapture</code></a></dt> <dd>Relâche (arrête) la capture de pointeur précédemment définie pour un {{domxref("PointerEvent","évènement pointeur")}} spécifique.</dd> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/ChildNode/remove"><code>ChildNode.remove()</code></a> {{experimental_inline}}</dt> <dd>Supprime l'élément de la liste des enfants de son parent.</dd> - <dt>{{domxref("Element.removeAttribute()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/removeAttribute"><code>Element.removeAttribute()</code></a></dt> <dd>Supprime l'attribut nommé du noeud courant.</dd> - <dt>{{domxref("Element.removeAttributeNS()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/removeAttributeNS"><code>Element.removeAttributeNS()</code></a></dt> <dd>Supprime l'attribut avec le nom et l'espace de nom spécifiés du noeud actuel.</dd> - <dt>{{domxref("EventTarget.removeEventListener()")}}</dt> + <dt><a href="/fr/docs/Web/API/EventTarget/removeEventListener"><code>EventTarget.removeEventListener()</code></a></dt> <dd>Supprime un écouteur d'évènement de l'élément.</dd> - <dt>{{domxref("Element.requestFullscreen()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/requestFullScreen"><code>Element.requestFullscreen()</code></a> {{experimental_inline}}</dt> <dd>Demande de manière asynchrone au navigateur de mettre l'élément en plein écran.</dd> - <dt>{{domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/requestPointerLock"><code>Element.requestPointerLock()</code></a> {{experimental_inline}}</dt> <dd>Permet de demander de manière asynchrone que le pointeur soit verrouillé sur l'élément donné.</dd> - <dt>{{domxref("Element.scroll()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scroll"><code>Element.scroll()</code></a></dt> <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd> - <dt>{{domxref("Element.scrollBy()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollBy"><code>Element.scrollBy()</code></a></dt> <dd>Défile au sein d'un élément d'autant de pixels que demandé.</dd> - <dt>{{domxref("Element.scrollIntoView()")}} {{experimental_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollIntoView"><code>Element.scrollIntoView()</code></a> {{experimental_inline}}</dt> <dd>Fait défiler la page jusqu'à ce que l'élément entre dans la vue.</dd> - <dt>{{domxref("Element.scrollTo()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/scrollTo"><code>Element.scrollTo()</code></a></dt> <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd> - <dt>{{domxref("Element.setAttribute()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setAttribute"><code>Element.setAttribute()</code></a></dt> <dd>Définit la valeur d'un attribut nommé du nœud actuel.</dd> - <dt>{{domxref("Element.setAttributeNS()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setAttributeNS"><code>Element.setAttributeNS()</code></a></dt> <dd>Définit la valeur de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.</dd> - <dt>{{domxref("Element.setCapture()")}} {{non-standard_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setCapture"><code>Element.setCapture()</code></a> {{non-standard_inline}}</dt> <dd>Configure la capture d'évènements de souris, en redirigeant tous les évènements de la souris vers cet élément.</dd> - <dt>{{domxref("Element.setPointerCapture()")}}</dt> - <dd>Désigne un élément spécifique en tant que cible de capture des futurs <a href="https://developer.mozilla.org/fr/docs/Web/API/Pointer_events">évènements de pointeur</a>.</dd> - <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setPointerCapture"><code>Element.setPointerCapture()</code></a></dt> + <dd>Désigne un élément spécifique en tant que cible de capture des futurs <a href="/fr/docs/Web/API/Pointer_events">évènements de pointeur</a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/toggleAttribute"><code>Element.toggleAttribute()</code></a></dt> <dd>Alterne un attribut booléen sur l'élément spécifié, le supprimant s'il est présent et l'ajoutant s'il est absent.</dd> <dt> <h3 id="Méthodes_obsolètes"><span lang="fr"><span>Méthodes obsolètes</span></span></h3> </dt> - <dt>{{domxref("Element.getAttributeNode()")}}{{obsolete_inline}}</dt> - <dd>Retrouve la représentation du noeud de l'attribut nommé depuis le noeud courant et le retourne comme un {{domxref("Attr")}}.</dd> - <dt>{{domxref("Element.getAttributeNodeNS()")}}{{obsolete_inline}}</dt> - <dd>Retrouve la représentation du noeud de l'attibut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{domxref("Attr")}}.</dd> - <dt>{{domxref("Element.removeAttributeNode()")}} {{obsolete_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/getAttributeNode"><code>Element.getAttributeNode()</code></a>{{obsolete_inline}}</dt> + <dd>Retrouve la représentation du noeud de l'attribut nommé depuis le noeud courant et le retourne comme un <a href="/fr/docs/Web/API/Attr"><code>Attr</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/getAttributeNodeNS"><code>Element.getAttributeNodeNS()</code></a>{{obsolete_inline}}</dt> + <dd>Retrouve la représentation du noeud de l'attibut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un <a href="/fr/docs/Web/API/Attr"><code>Attr</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/removeAttributeNode"><code>Element.removeAttributeNode()</code></a> {{obsolete_inline}}</dt> <dd>Supprime la représentation du noeud de l'attibut nommé du noeud actuel.</dd> - <dt>{{domxref("Element.setAttributeNode()")}} {{obsolete_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setAttributeNode"><code>Element.setAttributeNode()</code></a> {{obsolete_inline}}</dt> <dd>Définit la représentation de noeud de l'attribut nommé à partir du noeud actuel.</dd> - <dt>{{domxref("Element.setAttributeNodeNS()")}} {{obsolete_inline}}</dt> + <dt><a href="/fr/docs/Web/API/Element/setAttributeNodeNS"><code>Element.setAttributeNodeNS()</code></a> {{obsolete_inline}}</dt> <dd>Synchronise la représentation du nœud de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.</dd> </dl> @@ -220,235 +221,146 @@ translation_of: Web/API/Element <p><span class="tlid-translation translation" lang="fr"><span title="">Ecoute ces évènements en utilisant</span></span> <code>addEventListener()</code> ou en assignant un <span class="tlid-translation translation" lang="fr"><span title="">écouteur d'évènement</span></span> (event listener) au <code>on<em>eventname</em></code> propriété de cette interface.</p> <dl> - <dt>{{domxref("Element/cancel_event", "cancel")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/cancel_event"><code>cancel</code></a></dt> <dd>Déclenche sur {{HTMLElement("dialog")}} lorsque l'utilisateur indique au navigateur qu'il souhaite fermer la boîte de dialogue en cours. Pour exemple, le navigateur peut déclencher cet évènement lorsque l'utilisateur appuie sur la touche <kbd>Esc</kbd> ou clique sur le bouton "Ferme le dialogue" <span class="tlid-translation translation" lang="fr"><span title="">qui fait partie de l'interface utilisateur du navigateur</span></span> .<br> - Aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncancel", "oncancel")}}.</dd> - <dt>{{domxref("Element/error_event", "error")}}</dt> + Aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/oncancel"><code>oncancel</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/error_event"><code>error</code></a></dt> <dd>Déclenché quand le chargement d'une ressource échoue, ou qu'elle ne peut pas être utilisée. Par exemple, il sera déclenché si un script contient une erreur d'exécution ou une image ne peut être trouvée ou est invalide.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onerror", "onerror")}}.</dd> - <dt>{{domxref("Element/scroll_event", "scroll")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onerror"><code>onerror</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/scroll_event"><code>scroll</code></a></dt> <dd>Déclenché quand la vue du document un élément a été défilé.<br> - Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}.</dd> - <dt>{{domxref("Element/select_event", "select")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onscroll"><code>onscroll</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/select_event"><code>select</code></a></dt> <dd>Déclenché quand une portion de texte a été sélectionnée.<br> - Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}}.</dd> - <dt>{{domxref("Element/show_event", "show")}}</dt> - <dd>Déclenché quand un évènement {{domxref("Element/contextmenu_event", "contextmenu")}} est lui-même déclenché et bouillonne jusqu'à un élément ayant un attribut <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/html/Global_attributes/contextmenu">contextmenu</a></code>. {{deprecated_inline}}<br> - Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}}.</dd> - <dt>{{domxref("Element/wheel_event","wheel")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onselect"><code>onselect</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/show_event"><code>show</code></a></dt> + <dd>Déclenché quand un évènement <a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a> est lui-même déclenché et bouillonne jusqu'à un élément ayant un attribut <code><a href="/fr/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code>. {{deprecated_inline}}<br> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onshow"><code>onshow</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/wheel_event"><code>wheel</code></a></dt> <dd>Déclenché quand l'utilisateur tourne une molette sur un appareil avec pointeur (typiquement, une souris).<br> - Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}.</dd> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onwheel"><code>onwheel</code></a>.</dd> <dt> <h3 id="Évènements_du_presse-papiers">Évènements du presse-papiers</h3> </dt> - <dt>{{domxref("Element/copy_event", "copy")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/copy_event"><code>copy</code></a></dt> <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de copie via l'interface utilisateur du navigateur.</span></span><br> - Aussi disponible via la propiété {{domxref("HTMLElement/oncopy", "oncopy")}}.</dd> - <dt>{{domxref("Element/cut_event", "cut")}}</dt> + Aussi disponible via la propiété <a href="/fr/docs/Web/API/HTMLElement/oncopy"><code>oncopy</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/cut_event"><code>cut</code></a></dt> <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de couper via l'interface utilisateur du navigateur.</span></span><br> - Aussi disponible via la propriété {{domxref("HTMLElement/oncut", "oncut")}}.</dd> - <dt>{{domxref("Element/paste_event", "paste")}}</dt> + Aussi disponible via la propriété <a href="/fr/docs/Web/API/HTMLElement/oncut"><code>oncut</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/paste_event"><code>paste</code></a></dt> <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de coller via l'interface utilisateur du navigateur.</span></span><br> - Aussi disponible via la propriété {{domxref("HTMLElement/onpaste", "onpaste")}}.</dd> + Aussi disponible via la propriété <a href="/fr/docs/Web/API/HTMLElement/onpaste"><code>onpaste</code></a>.</dd> <dt> <h3 id="Évènements_de_composition">Évènements de composition</h3> </dt> - <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/compositionend_event"><code>compositionend</code></a></dt> <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} complète ou annule la session actuelle de composition.</dd> - <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/compositionstart_event"><code>compositionstart</code></a></dt> <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} démarre une nouvelle session de composition.</dd> - <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/compositionupdate_event"><code>compositionupdate</code></a></dt> <dd>Déclenché quand un nouveau caractère est reçu dans le contexte d'une session de composition de texte contrôlée par un système de composition de texte tel qu'un {{glossary("input method editor")}}.</dd> <dt> <h3 id="Évènements_de_focale">Évènements de focale</h3> </dt> - <dt>{{domxref("Element/blur_event", "blur")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/blur_event"><code>blur</code></a></dt> <dd>Déclenché quand un élément a perdu la focale.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onblur", "onblur")}}.</dd> - <dt>{{domxref("Element/focus_event", "focus")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onblur"><code>onblur</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/focus_event"><code>focus</code></a></dt> <dd>Déclenché quand un élément a obtenu la focale.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}.</dd> - <dt>{{domxref("Element/focusin_event", "focusin")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onfocus"><code>onfocus</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/focusin_event"><code>focusin</code></a></dt> <dd>Déclenché quand un élément est sur le point d'obtenir la focale.</dd> - <dt>{{domxref("Element/focusout_event", "focusout")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/focusout_event"><code>focusout</code></a></dt> <dd>Déclenché quand un élément est sur le point de perdre la focale.</dd> <dt> <h3 id="Évènements_de_plein_écran">Évènements de plein écran</h3> </dt> - <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt> - <dd>Envoyé à un {{domxref("Element")}} quand il transite vers ou depuis un état de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br> - Il est aussi disponible via la propriété {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}.</dd> - <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt> - <dd>Envoyé à un <code>Element</code> si une erreur survient en tentant de passer vers ou de quitter le <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br> - Il est aussi disponible via la propriété {{domxref("Element.onfullscreenerror", "onfullscreenerror")}}.</dd> + <dt><a href="/fr/docs/Web/API/Element/fullscreenchange_event"><code>fullscreenchange</code></a></dt> + <dd>Envoyé à un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> quand il transite vers ou depuis un état de <a href="/fr/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/Element/onfullscreenchange"><code>onfullscreenchange</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/fullscreenerror_event"><code>fullscreenerror</code></a></dt> + <dd>Envoyé à un <code>Element</code> si une erreur survient en tentant de passer vers ou de quitter le <a href="/fr/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/Element/onfullscreenerror"><code>onfullscreenerror</code></a>.</dd> <dt> <h3 id="Évènements_de_clavier">Évènements de clavier</h3> </dt> - <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt> + <dt><code><a href="/fr/docs/Web/API/Element/keydown_event"><code>keydown</code></a></code></dt> <dd>Déclenché quand une touche est pressée.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}}.</dd> - <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeydown"><code>onkeydown</code></a>.</dd> + <dt><code><a href="/fr/docs/Web/API/Element/keypress_event"><code>keypress</code></a></code></dt> <dd>Déclenché quand une touche produit un caractère est pressée. {{deprecated_inline}}<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}}.</dd> - <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeypress"><code>onkeypress</code></a>.</dd> + <dt><code><a href="/fr/docs/Web/API/Element/keyup_event"><code>keyup</code></a></code></dt> <dd>Déclenché quand une touche est relâchée.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}}.</dd> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeyup"><code>onkeyup</code></a>.</dd> <dt> <h3 id="Évènements_de_souris">Évènements de souris</h3> </dt> - <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/auxclick_event"><code>auxclick</code></a></dt> <dd>Déclenché quand un bouton secondaire d'un appareil de pointage (par exemple, tout bouton d'une souris autre que le gauche) est pressé et relâché sur le même élément.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}}.</dd> - <dt>{{domxref("Element/click_event", "click")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onauxclick"><code>onauxclick</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></dt> <dd>Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est pressé et relâché sur le même élément.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onclick", "onclick")}}.</dd> - <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onclick"><code>onclick</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></dt> <dd>Déclenché quand l'utilisateur tente d'ouvrir un menu contextuel.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}}.</dd> - <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/oncontextmenu"><code>oncontextmenu</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></dt> <dd>Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est cliqué deux fois sur le même élément.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}}.</dd> - <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ondblclick"><code>ondblclick</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/DOMActivate_event"><code>DOMActivate</code></a> {{Deprecated_Inline}}</dt> <dd>Déclenché quand un élément est activé, par exemple, par le biais d'un clic de souris ou d'une pression de touche sur un clavier.</dd> - <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></dt> <dd>Déclenché quand un bouton d'un appareil de pointage est pressé sur un élément.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}}.</dd> - <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmousedown"><code>onmousedown</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></dt> <dd>Déclenché quand un appareil de pointage (généralement une souris) est déplacé à l'intérieur de l'élément sur lequel l'écouteur est attaché.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}}.</dd> - <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseenter"><code>onmouseenter</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></dt> <dd>Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}}.</dd> - <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseleave"><code>onmouseleave</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></dt> <dd>Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}}.</dd> - <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmousemove"><code>onmousemove</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></dt> <dd>Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}}.</dd> - <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseout"><code>onmouseout</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></dt> <dd>Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}}.</dd> - <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseover"><code>onmouseover</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></dt> <dd>Déclenché quand un bouton d'un appareil de pointage est relâché sur un élément.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}}.</dd> - <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseup"><code>onmouseup</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcechanged_event"><code>webkitmouseforcechanged</code></a></dt> <dd>Déclenché à chaque fois que le niveau de pression sur un écran tactile change.</dd> - <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcedown_event"><code>webkitmouseforcedown</code></a></dt> <dd>Déclenché après l'évènement de pression de bouton d'un appareil de pointage à la condition qu'une pression suffisante ait été produite pour la qualifier de "clic forcé".</dd> - <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt> - <dd>Déclenché avant l'évènement {{domxref("Element/mousedown_event", "mousedown")}}.</dd> - <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt> - <dd>Déclenché après l'évènement {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} à la condition qu'une pression suffisamment en baisse ait été observée pour mettre fin au "clic forcé".</dd> + <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcewillbegin_event"><code>webkitmouseforcewillbegin</code></a></dt> + <dd>Déclenché avant l'évènement <a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/webkitmouseforceup_event"><code>webkitmouseforceup</code></a></dt> + <dd>Déclenché après l'évènement <a href="/fr/docs/Web/API/Element/webkitmouseforcedown_event"><code>webkitmouseforcedown</code></a> à la condition qu'une pression suffisamment en baisse ait été observée pour mettre fin au "clic forcé".</dd> <dt> <h3 id="Évènements_de_toucher">Évènements de toucher</h3> </dt> - <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt> + <dt><a href="/fr/docs/Web/API/Element/touchcancel_event"><code>touchcancel</code></a></dt> <dd>Déclenché quand un ou plusieurs points de toucher ont été altérés d'une manière relative à l'implantation (par exemple, trop de points de contacts ont été créés).<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}}.</dd> - <dt>{{domxref("Element/touchend_event", "touchend")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchcancel"><code>ontouchcancel</code></a>.</dd> + <dt><a href="/fr/docs/Web/API/Element/touchend_event"><code>touchend</code></a></dt> <dd>Déclenché quand un ou plusieurs points de toucher sont retirés de la surface tactile.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}}</dd> - <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchend"><code>ontouchend</code></a></dd> + <dt><a href="/fr/docs/Web/API/Element/touchmove_event"><code>touchmove</code></a></dt> <dd>Déclenché quand un ou plusieurs points de toucher sont déplacés sur la surface tactile.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}}</dd> - <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchmove"><code>ontouchmove</code></a></dd> + <dt><a href="/fr/docs/Web/API/Element/touchstart_event"><code>touchstart</code></a></dt> <dd>Déclenché quand un plusieurs points de toucher sont placés sur la surface tactile.<br> - Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}}.</dd> + Il est aussi disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchstart"><code>ontouchstart</code></a>.</dd> </dl> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="specifications">Spécifications</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Web Animations", '', '')}}</td> - <td>{{Spec2("Web Animations")}}</td> - <td>Ajoute la méthode <code>getAnimations()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Undo Manager', '', 'Element')}}</td> - <td>{{Spec2('Undo Manager')}}</td> - <td>Ajoute les propriétés <code>undoScope</code> et <code>undoManager</code>.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Events 2')}}</td> - <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et<code>onlostpointercapture</code>.<br> - Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Events')}}</td> - <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et <code>onlostpointercapture</code>.<br> - Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td>Ajoute les méthodes suivantes : <code>querySelector()</code> et <code>querySelectorAll()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td> - <td>{{Spec2('Pointer Lock')}}</td> - <td>Ajoute la méthode<code>requestPointerLock()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td> - <td>{{Spec2('Fullscreen')}}</td> - <td>Ajoute la méthode <code>requestFullscreen().</code></td> - </tr> - <tr> - <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('DOM Parsing')}}</td> - <td>Ajoute les propriétés suivantes : <code>innerHTML</code> et <code>outerHTML</code>.<br> - Ajoute les méthodes suivantes : <code>insertAdjacentHTML()</code>.</td> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Ajoute les propriétés suivantes : <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code> et <code>clientHeight</code>.<br> - Ajoute les méthodes suivantes : <code>getClientRects()</code>, <code>getBoundingClientRect()</code> et <code>scrollIntoView()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Ajoute l'héritage de l'interface {{domxref("ElementTraversal")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Supprime les méthodes suivantes : <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, et <code>setIdAttributeNode()</code>.<br> - Supprime la propriété <code>schemaTypeInfo</code>.<br> - Modifie la valeur retournée de <code>getElementsByTag()</code> et <code>getElementsByTagNS()</code>.<br> - Déplace <code>hasAttributes()</code> de l'interface <code>Node</code> ici.<br> - Insère<code>insertAdjacentElement()</code> et <code>insertAdjacentText()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Ajoute les méthodes suivantes : <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code> et <code>setIdAttributeNode()</code>. Ces méthodes n'ont jamais été implémentées et ont été supprimées dans des spécifications ultérieures.<br> - Ajoute la propriété <code>schemaTypeInfo</code>. Cette propriété n'a jamais été implémentée et a été supprimée dans des spécificationq ultérieures.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>La méthode <code>normalize()</code> a été déplacée vers {{domxref("Node")}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("api.Element")}}</p> +<p>{{Compat}}</p> diff --git a/files/fr/web/api/eventtarget/index.html b/files/fr/web/api/eventtarget/index.html index 1532d2fce7..99ea213416 100644 --- a/files/fr/web/api/eventtarget/index.html +++ b/files/fr/web/api/eventtarget/index.html @@ -9,6 +9,7 @@ tags: - EventTarget - Interface - Événements DOM +browser-compat: api.EventTarget translation_of: Web/API/EventTarget --- <nav>{{ApiRef("DOM Events")}}</nav> @@ -17,7 +18,7 @@ translation_of: Web/API/EventTarget <p>{{domxref ("Element")}}, {{domxref ("Document")}} et {{domxref ("Window")}} sont les cibles d'événements les plus fréquentes, mais d'autres objets peuvent également être des cibles d'événements. Par exemple {{domxref ("XMLHttpRequest")}}, {{domxref ("AudioNode")}}, {{domxref ("AudioContext")}} et autres.</p> -<p>De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Event_handlers">gestionnaires d'événements</a> via les propriétés et attributs <code>onevent</code>.</p> +<p>De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de <a href="/fr/docs/Web/Guide/DOM/Events/Event_handlers">gestionnaires d'événements</a> via les propriétés et attributs <code>onevent</code>.</p> <p>{{InheritanceDiagram}}</p> @@ -43,7 +44,7 @@ translation_of: Web/API/EventTarget <p>Mozilla inclut quelques extensions à utiliser par les cibles d'événements implémentées par JS pour implémenter les propriétés <code>onevent</code>.</p> -<p>Voir aussi <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings">liaisons WebIDL</a>.</p> +<p>Voir aussi <a href="/fr/docs/Mozilla/WebIDL_bindings">liaisons WebIDL</a>.</p> <ul> <li><code>void <strong>setEventHandler</strong>(DOMString <var>type</var>, EventHandler <var>handler</var>)</code> {{non-standard_inline}}</li> @@ -92,43 +93,18 @@ EventTarget.prototype.dispatchEvent = function (event) { } </pre> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Pas de changement.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - <td>Quelques paramètres sont désormais optionnels (<code>listener</code>), ou acceptent la valeur nulle (<code>useCapture</code>).</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM2 Events')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.EventTarget")}}</p> +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatiblité des navigateurs</h2> + +<p>{{Compat}}</p> <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Reference/Events">Référence d'événement</a> - les événements disponibles sur la plateforme.</li> - <li> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events">Guide du développeur d'événements</a></li> + <li><a href="/fr/docs/Web/Reference/Events">Référence d'événement</a> - les événements disponibles sur la plateforme.</li> + <li><a href="/fr/docs/Web/Guide/DOM/Events">Guide du développeur d'événements</a></li> <li>{{domxref("Event")}} interface</li> </ul> diff --git a/files/fr/web/api/formdata/has/index.html b/files/fr/web/api/formdata/has/index.html index 82ad7bb947..0074201183 100644 --- a/files/fr/web/api/formdata/has/index.html +++ b/files/fr/web/api/formdata/has/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/FormData/has <p>La méthode <code><strong>has()</strong></code> de l'interface {{domxref("FormData")}} renvoie un booléen indiquant si un objet <code>FormData</code> contient une certaine clé.</p> <div class="note"> -<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -74,7 +74,7 @@ formData.has('username'); // Retourne true <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="En/Using XMLHttpRequest">Utilisation de XMLHttpRequest</a></li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utilisation des objects FormData </a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="En/Using XMLHttpRequest">Utilisation de XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utilisation des objects FormData </a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/formdata/keys/index.html b/files/fr/web/api/formdata/keys/index.html index 2aa0122f78..b6b9ad2acf 100644 --- a/files/fr/web/api/formdata/keys/index.html +++ b/files/fr/web/api/formdata/keys/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/FormData/keys <p>La méthode <code>FormData.keys()</code> renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des objets {{domxref("USVString")}}.</p> <div class="note"> -<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -73,7 +73,7 @@ cle2</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/notification/actions/index.html b/files/fr/web/api/notification/actions/index.html index 64c0650649..3f484723f7 100644 --- a/files/fr/web/api/notification/actions/index.html +++ b/files/fr/web/api/notification/actions/index.html @@ -51,6 +51,6 @@ translation_of: Web/API/Notification/actions <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> <li>{{DOMxRef("Notification.maxActions")}}</li> </ul> diff --git a/files/fr/web/api/notification/body/index.html b/files/fr/web/api/notification/body/index.html index fd6bdbbcbb..d89bd55769 100644 --- a/files/fr/web/api/notification/body/index.html +++ b/files/fr/web/api/notification/body/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/body <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/close/index.html b/files/fr/web/api/notification/close/index.html index d8d7671766..37f7f929b6 100644 --- a/files/fr/web/api/notification/close/index.html +++ b/files/fr/web/api/notification/close/index.html @@ -76,5 +76,5 @@ translation_of: Web/API/Notification/close <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/data/index.html b/files/fr/web/api/notification/data/index.html index 1abb8eb28e..e6e29516f2 100644 --- a/files/fr/web/api/notification/data/index.html +++ b/files/fr/web/api/notification/data/index.html @@ -50,5 +50,5 @@ translation_of: Web/API/Notification/data <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/dir/index.html b/files/fr/web/api/notification/dir/index.html index 612152ed86..6e694e6d14 100644 --- a/files/fr/web/api/notification/dir/index.html +++ b/files/fr/web/api/notification/dir/index.html @@ -58,5 +58,5 @@ translation_of: Web/API/Notification/dir <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/icon/index.html b/files/fr/web/api/notification/icon/index.html index 441ed4c989..19eac0702c 100644 --- a/files/fr/web/api/notification/icon/index.html +++ b/files/fr/web/api/notification/icon/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/icon <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/image/index.html b/files/fr/web/api/notification/image/index.html index bd84cc0b1d..0ad86d51a3 100644 --- a/files/fr/web/api/notification/image/index.html +++ b/files/fr/web/api/notification/image/index.html @@ -47,5 +47,5 @@ translation_of: Web/API/Notification/image <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/index.html b/files/fr/web/api/notification/index.html index 78de3344d7..207ba16762 100644 --- a/files/fr/web/api/notification/index.html +++ b/files/fr/web/api/notification/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Notification --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">L'interface Notification de l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API">API Notifications</a> est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.</span></p> +<p><span class="seoSummary">L'interface Notification de l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a> est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.</span></p> <h2 id="Constructeur">Constructeur</h2> @@ -101,7 +101,7 @@ translation_of: Web/API/Notification <h3 id="Méthodes_dinstance">Méthodes d'instance</h3> -<p><em>Ces propriétés ne sont disponibles que sur une instance de l'objet </em><code>Notification</code><em> ou via son </em><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a><em>. L'objet </em><code>Notification</code><em> hérite également de l'interface {{domxref ("EventTarget")}}.</em></p> +<p><em>Ces propriétés ne sont disponibles que sur une instance de l'objet </em><code>Notification</code><em> ou via son </em><a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a><em>. L'objet </em><code>Notification</code><em> hérite également de l'interface {{domxref ("EventTarget")}}.</em></p> <dl> <dt>{{domxref("Notification.close()")}}</dt> @@ -173,5 +173,5 @@ translation_of: Web/API/Notification <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/lang/index.html b/files/fr/web/api/notification/lang/index.html index 4dfdac7556..91134377e5 100644 --- a/files/fr/web/api/notification/lang/index.html +++ b/files/fr/web/api/notification/lang/index.html @@ -49,5 +49,5 @@ translation_of: Web/API/Notification/lang <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/maxactions/index.html b/files/fr/web/api/notification/maxactions/index.html index e83daddaf0..f780fc27a1 100644 --- a/files/fr/web/api/notification/maxactions/index.html +++ b/files/fr/web/api/notification/maxactions/index.html @@ -58,6 +58,6 @@ console.log(`This device can display at most ${maxActions} actions on each notif <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> <li>{{domxref("Notification.actions")}}</li> </ul> diff --git a/files/fr/web/api/notification/notification/index.html b/files/fr/web/api/notification/notification/index.html index 6da9861c9c..48578eb688 100644 --- a/files/fr/web/api/notification/notification/index.html +++ b/files/fr/web/api/notification/notification/index.html @@ -8,15 +8,16 @@ tags: - Notification - Notifications - Reference +browser-compat: api.Notification.Notification translation_of: Web/API/Notification/Notification --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">Le constructeur <strong><code>Notification()</code></strong> crée une nouvelle instance d'objet {{domxref ("Notification")}}, qui représente une notification utilisateur.</span></p> +<p>Le constructeur <strong><code>Notification()</code></strong> crée une nouvelle instance d'objet <a href="/fr/docs/Web/API/notification"><code>Notification</code></a>, qui représente une notification utilisateur.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const <var>myNotification</var> = new Notification(<var>title</var>, <var>options</var>)</pre> +<pre class="brush: js syntaxbox">const <var>myNotification</var> = new Notification(<var>title</var>, <var>options</var>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -27,18 +28,18 @@ translation_of: Web/API/Notification/Notification <dd>Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont: <ul> <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li> - <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li> - <li><code>badge</code>: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</li> - <li><code>body</code>: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.</li> - <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.</li> - <li><code>icon</code>: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.</li> - <li><code>image</code>: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.</li> + <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant une <a href="https://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="https://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li> + <li><code>badge</code>: Un <a href="/fr/docs/Web/API/USVString"><code>USVString</code></a> contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</li> + <li><code>body</code>: Un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le corps du texte de la notification, qui est affiché sous le titre.</li> + <li><code>tag</code>: Un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant un tag d'identification pour la notification.</li> + <li><code>icon</code>: Une <a href="/fr/docs/Web/API/USVString"><code>USVString</code></a> contenant l'URL d'une icône à afficher dans la notification.</li> + <li><code>image</code>: Une <a href="/fr/docs/Web/API/USVString"><code>USVString</code></a> contenant l'URL d'une image à afficher dans la notification.</li> <li><code>data</code>: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.</li> - <li><code>vibrate</code>: Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification.</li> - <li><code>renotify</code>: Un {{domxref ("Boolean")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li> - <li><code>requireInteraction</code>: Un {{domxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li> - <li><code>actions</code>: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur.</li> - <li><code>silent</code>: Un {{domxref ("Boolean")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li> + <li><code>vibrate</code>: Un <a href="/fr/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification.</li> + <li><code>renotify</code>: Un <a href="/fr/docs/Web/API/Boolean"><code>Boolean</code></a> spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li> + <li><code>requireInteraction</code>: Un <a href="/fr/docs/Web/API/Boolean"><code>Boolean</code></a> indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li> + <li><code>actions</code>: Un tableau de <a href="/fr/docs/Web/API/NotificationAction"><code>NotificationAction</code></a> représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur.</li> + <li><code>silent</code>: Un <a href="/fr/docs/Web/API/Boolean"><code>Boolean</code></a> spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li> </ul> </dd> </dl> @@ -47,42 +48,27 @@ translation_of: Web/API/Notification/Notification <p>Dans notre <a href="https://chrisdavidmills.github.io/emogotchi/">démo Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">voir le code source</a>), nous exécutons une fonction <code>spawnNotification()</code> lorsque nous voulons déclencher une notification. La fonction reçoit des paramètres pour spécifier le corps, l'icône et le titre souhaités, puis elle crée l'objet <code>options</code> nécessaire et déclenche la notification à l'aide du constructeur <code>Notification()</code>.</p> -<pre class="brush: js notranslate">function spawnNotification(theBody, theIcon, theTitle) { - const options = { - body: theBody, - icon: theIcon - } - const n = new Notification(theTitle, options) +<pre class="brush: js notranslate">function spawnNotification(body, icon, title) { + const options = { + body: body, + icon: icon + }; + const n = new Notification(title, options); }</pre> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Web Notifications","#dom-notification-notification","Notification() constructor")}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Notification.Notification")}}</p> +<h2 id="specifications">Spécifications</h2> + +{{Specifications}} + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> <h3 id="Notes_Chrome">Notes Chrome</h3> <p>À partir de Chrome 49, les notifications ne fonctionnent pas en mode navigation privée.</p> -<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> +<p>Chrome pour Android lance une erreur <code>TypeError</code> lors de l'appel du constructeur <code>Notification</code>. Il ne prend en charge que la création de notifications à partir d'un service worker. Consultez le <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=481856">Chromium issue tracker</a> pour plus de détails.</p> <h3 id="Notes_Internet_Explorer">Notes Internet Explorer</h3> @@ -92,5 +78,5 @@ translation_of: Web/API/Notification/Notification <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/onclose/index.html b/files/fr/web/api/notification/onclose/index.html index b204c7075d..5d5edbde16 100644 --- a/files/fr/web/api/notification/onclose/index.html +++ b/files/fr/web/api/notification/onclose/index.html @@ -29,5 +29,5 @@ Notification.onclose = (event) => { ... } <ul> <li>{{domxref("Notification")}}</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/onerror/index.html b/files/fr/web/api/notification/onerror/index.html index 8475f85cc4..476e5cb9d7 100644 --- a/files/fr/web/api/notification/onerror/index.html +++ b/files/fr/web/api/notification/onerror/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/onerror <ul> <li>{{domxref("Notification")}}</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/onshow/index.html b/files/fr/web/api/notification/onshow/index.html index 9701a3fc04..bdb0953b6f 100644 --- a/files/fr/web/api/notification/onshow/index.html +++ b/files/fr/web/api/notification/onshow/index.html @@ -29,5 +29,5 @@ translation_of: Web/API/Notification/onshow <ul> <li>{{domxref("Notification")}}</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/renotify/index.html b/files/fr/web/api/notification/renotify/index.html index 0b8389761e..a79c385380 100644 --- a/files/fr/web/api/notification/renotify/index.html +++ b/files/fr/web/api/notification/renotify/index.html @@ -52,5 +52,5 @@ translation_of: Web/API/Notification/renotify <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/requestpermission/index.html b/files/fr/web/api/notification/requestpermission/index.html index 37a781ea03..b5b1222762 100644 --- a/files/fr/web/api/notification/requestpermission/index.html +++ b/files/fr/web/api/notification/requestpermission/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Notification/requestPermission </div> <div class="blockIndicator note"> -<p><strong>Note</strong>: Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a> pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.</p> +<p><strong>Note</strong>: Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez <a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a> pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.</p> </div> <p><span class="seoSummary">La méthode <strong><code>requestPermission()</code></strong> de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.</span></p> @@ -115,5 +115,5 @@ translation_of: Web/API/Notification/requestPermission <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/requireinteraction/index.html b/files/fr/web/api/notification/requireinteraction/index.html index df26718bb8..d598a97269 100644 --- a/files/fr/web/api/notification/requireinteraction/index.html +++ b/files/fr/web/api/notification/requireinteraction/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/requireInteraction <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/silent/index.html b/files/fr/web/api/notification/silent/index.html index bfd9a16b50..5452c77398 100644 --- a/files/fr/web/api/notification/silent/index.html +++ b/files/fr/web/api/notification/silent/index.html @@ -50,5 +50,5 @@ translation_of: Web/API/Notification/silent <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/tag/index.html b/files/fr/web/api/notification/tag/index.html index 38a7683588..7794c70e61 100644 --- a/files/fr/web/api/notification/tag/index.html +++ b/files/fr/web/api/notification/tag/index.html @@ -51,5 +51,5 @@ translation_of: Web/API/Notification/tag <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/timestamp/index.html b/files/fr/web/api/notification/timestamp/index.html index 28625dfc53..ca54bf330c 100644 --- a/files/fr/web/api/notification/timestamp/index.html +++ b/files/fr/web/api/notification/timestamp/index.html @@ -50,5 +50,5 @@ translation_of: Web/API/Notification/timestamp <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/title/index.html b/files/fr/web/api/notification/title/index.html index 7b046666cf..40edbb0790 100644 --- a/files/fr/web/api/notification/title/index.html +++ b/files/fr/web/api/notification/title/index.html @@ -48,5 +48,5 @@ translation_of: Web/API/Notification/title <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notification/vibrate/index.html b/files/fr/web/api/notification/vibrate/index.html index cd3527b56d..f9945d7c8a 100644 --- a/files/fr/web/api/notification/vibrate/index.html +++ b/files/fr/web/api/notification/vibrate/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Notification/vibrate <h3 id="Return_Value" name="Return_Value">Valeur</h3> -<p>Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a>, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.</p> +<p>Un <a href="/fr/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a>, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.</p> <h2 id="Spécifications">Spécifications</h2> @@ -50,5 +50,5 @@ translation_of: Web/API/Notification/vibrate <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/notifications_api/index.html b/files/fr/web/api/notifications_api/index.html index f0b8fdfd0b..1a5dc8eb8e 100644 --- a/files/fr/web/api/notifications_api/index.html +++ b/files/fr/web/api/notifications_api/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Notifications_API <p>Cela créera une boîte de dialogue, proche de cette apparence:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/17008/Screen_Shot_2019-12-11_at_9.59.14_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 183px; margin: 0px auto; width: 643px;"></p> +<p><img alt="" src="screen_shot_2019-12-11_at_9.59.14_am.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> <p>De là, l'utilisateur peut choisir d'autoriser les notifications de cette origine ou de les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.</p> @@ -37,10 +37,10 @@ translation_of: Web/API/Notifications_API <p>Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc.</p> -<p>En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a>, pour permettre aux service worker de déclencher des notifications.</p> +<p>En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'<a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a>, pour permettre aux service worker de déclencher des notifications.</p> <div class="note"> -<p><strong>Note</strong>: Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a>.</p> +<p><strong>Note</strong>: Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez <a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a>.</p> </div> <h2 id="Les_interfaces_de_Notifications">Les interfaces de Notifications</h2> @@ -87,5 +87,5 @@ translation_of: Web/API/Notifications_API <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> + <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li> </ul> diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.html b/files/fr/web/api/serviceworkerregistration/shownotification/index.html index 9568f1894c..d65ab4a999 100644 --- a/files/fr/web/api/serviceworkerregistration/shownotification/index.html +++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.html @@ -17,12 +17,12 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification <p><span class="seoSummary">La méthode <strong><code>showNotification()</code></strong> de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.</span></p> <div class="note"> -<p><strong>Note</strong>: Cette fonctionnalité est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note</strong>: Cette fonctionnalité est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>serviceWorkerRegistration</em>.showNotification(<em>title</em>, [<em>options</em>])</pre> +<pre class="syntaxbox"><em>serviceWorkerRegistration</em>.showNotification(<em>title</em>, [<em>options</em>])</pre> <h3 id="Paramètres">Paramètres</h3> @@ -34,7 +34,7 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification <ul> <li><code>actions</code>: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes: <ul> - <li>action: Une {{domxref("DOMString")}} représentant <span class="tlid-translation translation" lang="fr"><span title="">une action utilisateur à afficher sur la notification</span></span>.</li> + <li>action: Une {{domxref("DOMString")}} représentant une action utilisateur à afficher sur la notification.</li> <li>title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur.</li> <li>icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action.</li> </ul> @@ -45,13 +45,13 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li> <li><code>icon</code>: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.</li> <li><code>image</code>: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.</li> - <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li> + <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="https://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li> <li><code>renotify</code>: Un {{domxref ("Boolean", "Booléen")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li> <li><code>requireInteraction</code>: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li> <li><code>silent</code>: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li> <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.</li> <li><code>timestamp</code>: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer.</li> - <li><code>vibrate</code>: Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, [300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms.</li> + <li><code>vibrate</code>: Un <a href="/fr/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, [300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms.</li> </ul> </dd> </dl> @@ -62,7 +62,7 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">navigator.serviceWorker.register('sw.js') +<pre class="brush: js">navigator.serviceWorker.register('sw.js') function showNotification() { Notification.requestPermission((result) => { |