diff options
Diffstat (limited to 'files/fr/web/api/document')
109 files changed, 11001 insertions, 0 deletions
diff --git a/files/fr/web/api/document/activeelement/index.html b/files/fr/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..9c165337e8 --- /dev/null +++ b/files/fr/web/api/document/activeelement/index.html @@ -0,0 +1,24 @@ +--- +title: document.activeElement +slug: Web/API/Document/activeElement +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/DocumentOrShadowRoot/activeElement +--- +<p>{{ ApiRef() }}</p> +<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<p>Renvoie l'élément qui dispose actuellement du focus.</p> +<p>{{ Note("Cet attribut fait partie de la spécification HTML 5 encore en développement.") }}</p> +<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<pre class="eval">var elemCourant = document.activeElement; +</pre> +<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management</a> (brouillon de travail HTML 5)</li> +</ul> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "ja": "ja/DOM/document.activeElement", "pl": "pl/DOM/document.activeElement" } ) }}</p> diff --git a/files/fr/web/api/document/adoptnode/index.html b/files/fr/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..959e060387 --- /dev/null +++ b/files/fr/web/api/document/adoptnode/index.html @@ -0,0 +1,68 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +tags: + - API + - DOM + - Document + - Méthodes + - Noeuds + - Propriétaire +translation_of: Web/API/Document/adoptNode +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p><span id="result_box" lang="fr"><span>Adopte un noeud.</span> <span>Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son </span></span> <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> <span lang="fr"><span> (<em>document propriétaire</em>) est remplacé par le document en cours.</span> <span>Le noeud peut ensuite être inséré dans le document en cours.</span></span></p> + +<p><strong>Pris en charge depuis Gecko 1.9 (Firefox 3)</strong></p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre><var>node</var> = <em>document</em>.adoptNode(<var>externalNode</var>); +</pre> + +<dl> + <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>node</code></dt> + <dd>est le noeud adopté qui a maintenant ce document en tant que son <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> (<em>document propriétaire</em>). Le <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a> du noeud est <code>null</code>, car il n'a pas encore été inséré dans l'arborescence du document. Notez que <code>node</code> et <code>externalNode</code> sont le même objet après cet appel.<span style="display: none;"> </span><span style="display: none;"> </span></dd> + <dt><code>externalNode</code></dt> + <dd>est le noeud à adopter existant dans un autre document.</dd> +</dl> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush: js">var iframe = document.getElementById('my-iframe'); +var iframeImages = iframe.contentDocument.getElementsByTagName('img'); + +var newParent = document.getElementByTagName('images'); + +for (var i = 0; i < iframeImages.length; i++) { + newParent.appendChild(document.adoptNode(iframeImages[i])); +} +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>En général l'appel de <code>adoptNode</code> peut échouer en raison du nœud source provenant d'une implémentation différente, mais cela ne devrait pas poser de problème avec les implémentations du navigateur.</p> + +<p></p><p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> (ou adoptés avec + <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son ownerDocument (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a>) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes + de <a href="/fr/docs/Web/API/Node/ownerDocument" title="La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud."><code>Node.ownerDocument</code></a>, consultez la <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p> + + <p>Gecko n'obligeait pas à utiliser <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son ownerDocument (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9 + alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception + <code>WRONG_DOCUMENT_ERR</code> est déclenchée (<code>NS_ERROR_DOM_WRONG_DOCUMENT_ERR</code>). implémentation dans le <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener" title="FIXED: WRONG_DOCUMENT_ERR not being thrown">bug 47903</a>.</p><p></p> + + +<h2 id="Specification" name="Specification">Spécification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/DOM/document.importNode">document.importNode</a></li> +</ul> diff --git a/files/fr/web/api/document/alinkcolor/index.html b/files/fr/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..81ca413e65 --- /dev/null +++ b/files/fr/web/api/document/alinkcolor/index.html @@ -0,0 +1,38 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - API + - HTML DOM + - Obsolete + - Propriété + - Reference +translation_of: Web/API/Document/alinkColor +--- +<div>{{APIRef("DOM")}}{{Deprecated_header}}</div> + +<p>Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements <code>mousedown</code> et <code>mouseup</code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <var>color</var> = <var>document</var>.alinkColor; +<var>document</var>.alinkColor = <var>color</var>; +</pre> + +<p><var>color</var> est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., <code>blue</code> pour bleu, <code>darkblue</code> pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, <code>#0000FF</code>)</p> + +<h2 id="Notes">Notes</h2> + +<p>La valeur par défaut pour cette propriété est rouge (<code>#ee000</code> en hexadécimal) sur Mozilla Firefox.</p> + +<p><code>document.alinkColor</code> est obsolète dans <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a> (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}.</p> + +<p>Une autre alternative est <code>document.body.aLink</code>, même si elle est <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">obsolète dans HTML 4.01</a> (lien en anglais) en faveur de l'alternative CSS ci-dessus.</p> + +<p><a href="/fr/docs/Mozilla/Gecko">Gecko </a>supporte <code>alinkColor</code>/<code>:active</code> et {{Cssxref(":focus")}}. Internet Explorer 6 et 7 supportent <code>alinkColor</code>/<code>:active</code> seulement pour la <a href="/fr/docs/Web/HTML/Element/a">balise HTML des liens (<a>)</a> et le comportement est le même que <code>:focus</code> sur Gecko. Il n'y a pas de support pour <code>:focus</code> sur IE.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité sur cette page est généré depuis des données structurées. Si vous voulez contribuer à améliorer ces données, merci de vérifier la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une requête de mise à jour. Lien en anglais en revanche.</div> + +<p>{{Compat("api.Document.alinkColor")}}</p> diff --git a/files/fr/web/api/document/applets/index.html b/files/fr/web/api/document/applets/index.html new file mode 100644 index 0000000000..dfbb22d9b7 --- /dev/null +++ b/files/fr/web/api/document/applets/index.html @@ -0,0 +1,17 @@ +--- +title: Document.applets +slug: Web/API/Document/applets +translation_of: Web/API/Document/applets +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Résumé</h3> +<p><code>applets</code> retourne une liste ordonnée des applets contenus dans un document.</p> +<h3 id="Syntax" name="Syntax">Syntaxe</h3> +<pre class="eval"><em>nodeList</em> = document.applets +</pre> +<h3 id="Example" name="Example">Exemple</h3> +<pre class="eval">// ( Si vous savez que le second applet est celui que vous voulez ) +my_java_app = document.applets[1]; +</pre> +<h3 id="Specification" name="Specification">Spécification</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM Level 2 HTML: applets</a></p> diff --git a/files/fr/web/api/document/bgcolor/index.html b/files/fr/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..b379774259 --- /dev/null +++ b/files/fr/web/api/document/bgcolor/index.html @@ -0,0 +1,35 @@ +--- +title: Document.bgColor +slug: Web/API/Document/bgColor +translation_of: Web/API/Document/bgColor +--- +<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p> + +<p>La propriété obsolète <code>bgColor</code> renvoie ou déinit la couleur de fond (background-color) du document courant.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>color</em> = document.bgColor +document.bgColor =<em>color</em> +</pre> + +<h3 id="Parametres">Parametres</h3> + +<ul> + <li><code>color</code> est une chaîne de caractères représentant la couleur comme un mot (e.g., "red") ou une valeur hexadécimale (e.g., "<code>#ff0000</code>").</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<pre class="eval">document.bgColor = "darkblue"; +</pre> + +<h2 id="Notes">Notes</h2> + +<p>La valeur par défaut pour cette propriété sur Firefox est le blanc (<code>#ffffff</code> en hexadécimal).</p> + +<p><code>document.bgColor</code> est obsolète dans le <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Niveau 2 HTML</a>. L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec <code>document.body.style.backgroundColor</code>. Une autre alternative est <code>document.body.bgColor</code>, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Document.bgColor")}}</p> diff --git a/files/fr/web/api/document/body/index.html b/files/fr/web/api/document/body/index.html new file mode 100644 index 0000000000..65b872d225 --- /dev/null +++ b/files/fr/web/api/document/body/index.html @@ -0,0 +1,32 @@ +--- +title: document.body +slug: Web/API/Document/body +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/Document/body +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">Résumé</h2> +<p>Retourne l'élément <code><body></code> ou <code><frameset></code> du document courant.</p> +<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<pre class="syntaxbox"><em>var objRef</em> = document.body; +document.body = <em>objRef;</em></pre> +<h2 id="Example" name="Example">Exemple</h2> +<pre class="brush:js">// dans le HTML: <body id="ancienElementBody"></body> +alert(document.body.id); // "ancienElementBody" + +var unNouvelElementBody = document.createElement("body"); + +unNouvelElementBody .id = "nouvelElementBody"; +document.body = unNouvelElementBody ; +alert(document.body.id); // "nouvelElementBody" +</pre> +<h2 id="Notes" name="Notes">Notes</h2> +<p><code>document.body</code> est l'élément dans lequel le contenu du document est situé. Dans les documents avec un élément <code><body></code> celui-ci est retourné, et dans les documents de type frameset l'élément <code><frameset></code> le plus extérieur est retourné.</p> +<p>Même si body est modifiable, lui affecter une nouvelle valeur retire tous les éléments enfants du <code><body></code> existant.</p> +<h2 id="Specification" name="Specification">Spécification</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201">DOM Level 2 HTML: HTMLDocument.body</a></li> +</ul> diff --git a/files/fr/web/api/document/caretrangefrompoint/index.html b/files/fr/web/api/document/caretrangefrompoint/index.html new file mode 100644 index 0000000000..02ec1616a9 --- /dev/null +++ b/files/fr/web/api/document/caretrangefrompoint/index.html @@ -0,0 +1,144 @@ +--- +title: Document.caretRangeFromPoint() +slug: Web/API/Document/caretRangeFromPoint +tags: + - API + - DOM + - Document + - Insertion + - Méthode +translation_of: Web/API/Document/caretRangeFromPoint +--- +<p>{{APIRef("DOM")}}{{Non-standard_header}} </p> + +<p>La méthode <code><strong>caretRangeFromPoint()</strong></code> de l'interface {{domxref("Document")}} renvoie un objet "Range" (<em>chaîne</em>) pour le fragment de document aux coordonnées spécifiées.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">var <em>range</em> = <em>document</em>.caretRangeFromPoint(float <em>x</em>, float <em>y</em>); +</pre> + +<h3 id="Retourne">Retourne</h3> + +<p>Une des réponses suivantes :</p> + +<ul> + <li>Un {{domxref("Range")}}.</li> + <li><code>Null</code> si <strong>x</strong> ou <strong>y</strong> sont négatifs, hors de la fenêtre, ou s'il n'y a pas de noeud d'entrée de texte.</li> +</ul> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>x</dt> + <dd>Une position horizontale dans la fenêtre courante.</dd> + <dt>y</dt> + <dd>Une position verticale <span class="short_text" id="result_box" lang="fr"><span>dans la fenêtre courante.</span></span></dd> +</dl> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur :</p> + +<h3 id="Contenu_HTML">Contenu HTML</h3> + +<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, +sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, +sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. +Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></pre> + +<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> + +<pre class="brush: js">function insertBreakAtPoint(e) { + + var range; + var textNode; + var offset; + + if (document.caretPositionFromPoint) { + range = document.caretPositionFromPoint(e.clientX, e.clientY); + textNode = range.offsetNode; + offset = range.offset; + + } else if (document.caretRangeFromPoint) { + range = document.caretRangeFromPoint(e.clientX, e.clientY); + textNode = range.startContainer; + offset = range.startOffset; + } + + // divise seulement les TEXT_NODE (<em>noeuds texte</em>) + if (textNode && textNode.nodeType == 3) { + var replacement = textNode.splitText(offset); + var br = document.createElement('br'); + textNode.parentNode.insertBefore(br, replacement); + } +} + +var paragraphs = document.getElementsByTagName("p"); +for (i=0 ; i < paragraphs.length; i++) { + paragraphs[i].addEventListener("click", insertBreakAtPoint, false); +}</pre> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}</p> + +<p> </p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(43.0)}}</td> + <td>20+</td> + <td>{{CompatNo()}}</td> + <td>12</td> + <td>15+</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> diff --git a/files/fr/web/api/document/characterset/index.html b/files/fr/web/api/document/characterset/index.html new file mode 100644 index 0000000000..ac0462a002 --- /dev/null +++ b/files/fr/web/api/document/characterset/index.html @@ -0,0 +1,56 @@ +--- +title: Document.characterSet +slug: Web/API/Document/characterSet +tags: + - API + - DOM + - Document + - Property + - Read-only + - Reference +translation_of: Web/API/Document/characterSet +--- +<p>{{ApiRef("DOM")}}</p> + +<p><code><strong>Document.characterSet</strong></code> <span id="result_box" lang="fr"><span>propriété en lecture seule, renvoie l'encodage du document en cours</span></span>. Un encodage décrit l'ensemble des caractères possibles et la façon de décoder les octets en ces caractères.</p> + +<div class="note"> +<p><strong>Note :</strong> La propriété <code>document.charset</code> et <code>document.inputEncoding</code> sont les alias de <code>document.characterSet</code>. Ne plus les utiliser.</p> +</div> + +<p>Les utilisateurs peuvent surcharger l'encodage indiqué pour le document (transmis par l'en-tête {{HTTPHeader("Content-Type")}} ou via le {{HTMLElement("meta")}} : <code><meta charset="utf-8"></code>) grâce au menu <kbd>Affichage → Encodage du texte</kbd>. Cela peut notamment permettre de corriger le comportement d'un document dont l'encodage indiqué est incorrect.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>string</em> = document.characterSet</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: html"><button onclick="console.log(document.characterSet);"> + Affiche le jeu de caractère +</button> +<!-- logs document's character set, such as "ISO-8859-1" or "UTF-8" --> +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Etat</th> + <th>Commentaires</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("api.Document.characterSet")}}</p> diff --git a/files/fr/web/api/document/clear/index.html b/files/fr/web/api/document/clear/index.html new file mode 100644 index 0000000000..a8489b0248 --- /dev/null +++ b/files/fr/web/api/document/clear/index.html @@ -0,0 +1,37 @@ +--- +title: Document.clear() +slug: Web/API/Document/clear +tags: + - API + - Deprecated + - Document + - HTML DOM + - Method + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Reference +translation_of: Web/API/Document/clear +--- +<p>{{APIRef("DOM")}}{{ Deprecated_header() }}</p> + +<p>Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla.</p> + +<p>Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="eval">document.clear() +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<ul> + <li><a class="external" href="http://www.whatwg.org/html/#dom-document-clear" title="http://www.whatwg.org/html/#dom-document-clear">HTML5</a></li> +</ul> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Document.clear")}}</p> diff --git a/files/fr/web/api/document/compatmode/index.html b/files/fr/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..23cd1c1dbd --- /dev/null +++ b/files/fr/web/api/document/compatmode/index.html @@ -0,0 +1,53 @@ +--- +title: document.compatMode +slug: Web/API/Document/compatMode +tags: + - API + - DOM + - Propriété + - Reference +translation_of: Web/API/Document/compatMode +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Indique si le document est affiché en mode dégradé (<a href="https://developer.mozilla.org/fr/docs/Mode_quirks_de_Mozilla" title="en/Mozilla's Quirks Mode">Quirks mode</a>) ou dans le respect des standards.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval"><em>mode</em> = document.compatMode +</pre> + +<h2 id="Valeurs">Valeurs</h2> + +<ul> + <li><code>"BackCompat"</code> si le document est a<span style="display: none;"> </span>ffiché en mode<span style="display: none;"> </span><span style="display: none;"> </span> "quirks" ;<span style="display: none;"> </span></li> +</ul> + +<dl> + <dt>mode</dt> + <dd>est une valeur énumérée qui peut être :</dd> +</dl> + +<ul> + <li><code>"CSS1Compat"</code> si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo<span style="display: none;"> </span>de "proche du standard").</li> +</ul> + +<dl> +</dl> + +<div class="note"> +<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>tous ces modes sont maintenant définis dans les normes, de sorte que les anciens «standards» et «presque standards» sont absurdes et ne sont plus utilisés dans les normes.</span></span></p> +</div> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="eval">if (document.compatMode == "BackCompat") { + // en mode Quirks +} +</pre> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<ul> + <li><a class="external" href="http://dom.spec.whatwg.org/#dom-document-compatmode" title="http://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li> +</ul> diff --git a/files/fr/web/api/document/contenttype/index.html b/files/fr/web/api/document/contenttype/index.html new file mode 100644 index 0000000000..3301c615c1 --- /dev/null +++ b/files/fr/web/api/document/contenttype/index.html @@ -0,0 +1,30 @@ +--- +title: Document.contentType +slug: Web/API/Document/contentType +tags: + - API + - DOM + - Document + - MIME + - Propriétés + - Rendu +translation_of: Web/API/Document/contentType +--- +<p>{{ ApiRef("DOM") }}{{Non-standard_header}}</p> + +<p>Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-têtes HTTP ou d'autres sources d'informations MIME et peut être affecté par les conversions automatiques de type effectuées par le navigateur ou les extensions.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval"><var>contentType</var> = <var>document</var>.contentType; +</pre> + +<p><code>contentType</code> est une propriété en lecture seule.</p> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>La propriété n'est pas affectée par les balises META.</p> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p>{{SpecName('DOM WHATWG','#dom-document-contenttype','Document.contenttype')}}</p> diff --git a/files/fr/web/api/document/createattribute/index.html b/files/fr/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..fa0f93d1e0 --- /dev/null +++ b/files/fr/web/api/document/createattribute/index.html @@ -0,0 +1,91 @@ +--- +title: document.createAttribute +slug: Web/API/Document/createAttribute +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/createAttribute +--- +<p>{{ApiRef("DOM")}}</p> + +<p>La méthode <code><strong>Document.createAttribute()</strong></code> crée un nouveau nœud d'attribut et le renvoie. L'objet a créé un noeud implémentant l'interface {{domxref("Attr")}}. Le DOM n'impose pas le type d'attribut à ajouter à un élément particulier de cette manière. </p> + +<div class="note"> +<p> <strong>Note : </strong>La chaîne de caractères donnée dans le paramètre est convertie en minuscules. </p> +</div> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval"><em>attribut</em> = document.createAttribute(nom) +</pre> + +<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3> + +<ul> + <li><code>nom</code> est une chaîne de caractères contenant le nom de l'attribut.</li> +</ul> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un nœud {{domxref("Attr")}}.</p> + +<h3 id="Exceptions_levées">Exceptions levées</h3> + +<ul> + <li><code>INVALID_CHARACTER_ERR</code> si le paramètre contient un caractère invalide pour un attribut XML.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + + +<pre class="brush:js">var node = document.getElementById("div1"); +var a = document.createAttribute("my_attrib"); +a.value = "newVal"; +node.setAttributeNode(a); +console.log(node.getAttribute("my_attrib")); // "newVal" +</pre> +<h2 id="Spécifications">Spécifications</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> Comportement précis avec des caractères majuscules. </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Pas de modification.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Pas de modification.</td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Document.createAttribute")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Document.createElement()")}}</li> +</ul> diff --git a/files/fr/web/api/document/createcdatasection/index.html b/files/fr/web/api/document/createcdatasection/index.html new file mode 100644 index 0000000000..ea4fb083ea --- /dev/null +++ b/files/fr/web/api/document/createcdatasection/index.html @@ -0,0 +1,52 @@ +--- +title: Document.createCDATASection() +slug: Web/API/Document/createCDATASection +tags: + - API + - Création + - DOM + - Document + - Méthode + - Section + - XML + - données +translation_of: Web/API/Document/createCDATASection +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>createCDATASection()</code> crée un nouveau noeud de section CDATA et le renvoie.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><var>CDATASectionNode</var> = document.createCDATASection(data) +</pre> + +<ul> + <li><code>CDATASectionNode</code> est un noeud de <a href="https://developer.mozilla.org/fr/docs/Web/API/CDATASection">Section CDATA</a>.</li> + <li><code>data</code> est une string (<em>chaîne de caractères</em>) contenant les données à ajouter à la section CDATA.</li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:js">var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") + +var cdata = docu.createCDATASection('Some <CDATA> data & then some'); + +docu.getElementsByTagName('xml')[0].appendChild(cdata); + +alert(new XMLSerializer().serializeToString(docu)); +// Affiche : <xml><![CDATA[Some <CDATA> data & then some]]></xml> +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<ul> + <li>Cela fonctionnera uniquement avec XML, pas avec les documents HTML (car les documents HTML ne supportent pas les sections CDATA) ; le tenter sur un document HTML va lancer une exception <code>NOT_SUPPORTED_ERR</code>.</li> + <li>Va lancer une exception <code>NS_ERROR_DOM_INVALID_CHARACTER_ERR</code> si on essaye de soumettre la séquence CDATA de fermeture ("]]>") en tant que partie des données ; les données fournies par l'utilisateur non échappées, ne peuvent pas être utilisées en toute sécurité sans qu'avec cette méthode on obtienne cette exception (<code><a href="/en-US/docs/DOM/document.createTextNode">createTextNode()</a></code> peut souvent être utilisé à sa place).</li> +</ul> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createCDATASection">createCDATASection</a></li> +</ul> diff --git a/files/fr/web/api/document/createcomment/index.html b/files/fr/web/api/document/createcomment/index.html new file mode 100644 index 0000000000..8aaa2be9f3 --- /dev/null +++ b/files/fr/web/api/document/createcomment/index.html @@ -0,0 +1,41 @@ +--- +title: document.createComment +slug: Web/API/Document/createComment +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/createComment +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>createComment()</code> crée et retourne un nouveau noeud de type commentaire.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>CommentNode</em> = document.createComment(data) +</pre> + +<h3 id="Parameters" name="Parameters">Paramètres</h3> + +<dl> + <dt><code>data</code></dt> + <dd>Une chaîne de caractères représentant le contenu du commentaire.</dd> +</dl> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:js">var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml"); +var comment = docu.createComment('Voici un commentaire pas très bien caché'); + +docu.getElementsByTagName('xml')[0].appendChild(comment); + +alert(new XMLSerializer().serializeToString(docu)); +// Affiche: <xml><!--Voici un commentaire pas très bien caché--></xml></pre> + +<h2 id="Spécification">Spécification</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment">createComment</a></li> +</ul> diff --git a/files/fr/web/api/document/createdocumentfragment/index.html b/files/fr/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..63d8203bb7 --- /dev/null +++ b/files/fr/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,140 @@ +--- +title: document.createDocumentFragment +slug: Web/API/Document/createDocumentFragment +tags: + - API + - DOM + - Document + - HTML + - Méthode + - Reference +translation_of: Web/API/Document/createDocumentFragment +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment(); +</pre> + +<p><code>fragment</code> est une référence vers un objet vide de type {{domxref("DocumentFragment")}} .</p> + +<h2 id="Description">Description</h2> + +<p>Les objets <code>DocumentFragments</code> sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.</p> + +<p>Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de <a href="http://code.google.com/speed/articles/reflow.html">reflow</a> (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une <a href="http://ejohn.org/blog/dom-documentfragments/">amélioration des performance</a>s.</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Cet exemple crée une liste des principaux navigateurs du web.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ul<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'ul'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// en supposant qu'ul existe</span> +<span class="keyword token">var</span> fragment <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> browsers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Firefox'</span><span class="punctuation token">,</span> <span class="string token">'Chrome'</span><span class="punctuation token">,</span> <span class="string token">'Opera'</span><span class="punctuation token">,</span> + <span class="string token">'Safari'</span><span class="punctuation token">,</span> <span class="string token">'Internet Explorer'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + +browsers<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>browser<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> li <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">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + li<span class="punctuation token">.</span>textContent <span class="operator token">=</span> browser<span class="punctuation token">;</span> + fragment<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +element<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>fragment<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Example", 600, 140)}}</p> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale dans la spécification DOM 1.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> </div> + +<div id="compat-mobile"> +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> +</div> + +<ul> + <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li> + <li>{{domxref("documentFragment")}}</li> +</ul> diff --git a/files/fr/web/api/document/createelement/index.html b/files/fr/web/api/document/createelement/index.html new file mode 100644 index 0000000000..50f79879d8 --- /dev/null +++ b/files/fr/web/api/document/createelement/index.html @@ -0,0 +1,139 @@ +--- +title: document.createElement +slug: Web/API/Document/createElement +tags: + - API + - Création + - DOM + - Document + - Elements + - Méthodes +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + +<p>Dans un document <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a>, la méthode <strong><code>document.createElement()</code></strong> crée un élément HTML du type spécifié par <code>tagName</code> ou un {{domxref("HTMLUnknownElement")}} si <code>tagName</code> n’est pas reconnu.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var element = document.createElement(tagName[, options]);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>tagName</dt> + <dd>Une chaîne de caractères ({{domxref("DOMString")}}) spécifiant le type d’élément à créer. Le {{domxref("Node.nodeName", "nodeName")}} (<em>nom du noeud</em>) de l’élément créé est initialisé avec la valeur de <code>tagName</code>. N’utilisez pas le nom qualifié (comme <code>"html:a"</code>) avec cette méthode. Quand elle est appelée sur un document HTML, <code>createElement()</code> convertit <code>tagName</code> en minuscules avant de créer l’élément. Dans Firefox, Opera et Chrome, <code>createElement(null)</code> fonctionne comme <code>createElement("null")</code>.</dd> + <dt>options{{optional_inline}}</dt> + <dd> + <p>Un objet <code>ElementCreationOptions</code> facultatif contenant une seule propriété nommée <code>is</code> dont la valeur est le nom de balise d’un élément personnalisé précédemment défini avec <code>customElements.define()</code>. Voir {{anch("Web component example")}} pour plus de détails.</p> + </dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>L’objet {{domxref("Element")}} créé.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_de_base">Exemple de base</h3> + +<p>Ici est créé un nouveau <code><div></code> qui est inséré avant l’élément avec l’identifiant <code>"div1"</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <title>||Working with elements||</title> +</head> +<body> + <div id="div1">The text above has been created dynamically.</div> +</body> +</html></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">document.body.onload = addElement; + +function addElement () { + // crée un nouvel élément div + var newDiv = document.createElement("div"); + // et lui donne un peu de contenu + var newContent = document.createTextNode('Hi there and greetings!'); + // ajoute le nœud texte au nouveau div créé + newDiv.appendChild(newContent); + + // ajoute le nouvel élément créé et son contenu dans le DOM + var currentDiv = document.getElementById('div1'); + document.body.insertBefore(newDiv, currentDiv); +}</pre> + +<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p> + +<h3 id="Exemple_de_composant_web">Exemple de composant web</h3> + +<p>L’exemple de fragment suivant est extrait de notre exemple expanding-list-web-component (voir aussi en direct). Dans ce cas, notre élément personnalisé étend la {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}.</p> + +<pre class="brush: js">// Crée une classe pour l’élément +class ExpandingList extends HTMLUListElement { + constructor() { + // Toujours appeler « super » en premier dans le constructeur + super(); + + // définition du constructeur omise pour la brièveté + ... + } +} + +// Définit le nouvel élément +customElements.define('expanding-list', ExpandingList, { extends: 'ul' });</pre> + +<p>Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante :</p> + +<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre> + +<p>Le nouvel élément donnera un attribut <code><a href="/docs/Web/HTML/Global_attributes/is">is</a></code> dont la valeur est la balise de nom de l’élément personnalisé.</p> + +<div class="note"> +<p><strong>Note :</strong> Pour la rétrocompatibilité avec les versions précédentes de la <a href="https://www.w3.org/TR/custom-elements/">spécification des éléments personnalisés</a>, quelques navigateurs permettent de passer une chaîne de caractères ici, à la place d’un objet, dont la valeur est la balise de nom de l’élément personnalisé.</p> +</div> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div> + +<p>{{Compat("api.Document.createElement")}}</p> + +<h3 id="Notes_CSS_Quantum">Notes CSS Quantum</h3> + +<ul> + <li>Dans Gecko, quand vous voulez créer un sous-arbre détaché (par exemple, un {{htmlelement("div")}} créé avec <code>createElement()</code> qui n’est pas encore inséré dans le DOM), l’élément racine du sous-arbre est défini comme un élément de niveau bloc. Dans le nouveau moteur CSS parallèle de Firefox (aussi connu comme <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour être publié dans Firefox 57), il est défini comme "inline", ({{bug(1374994)}}) selon la spécification.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément.</li> +</ul> diff --git a/files/fr/web/api/document/createelementns/index.html b/files/fr/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..f882f231b9 --- /dev/null +++ b/files/fr/web/api/document/createelementns/index.html @@ -0,0 +1,181 @@ +--- +title: document.createElementNS +slug: Web/API/Document/createElementNS +tags: + - API + - Création + - DOM + - Document + - Elements + - Méthodes + - URI +translation_of: Web/API/Document/createElementNS +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Crée un élément avec l'URI de l'espace de noms spécifié et un nom qualifié.</p> + +<p>Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement" title="createElement">createElement </a><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement"> </a>.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElementNS</span><span class="punctuation token">(</span>namespaceURI<span class="punctuation token">,</span> qualifiedName<span class="punctuation token">[</span><span class="punctuation token">,</span> options<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>namespaceURI</code></dt> + <dd>est une chaîne de caractères qui spécifie <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">l'URI de l'espace de noms</a> à associer à l'élément. La propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/namespaceURI">namespaceURI</a> de l'élément créé est initialisée avec la valeur de <code>namespaceURI</code>. voir <a href="#URI_d'espaces_de_nom_valides">URI d'espaces de nom valides</a></dd> + <dt><code>qualifiedName</code></dt> + <dd>est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeName">nodeName</a> de l'élément créé est initialisée avec la valeur de <code>qualifiedName</code></dd> + <dt><code>Options </code><span class="inlineIndicator optional optionalInline">Facultatif</span></dt> + <dd>Un objet facultatif <code>ElementCreationOptions</code> contient une propriété unique nommée <code>is</code>, <span id="result_box" lang="fr"><span>dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de </span></span> <code>customElements.define()</code> . Pour la rétro-compatibilité avec les versions précédentes de la <a href="https://www.w3.org/TR/custom-elements/">spécification des éléments personnalisés</a>, quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir <a class="external external-icon" href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> pour plus d'informations sur la façon d'utiliser ce paramètre.</dd> + <dd><span id="result_box" lang="fr"><span>Le nouvel élément recevra un attribut <code>is</code> dont la valeur est le nom de la balise de l'élément personnalisé.</span> <span>Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs.</span></span></dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<dl> + <dd>Le nouvel <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Element" title="DOM/element">element</a></code>.</dd> +</dl> + +<h2 id="Example" name="Example"><a id="URI_d'espaces_de_nom_valides" name="URI_d'espaces_de_nom_valides">URI d'espaces de nom valides</a></h2> + +<ul> + <li>HTML - Utiliser <code>http://www.w3.org/1999/xhtml</code></li> + <li>SVG - Utiliser <code>http://www.w3.org/2000/svg</code></li> + <li>XBL - Utiliser <code>http://www.mozilla.org/xbl</code></li> + <li>XUL - Utiliser <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Cet exemple crée un nouvel élément <div> dans l'espace de noms <a href="https://developer.mozilla.org/fr/docs/XHTML" title="XHTML">XHTML</a> et l'ajoute à l'élément vbox. Bien que ce ne soit pas un document <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL" title="XUL">XUL</a> très utile, cela montre l'utilisation d'éléments de deux espaces de noms différents au sein d'un même document :</p> + +<pre class="brush:xml line-numbers language-xml"><code class="language-xml"><span class="prolog token"><?xml version="1.0"?></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>page</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul<span class="punctuation token">"</span></span> + <span class="attr-name token"><span class="namespace token">xmlns:</span>html</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/1999/xhtml<span class="punctuation token">"</span></span> + <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>||Working with elements||<span class="punctuation token">"</span></span> + <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>init()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="cdata token"><![CDATA[ + var container; + var newdiv; + var txtnode; + + function init(){ + container = document.getElementById("ContainerBox"); + newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div"); + txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild."); + newdiv.appendChild(txtnode); + container.appendChild(newdiv); + } + +]]></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>vbox</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>ContainerBox<span class="punctuation token">'</span></span> <span class="attr-name token">flex</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>1<span class="punctuation token">'</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">html:</span>div</span><span class="punctuation token">></span></span> + Le script sur cette page ajoutera du contenu dynamique ci-dessous : + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">html:</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>vbox</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>page</span><span class="punctuation token">></span></span></code></pre> + +<div class="note"> +<p><strong>Note :</strong> Cet exemple utilise un script interne, ce qui n'est pas recommandé dans les documents XHTML. Cet exemple particulier est en fait un document XUL intégrant du XHTML. Cependant, la recommandation s'applique quand même.</p> +</div> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>options</code> argument</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Dans les versions précédentes de la spécification, cet argument était juste une chaîne de caractères dont la valeur était un nom d'élément personnalisé. <span id="result_box" lang="fr"><span>Par souci de compatibilité ascendante, Chrome accepte les deux formes</span></span> .</p> + +<p>[2] Voir [1] <span id="result_box" lang="fr"><span>ci-dessus : comme Chrome, Firefox accepte une chaîne au lieu d'un objet ici, mais seulement à partir de la version 51 et suivantes.</span> <span>Dans la version 50, les <code>options</code> doivent être un objet.</span></span></p> + +<p>[3] <span id="result_box" lang="fr"><span>Pour expérimenter avec des éléments personnalisés dans Firefox, vous devez définir les préférences</span></span> <code>dom.webcomponents.enabled</code> et <code>dom.webcomponents.customelements.enabled</code> à <code>true</code> (<em>vrai</em>).</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="document.createElement">document.createElement</a></li> + <li><a href="document.createTextNode">document.createTextNode</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/namespaceURI">Node.namespaceURI</a></li> + <li><a class="external external-icon" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li> +</ul> diff --git a/files/fr/web/api/document/createentityreference/index.html b/files/fr/web/api/document/createentityreference/index.html new file mode 100644 index 0000000000..c8881dddcb --- /dev/null +++ b/files/fr/web/api/document/createentityreference/index.html @@ -0,0 +1,14 @@ +--- +title: Document.createEntityReference() +slug: Web/API/Document/createEntityReference +translation_of: Web/API/Document/createEntityReference +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>{{ obsolete_header("7.0") }}</p> + +<p>Avant {{ gecko("7.0") }} cette méthode apparaissait présente mais en raison du bogue {{bug("9850")}}, elle renvoyait toujours uniquement "null". La seule solution consiste à créer un noeud de texte, une section CDATA, une valeur de noeud d'attribut, etc., qui ont la valeur référencée par l'entité, en utilisant <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caract%C3%A8res_d%27%C3%A9chappement" title="en/Core_JavaScript_1.5_Guide/Unicode#Unicode_escape_sequences">Les caractères d'échappement</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/fromCharCode">fromCharCode()</a> si nécessaire.</p> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE">createEntityReference</a></p> diff --git a/files/fr/web/api/document/createevent/index.html b/files/fr/web/api/document/createevent/index.html new file mode 100644 index 0000000000..b07312c314 --- /dev/null +++ b/files/fr/web/api/document/createevent/index.html @@ -0,0 +1,90 @@ +--- +title: Document.createEvent() +slug: Web/API/Document/createEvent +tags: + - API + - DOM + - Méthode + - Reference +translation_of: Web/API/Document/createEvent +--- +<div class="warning"> +<p>De nombreuses méthodes utilisées avec <code>createEvent</code>, tels que <code>initCustomEvent</code>, sont obsolètes. Utilisez le <a href="/fr/docs/Web/API/CustomEvent" title="/fr/docs/Web/API/CustomEvent">constructeur d'événement </a><a href="https://developer.mozilla.org/fr/docs/Web/API/CustomEvent"> </a>à la place.</p> +</div> + +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>Crée un <a href="/en-US/docs/DOM/event" title="DOM/event">event</a> du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à <a href="/en-US/docs/DOM/element.dispatchEvent" title="DOM/element.dispatchEvent">element.dispatchEvent</a>.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">var <em>event</em> = <em>document</em>.createEvent(<em>type</em>); +</pre> + +<ul> + <li><code>event</code> est l'objet <a href="/en-US/docs/DOM/event" title="DOM/event">Event</a> créé.</li> + <li><code>type</code> est une chaîne de caractères qui représente le type d'événement à créer. Les types possibles d'événement incluent <code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code> et <code>"HTMLEvents"</code>. Voir la section {{Anch("Notes")}} pour plus de détails.</li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre>// Crée l'événement. +var event = document.createEvent('Event'); + +// Nomme l'événement 'build'. +event.initEvent('build', true, true); + +// <span class="short_text" id="result_box" lang="fr"><span>Écoute l'événement</span></span>. +elem.addEventListener('build', function (e) { + // e.target correspond à elem +}, false); + +// target peut être tout Element ou autre EventTarget. +elem.dispatchEvent(event); +</pre> + +<h3 id="Notes">Notes</h3> + +<p><span id="result_box" lang="fr"><span>Les chaînes de type d'événement appropriées pour passer à <code>createEvent ()</code> sont répertoriées dans la norme DOM - voir le tableau à l'étape 2. Gardez à l'esprit que la plupart des objets événement ont maintenant des constructeurs, qui sont la méthode recommandée pour créer des occurrences d'objet événement.</span></span></p> + +<p><span id="result_box" lang="fr"><span>Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :</span></span></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Event Module</th> + <th>Standard event object</th> + <th>Gecko also supports</th> + </tr> + <tr> + <td>Text event module</td> + <td><code>TextEvent</code></td> + <td><code>TextEvents</code></td> + </tr> + <tr> + <td>Keyboard event module</td> + <td><code>KeyboardEvent</code></td> + <td><code>KeyEvents</code></td> + </tr> + <tr> + <td>Basic events module</td> + <td><code>Event</code></td> + <td><code>Events</code></td> + </tr> + </tbody> +</table> + +<h2 id="Spécification">Spécification</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 2 Events: createEvent</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent">DOM Level 3 Events: createEvent</a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'événements</a></li> +</ul> diff --git a/files/fr/web/api/document/createexpression/index.html b/files/fr/web/api/document/createexpression/index.html new file mode 100644 index 0000000000..57bd734923 --- /dev/null +++ b/files/fr/web/api/document/createexpression/index.html @@ -0,0 +1,31 @@ +--- +title: Document.createExpression() +slug: Web/API/Document/createExpression +tags: + - API + - DOM + - Méthode + - XPath +translation_of: Web/API/Document/createExpression +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Cette méthode compile une <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="en/XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval"><em>xpathExpr</em> = <em>document</em>.createExpression(<em>xpathText</em>, <em>namespaceURLMapper</em>); +</pre> + +<h3 id="Arguments" name="Arguments">Paramètres</h3> + +<ul> + <li>String (<em>chaîne de caractères</em>) <code>xpathText</code> (l'expression XPath à compiler)</li> + <li>Fonction <code>namespaceURLMapper</code> (mappe un préfixe d'espace de noms à une URL d'espace de noms (ou null si aucun n'est nécessaire)).</li> +</ul> + +<p>{{ Fx_minversion_note(3, "Avant Firefox 3, vous pouviez appeler cette méthode sur des documents autres que celui que vous aviez prévu d'exécuter avec XPath. Sous Firefox 3, vous devez l'appeler sur le même document.") }}</p> + +<h3 id="Return" name="Return">Valeur retournée</h3> + +<p><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="en/XPathExpression">XPathExpression</a></p> diff --git a/files/fr/web/api/document/createnodeiterator/index.html b/files/fr/web/api/document/createnodeiterator/index.html new file mode 100644 index 0000000000..b43b427f36 --- /dev/null +++ b/files/fr/web/api/document/createnodeiterator/index.html @@ -0,0 +1,137 @@ +--- +title: Document.createNodeIterator() +slug: Web/API/Document/createNodeIterator +tags: + - API + - DOM + - Méthodes +translation_of: Web/API/Document/createNodeIterator +--- +<p>{{APIRef("DOM")}}</p> + +<p>Renvoie un nouvel objet <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeIterator" title="En/DOM/NodeIterator"><code>NodeIterator</code></a>.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval script">var nodeIterator = document.createNodeIterator(root, whatToShow, filter); +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>root</code></dt> + <dd>Le noeud racine à partir duquel commencer la traversée de {{domxref("NodeIterator")}}.</dd> + <dt><code>whatToShow</code> {{ optional_inline() }}</dt> + <dd>Est un <code>unsigned long</code> (<em>long non signé</em>) facultatif représentant un masque de bits créé par la combinaison des constantes de la propriété <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. C'est un moyen pratique de filtrage pour certains types de noeuds. Il est par défaut <code>0xFFFFFFFF</code> représentant la constante <code>SHOW_ALL</code>. + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Constante</td> + <td class="header">Valeur numérique</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ALL</code></td> + <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td> + <td>Affiche tous les noeuds.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td> + <td><code>2</code></td> + <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td> + <td><code>8</code></td> + <td>Affiche les noeuds {{domxref("CDATASection")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_COMMENT</code></td> + <td><code>128</code></td> + <td>Affiche les noeuds {{domxref("Comment")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT</code></td> + <td><code>256</code></td> + <td>Affiche les noeuds {{domxref("Document")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> + <td><code>1024</code></td> + <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> + <td><code>512</code></td> + <td>Affiche les noeuds {{domxref("DocumentType")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ELEMENT</code></td> + <td><code>1</code></td> + <td>Affiche les noeuds {{domxref("Element")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> + <td><code>32</code></td> + <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td> + <td><code>16</code></td> + <td>Affiche les noeuds {{domxref("EntityReference")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td> + <td><code>2048</code></td> + <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> + <td><code>64</code></td> + <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_TEXT</code></td> + <td><code>4</code></td> + <td>Affiche les noeuds {{domxref("Text")}}.</td> + </tr> + </tbody> + </table> + </dd> + <dt><code>filter</code> {{ optional_inline() }}</dt> + <dd>Un objet implémentant l'interface {{ domxref("NodeFilter") }} ; sa méthode <code>acceptNode()</code> sera appelée pour chaque nœud du sous-arbre basé à la racine qui est accepté comme inclus par l'indicateur whatToShow pour déterminer s'il faut ou non l'inclure dans la liste des nœuds iterables (une simple fonction de rappel peut également être utilisée à la place). La méthode devrait retourner l'un des <code>NodeFilter.FILTER_ACCEPT</code>, <code>NodeFilter.FILTER_REJECT</code> ou <code>NodeFilter.FILTER_SKIP</code>. Voir l'{{anch("Exemple")}}.</dd> +</dl> + +<div class="note"><strong>Note :</strong> Avant Gecko 12.0 {{geckoRelease("12.0")}}, cette méthode acceptait un quatrième paramètre facultatif (<code>entityReferenceExpansion</code>). Cela ne faisait pas partie de la spécification DOM4 et a donc été supprimé. Ce paramètre indiquait si les enfants des nœuds de référence d'entité étaient visibles ou non par l'itérateur. Puisque de tels noeuds n'ont jamais été créés dans les navigateurs, ce paramètre n'a eu aucun effet.</div> + +<h2 id="Example" name="Example"><a id="Exemple" name="Exemple"></a>Exemple</h2> + +<pre class="brush: js">var nodeIterator = document.createNodeIterator( + document.body, + NodeFilter.SHOW_ELEMENT, + function(node) { + return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; + } +); +var pars = []; +var currentNode; + +while (currentNode = nodeIterator.nextNode()) { + pars.push(currentNode); +} + +</pre> + +<h3 id="Specification" name="Specification">Compatibilité des navigateurs</h3> + +<p>Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge</p> + +<h2 id="Specification" name="Specification">Voir aussi</h2> + +<ul> + <li><a class="external" href="https://developer.mozilla.org/fr/docs/Web/API/Document/createNodeIterator" title="http://msdn.microsoft.com/en-us/library/ie/ff975301(v=vs.85).aspx">createNodeIterator sur MDN</a></li> +</ul> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator">DOM Level 2 Traversal : NodeIterator</a></p> diff --git a/files/fr/web/api/document/creatensresolver/index.html b/files/fr/web/api/document/creatensresolver/index.html new file mode 100644 index 0000000000..d9546328ae --- /dev/null +++ b/files/fr/web/api/document/creatensresolver/index.html @@ -0,0 +1,49 @@ +--- +title: Document.createNSResolver() +slug: Web/API/Document/createNSResolver +tags: + - API + - DOM + - Méthodes + - XPath +translation_of: Web/API/Document/createNSResolver +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Crée un <code>XPathNSResolver</code> qui résout les espaces de noms en respectant les définitions dans la portée pour un noeud spécifié.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval"><em>nsResolver</em> = document.createNSResolver(<em>node</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<ul> + <li><code>node</code> est un noeud à utiliser comme contexte pour la résolution de l'espace de noms.</li> +</ul> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<ul> + <li><code>nsResolver</code> est un objet XPathNSResolver.</li> +</ul> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression <a href="https://developer.mozilla.org/fr/docs/XPath" title="en/XPath">XPath</a> puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode <code>lookupNamespaceURI</code> du DOM de niveau 3 sur les noeuds lors de la résolution de <code>namespaceURI</code> à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de <code>lookupNamespaceURI</code>. Résout aussi correctement le préfixe implicite <code>xml</code>.</p> + +<p>Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, <code>p[@id='_myid'</code>] pour <code><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml'</span></code>). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que <code>*namespace-uri()=<span class="nowiki">http://www.w3.org/1999/xhtml</span> and name()=p[@id='_myid']</code> (<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace" title="en/Introduction_to_using_XPath_in_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace">cette approche</a> fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Impl%C3%A9mentation_d%27un_r%C3%A9solveur" title="en/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver">comment créer un résolveur d'espace de nom défini par l'utilisateur</a> si vous souhaitez adopter cette dernière approche.</p> + +<p><code>createNSResolver</code> a été introduit dans DOM Niveau 3.</p> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li><a href="/en/DOM/document.evaluate" title="en/DOM/document.evaluate">document.evaluate</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript" title="en/Introduction_to_using_XPath_in_JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a></li> +</ul> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html#XPathEvaluator-createNSResolver">DOM Level 3 XPath Specification : createNSResolver</a></p> diff --git a/files/fr/web/api/document/createprocessinginstruction/index.html b/files/fr/web/api/document/createprocessinginstruction/index.html new file mode 100644 index 0000000000..91c7652457 --- /dev/null +++ b/files/fr/web/api/document/createprocessinginstruction/index.html @@ -0,0 +1,55 @@ +--- +title: Document.createProcessingInstruction() +slug: Web/API/Document/createProcessingInstruction +tags: + - API + - Création + - DOM + - Méthodes + - Noeuds + - Reference + - Traitement + - instructions +translation_of: Web/API/Document/createProcessingInstruction +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p><code>createProcessingInstruction()</code> crée un nouveau noeud d'instruction de traitement et le renvoie.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval"><em>Processing instruction node</em> = document.createProcessingInstruction(target, data) +</pre> + +<h3 id="Parameters" name="Parameters">Paramètres</h3> + +<ul> + <li><code>Processing Instruction node</code> est un noeud {{domxref("ProcessingInstruction")}}.</li> + <li><code>target</code> fait référence à la partie cible du noeud d'instructions de traitement (par exemple, <?<em>target</em> ... ?>).</li> + <li><code>data</code> est une string (<em>chaîne de caractères</em>) contenant les données à ajouter aux données du noeud.</li> +</ul> + +<h3 id="Notes" name="Notes">Exceptions</h3> + +<dl> + <dt><code>NOT_SUPPORTED_ERR</code></dt> + <dd>Lancée si vous tentez de créer un noeud d'instructions de traitement sur un document HTML dans Gecko 9 {{ geckoRelease("9.0") }} ou antérieurs. Dans Gecko 10.0 {{ geckoRelease("10.0") }} et ultérieurs, vous pouvez utiliser cette méthode sur des documents HTML.</dd> + <dt><code>DOM_INVALID_CHARACTER</code></dt> + <dd>Lancée si vous essayez d'ajouter une cible d'instruction de traitement invalide (ce devrait être le cas avec le nom XML et toutes les combinaisons des lettres "xml"), ou si la séquence d'instructions de traitement de fermeture ("?>") est ajoutée aux données. Les données fournies par l'utilisateur ne peuvent donc pas être utilisées en toute sécurité sans échappement ou autres moyens de faire face à de telles situations.</dd> +</dl> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre>var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") + +var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"'); + +docu.insertBefore(pi, docu.firstChild); + +alert(new XMLSerializer().serializeToString(docu)); +// Affiche: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/> +</pre> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createprocessinginstruction">DOM 4: createProcessingInstruction</a></p> diff --git a/files/fr/web/api/document/createrange/index.html b/files/fr/web/api/document/createrange/index.html new file mode 100644 index 0000000000..5a187c5f3a --- /dev/null +++ b/files/fr/web/api/document/createrange/index.html @@ -0,0 +1,38 @@ +--- +title: Document.createRange +slug: Web/API/Document/createRange +tags: + - API + - DOM + - Document + - Méthodes +translation_of: Web/API/Document/createRange +--- +<div>{{APIRef("DOM")}}</div> + +<p>Retourne un objet {{domxref("Range")}}.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">range = document.createRange(); +</pre> + +<p><code>range</code> devient un objet {{domxref("Range")}}.</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:js">var range = document.createRange(); + +range.setStart(startNode, startOffset); +range.setEnd(endNode, endOffset); +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Une fois un objet <code>Range</code> créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<ul> + <li><a class="external external-icon" href="https://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level-2-DocumentRange-idl">DOM Level 2 Range: DocumentRange.createRange</a></li> +</ul> diff --git a/files/fr/web/api/document/createtextnode/index.html b/files/fr/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..8f16aa0440 --- /dev/null +++ b/files/fr/web/api/document/createtextnode/index.html @@ -0,0 +1,128 @@ +--- +title: document.createTextNode +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/createTextNode +--- +<p>{{APIRef("DOM")}}</p> + +<p>Crée un nouveau nœud de texte.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>données</var>); +</pre> + +<ul> + <li><code>texte</code> est un nœud de texte.</li> + <li><code>donnees</code> est une chaîne contenant les données à placer dans le nœud de texte.</li> +</ul> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></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>title</span><span class="punctuation token">></span></span>createTextNode example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</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="keyword token">function</span> <span class="function token">addTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> newtext <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">,</span> + p1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"p1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + p1<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newtext<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>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>addTextNode(<span class="punctuation token">'</span>YES! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>YES!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>addTextNode(<span class="punctuation token">'</span>NO! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>NO!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>addTextNode(<span class="punctuation token">'</span>WE CAN! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>WE CAN!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>hr</span> <span class="punctuation token">/></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>p1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>First line of paragraph.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</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="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/fr/web/api/document/createtreewalker/index.html b/files/fr/web/api/document/createtreewalker/index.html new file mode 100644 index 0000000000..87dbad7998 --- /dev/null +++ b/files/fr/web/api/document/createtreewalker/index.html @@ -0,0 +1,245 @@ +--- +title: Document.createTreeWalker() +slug: Web/API/Document/createTreeWalker +tags: + - API + - Arborescence + - DOM + - Document + - Filtre + - Méthodes + - Noeuds +translation_of: Web/API/Document/createTreeWalker +--- +<div>{{ApiRef("Document")}}</div> + +<p>La méthode de création <strong><code>Document.createTreeWalker()</code></strong> renvoie un nouvel objet {{domxref("TreeWalker")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>, <em>filter</em>, <em>entityReferenceExpansion</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><em>root </em></dt> + <dd>est le {{domxref("Node")}} (<em>noeud</em>) racine du {{domxref("TreeWalker")}} à traverser. Généralement, ce sera un élément appartenant au document.</dd> + <dt><em>whatToShow {{optional_inline}}</em></dt> + <dd>est un <code>unsigned long</code> (<em>long non signé</em>) facultatif représentant un masque de bits créé par combinaison des propriétés de constante de <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. C'est un moyen pratique de filtrage pour certains types de nœuds. Par défaut <code>0xFFFFFFFF</code> représentant la constante <code>SHOW_ALL</code>. + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Constante</td> + <td class="header">Valeur numérique</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ALL</code></td> + <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td> + <td>Affiche tous les noeuds.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td> + <td><code>2</code></td> + <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td> + <td><code>8</code></td> + <td>Affiche les noeuds {{domxref("CDATASection")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_COMMENT</code></td> + <td><code>128</code></td> + <td>Affiche les noeuds {{domxref("Comment")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT</code></td> + <td><code>256</code></td> + <td>Affiche les noeuds {{domxref("Document")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> + <td><code>1024</code></td> + <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> + <td><code>512</code></td> + <td>Affiche les noeuds {{domxref("DocumentType")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ELEMENT</code></td> + <td><code>1</code></td> + <td>Affiche les noeuds {{domxref("Element")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> + <td><code>32</code></td> + <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td> + <td><code>16</code></td> + <td>Affiche les noeuds {{domxref("EntityReference")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td> + <td><code>2048</code></td> + <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> + <td><code>64</code></td> + <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_TEXT</code></td> + <td><code>4</code></td> + <td>Affiche les noeuds {{domxref("Text")}}.</td> + </tr> + </tbody> + </table> + </dd> + <dt><em>filter <em>{{optional_inline}}</em></em></dt> + <dd>est un {{domxref("NodeFilter")}} (<em>filtre de noeud</em>) facultatif, c'est à dire un objet avec une méthode <code>acceptNode</code> appelé par {{domxref("TreeWalker")}} pour déterminer s'il doit accepter ou non un nœud qui a passé le test <code>whatToShow</code>.</dd> + <dt><em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{obsolete_inline}}</em></dt> + <dd>est un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, son sous-arbre doit être supprimé en même temps.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<p>L'exemple suivant passe à travers tous les noeuds du "body" (<em>corps du document</em>), réduit l'ensemble des noeuds aux éléments, passe simplement à travers chaque noeud acceptable (à la place, il pourrait réduire l'ensemble dans la méthode <code>acceptNode()</code>), puis utilise l'itérateur de traversée de l'arbre créé pour avancer à travers les nœuds (maintenant tous les éléments) et les écrire dans un tableau.</p> + +<pre class="brush: js">var treeWalker = document.createTreeWalker( + document.body, + NodeFilter.SHOW_ELEMENT, + { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }, + false +); + +var nodeList = []; + +while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Suppression du paramètre <code>expandEntityReferences</code>. Les paramètres facultatifs <code>whatToShow</code> et <code>filter</code> .</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.0</td> + </tr> + <tr> + <td><code>whatToShow</code> and <code>filter</code> optional</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("12")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0</td> + </tr> + <tr> + <td><code>expandEntityReferences</code></td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}<br> + Removed in {{CompatGeckoDesktop("12")}}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8.1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>3.0</td> + </tr> + <tr> + <td><code>whatToShow</code> and <code>filter</code> optional</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("12")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0</td> + </tr> + <tr> + <td><code>expandEntityReferences</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8.1")}}<br> + Removed in {{CompatGeckoDesktop("12")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>3.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface de l'objet qu'il crée : {{domxref("TreeWalker")}}.</li> +</ul> diff --git a/files/fr/web/api/document/currentscript/index.html b/files/fr/web/api/document/currentscript/index.html new file mode 100644 index 0000000000..68fd2e0f4b --- /dev/null +++ b/files/fr/web/api/document/currentscript/index.html @@ -0,0 +1,118 @@ +--- +title: Document.currentScript +slug: Web/API/Document/currentScript +tags: + - API + - DOM + - Propriété + - Reference + - Script +translation_of: Web/API/Document/currentScript +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Retourne l'élément {{HTMLElement("script")}} dont le script est en cours de traitement.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <var>curScriptElement</var> = document.currentScript; +</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>Cet exemple vérifie si le script s'exécute de manière asynchrone :</p> + +<pre class="brush:js">if (document.currentScript.async) { + console.log("Exécution asynchrone"); +} else { + console.log("Exécution synchrone"); +}</pre> + +<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p> + +<h2 id="Notes">Notes</h2> + +<p>Il est important de noter que l'élément {{HTMLElement("script")}} ne sera pas référencé si le code dans le script est appelé par une fonction de rappel ou par un gestionnaire d'événements ; seul sera référencé l'élément alors qu'il est initialement en cours d'exécution.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(29.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>16</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("script")}}</li> + <li>{{domxref("document.onafterscriptexecute")}}</li> + <li>{{domxref("document.onbeforescriptexecute")}}</li> +</ul> diff --git a/files/fr/web/api/document/defaultview/index.html b/files/fr/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..e956485e62 --- /dev/null +++ b/files/fr/web/api/document/defaultview/index.html @@ -0,0 +1,18 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +translation_of: Web/API/Document/defaultView +--- +<h2 id="Summary" name="Summary">Résumé</h2> +<p>Dans les navigateurs, cette propriété renvoie l'objet <a href="/en-US/docs/DOM/window" title="DOM/window">window</a> associé au document ou <code>null</code> si non disponible.</p> +<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<pre class="syntaxbox">var win = document.defaultView;</pre> +<p>Cette propriété est en lecture seule.</p> +<h2 id="Notes" name="Notes">Notes</h2> +<p>D'après <a class="external" href="http://www.quirksmode.org/dom/w3c_html.html">quirksmode</a>, <code>defaultView</code> n'est pas supporté dans les versions d'IE inférieures à 9.</p> +<h2 id="Specification" name="Specification">Spécification</h2> +<ul> + <li><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5: defaultView</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Views/" title="http://www.w3.org/TR/DOM-Level-3-Views/">DOM Level 3 Views</a> (Seulement développé en Working Group Note mais pas implémenté)</li> +</ul> diff --git a/files/fr/web/api/document/designmode/index.html b/files/fr/web/api/document/designmode/index.html new file mode 100644 index 0000000000..f3bac92585 --- /dev/null +++ b/files/fr/web/api/document/designmode/index.html @@ -0,0 +1,102 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +translation_of: Web/API/Document/designMode +--- +<div>{{ ApiRef() }}</div> + +<div> </div> + +<h2 id="Summary" name="Summary">Résumé</h2> + +<p><span id="result_box" lang="fr"><span class="hps">document.designMode</span> <span class="hps">contrôle si</span> <span class="hps">l'ensemble du document</span> <span class="hps">est modifiable.</span> <span class="hps">Les valeurs valides sont</span> <span class="hps">"on"</span> <span class="hps">et "off"</span><span>.</span> <span class="hps">Conformément à la spécification</span><span>,</span> <span class="hps">cette propriété</span> <span class="hps">est par</span> <span class="hps">défaut</span> <span class="hps">sur "off"</span><span>.</span> <span class="hps">Firefox</span> <span class="hps">suit</span> <span class="hps">cette norme</span><span>.</span> <span class="hps">Les</span> <span class="hps">versions antérieures de</span> <span class="hps">Chrome</span> <span class="hps">et IE</span> <span class="hps">ont par défaut la valeur</span><span class="atn hps"> "</span></span><code>inherit</code><span lang="fr"><span>"</span><span>.</span> Pour les versions entre <span class="hps">IE6-10</span><span>,</span> <span class="hps">la valeur</span> <span class="hps">est en majuscule</span><span>.</span></span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">var mode = document.designMode; +document.designMode = "on"; +document.designMode = "off";</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Rendre un document {{HTMLElement("iframe")}} éditable</p> + +<pre>iframe_node.contentDocument.designMode = "on"; +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs" style="font-size: 2.14285714285714rem;">Compatibilité des navigateurs</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">Feature</th> + <th style="line-height: 16px;">Chrome</th> + <th style="line-height: 16px;">Firefox (Gecko)</th> + <th style="line-height: 16px;">Internet Explorer</th> + <th style="line-height: 16px;">Opera</th> + <th style="line-height: 16px;">Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th style="line-height: 16px;">Feature</th> + <th style="line-height: 16px;">Android</th> + <th style="line-height: 16px;">Chrome for Android</th> + <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> + <th style="line-height: 16px;">IE Mobile</th> + <th style="line-height: 16px;">Opera Mobile</th> + <th style="line-height: 16px;">Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">designMode property</a> on MSDN</li> +</ul> diff --git a/files/fr/web/api/document/dir/index.html b/files/fr/web/api/document/dir/index.html new file mode 100644 index 0000000000..9ae15a8559 --- /dev/null +++ b/files/fr/web/api/document/dir/index.html @@ -0,0 +1,44 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +tags: + - API + - Document + - Propriété + - Reference +translation_of: Web/API/Document/dir +--- +<p>{{ApiRef("")}}</p> + +<p>La propriété <code><strong>Document.dir</strong></code> est une chaîne de caractères {{domxref("DOMString")}} <span class="tlid-translation translation" lang="fr"><span title="">représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche.</span> <span title="">Les valeurs possibles sont</span></span> <code>'rtl'</code>, droite vers gauche, et <code>'ltr'</code>, gauche vers droite.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir; +<em>document.dir</em> = <em>dirStr;</em> +</pre> + +<h2 id="Specifications" name="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "#dom-document-dir", "Document.dir")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("api.Document.dir")}}</p> diff --git a/files/fr/web/api/document/doctype/index.html b/files/fr/web/api/document/doctype/index.html new file mode 100644 index 0000000000..980447cc3c --- /dev/null +++ b/files/fr/web/api/document/doctype/index.html @@ -0,0 +1,65 @@ +--- +title: Document.doctype +slug: Web/API/Document/doctype +tags: + - API + - DOM + - DTD + - Document + - Propriétés + - Type +translation_of: Web/API/Document/doctype +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Renvoie la "Document Type Declaration (DTD)" (<em>déclaration de type de document</em>) associée avec le document actuel. L'objet renvoyé implémente l'interface {{domxref("DocumentType")}}. Utilisez {{domxref("DOMImplementation.createDocumentType()")}} pour créer un <code>DocumentType</code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype; +</pre> + +<ul> + <li><code>doctype</code> est une propriété en lecture seule.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush:js">var doctypeObj = document.doctype; + +console.log( + "doctypeObj.name: " + doctypeObj.name + "\n" + + "doctypeObj.internalSubset: " + doctypeObj.internalSubset + "\n" + + "doctypeObj.publicId: " + doctypeObj.publicId + "\n" + + "doctypeObj.systemId: " + doctypeObj.systemId +);</pre> + +<h2 id="Notes">Notes</h2> + +<p>La propriété renvoie <code>null</code> si aucune DTD n'est associée au document en cours.</p> + +<p>DOM level 2 ne prend pas en charge l'édition de la déclaration de type de document (DTD).</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Valeur de retour modifiée pour les documents HTML avec absence d'élément {{HTMLElement("html")}}. Définit que le type de document peut être modifié.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> diff --git a/files/fr/web/api/document/document.anchors/index.html b/files/fr/web/api/document/document.anchors/index.html new file mode 100644 index 0000000000..09fadf1b61 --- /dev/null +++ b/files/fr/web/api/document/document.anchors/index.html @@ -0,0 +1,80 @@ +--- +title: Document.anchors +slug: Web/API/Document/Document.anchors +translation_of: Web/API/Document/anchors +--- +<div>{{APIRef("DOM")}} {{deprecated_header()}}</div> + +<p><code>anchors</code> retourne une liste de toutes les ancres du document.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><var>nodeList</var> = document.anchors; +</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:js">if ( document.anchors.length >= 5 ) { + dump("Trop d'ancres trouvées !"); + window.location = "http://www.google.com"; +} +</pre> + +<p>L'exemple suivant remplit un tableau avec chaque ancre présente sur la page :</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8" /> +<title>Test</title> +<script> +function init() { + var toc = document.getElementById("toc"); + var i, li, newAnchor; + for (i = 0; i < document.anchors.length; i++) { + li = document.createElement("li"); + newAnchor = document.createElement('a'); + newAnchor.href = "#" + document.anchors[i].name; + newAnchor.innerHTML = document.anchors[i].text; + li.appendChild(newAnchor); + toc.appendChild(li); + } +} +</script> + +</head> +<body onload="init()"> + +<h1>Title</h1> +<h2><a name="contents">Contents</a></h2> +<ul id="toc"></ul> + +<h2><a name="plants">Plants</a></h2> +<ol> + <li>Apples</li> + <li>Oranges</li> + <li>Pears</li> +</ol> + +<h2><a name="veggies">Veggies</a></h2> +<ol> + <li>Carrots</li> + <li>Celery</li> + <li>Beats</li> +</ol> + +</body> +</html> +</pre> + +<p><a href="https://jsfiddle.net/S4yNp">Voir dans JSFiddle</a></p> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut <code>name</code>, pas celles créées avec l'attribut <code>id</code>.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></li> +</ul> diff --git a/files/fr/web/api/document/document/index.html b/files/fr/web/api/document/document/index.html new file mode 100644 index 0000000000..92f2305c02 --- /dev/null +++ b/files/fr/web/api/document/document/index.html @@ -0,0 +1,93 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - Constructeur + - DOM + - Document + - Reference +translation_of: Web/API/Document/Document +--- +<p>{{APIRef}}</p> + +<p>Le constructeur <code><strong>Document</strong></code> crée un nouvel objet de {{domxref("Document")}}, lequel c'est la référence de la page courante dans le navigateur et servant comme point d'entrer aux contenus de la page.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>document</em> = new Document()</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<p>None.</p> + +<p><span style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.5rem;'>Spécifications</span></p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(60)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(47)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(60)}}</td> + <td>{{CompatChrome(60)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(47)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/fr/web/api/document/documentelement/index.html b/files/fr/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..e345027b13 --- /dev/null +++ b/files/fr/web/api/document/documentelement/index.html @@ -0,0 +1,72 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +tags: + - API + - DOM + - Noeud + - Propriétés + - Racine + - Reference +translation_of: Web/API/Document/documentElement +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code><strong>Document.documentElement</strong></code>renvoie l'<code><a href="https://developer.mozilla.org/fr/docs/Web/API/element">Element</a></code> qui est l'élément racine du <a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a> (par exemple, l'élément <code><html></code> pour les documents HTML).</p> + +<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> + +<pre class="eval">var<em> element</em> = document.documentElement; +</pre> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="eval">var racine = document.documentElement; +var premierNiveau = racine.childNodes; +// premierNiveau est une NodeList des enfants directs de l'élément racine +for (var i = 0; i < premierNiveau.length; i++) { + // fait quelque chose avec chaque enfant direct de l'élément racine + // en tant que premierNiveau[i] +} +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p><span id="result_box" lang="fr"><span>Pour tout document HTML non vide, <code>document.documentElement</code> sera toujours un élément {{HTMLElement ("html")}}.</span> <span>Pour tout document XML non vide, <code>document.documentElement</code> sera toujours l'élément racine du document.</span></span></p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Document.documentElement")}}</p> diff --git a/files/fr/web/api/document/documenturi/index.html b/files/fr/web/api/document/documenturi/index.html new file mode 100644 index 0000000000..31e15a16be --- /dev/null +++ b/files/fr/web/api/document/documenturi/index.html @@ -0,0 +1,54 @@ +--- +title: Document.documentURI +slug: Web/API/Document/documentURI +tags: + - API + - DOM + - Document + - Propriétés + - URI +translation_of: Web/API/Document/documentURI +--- +<div>{{ApiRef("DOM")}}</div> + +<p>La propriété <code><strong>documentURI</strong></code> de l'interface {{domxref("Document")}} renvoie l'emplacement du document sous forme "string" (<em>chaîne de caractères</em>).</p> + +<p>Initialement, la spécification DOM3 définissait cet attribut en lecture/écriture. Dans la norme actuelle DOM, il est en lecture seule.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <var>string</var> = document.documentURI; +</pre> + +<h2 id="Notes">Notes</h2> + +<p>Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie la même valeur. Contrairement à l'<code>URL</code>, <code>documentURI</code> est disponible pour tous les types de documents.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + + +<p>{{Compat("api.Document.documentURI")}}</p> diff --git a/files/fr/web/api/document/documenturiobject/index.html b/files/fr/web/api/document/documenturiobject/index.html new file mode 100644 index 0000000000..3c9f6fcb6f --- /dev/null +++ b/files/fr/web/api/document/documenturiobject/index.html @@ -0,0 +1,38 @@ +--- +title: document.documentURIObject +slug: Web/API/Document/documentURIObject +tags: + - API + - DOM + - Propriétés + - Reference +translation_of: Web/API/Document/documentURIObject +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>La propriété en lecture seule <code><strong>Document.documentURIObject</strong></code> renvoie un objet {{ Interface("nsIURI") }} représentant l'URI du <a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a>.</p> + +<p>Cette propriété fonctionne uniquement pour les scripts privilégiés (UniversalXPConnect), comme le code des extensions. Pour le contenu Web, elle n'a aucune signification particulière et peut être utilisée comme n'importe quelle propriété personnalisée.</p> + +<p>Dans le cas d'un code privilégié, il convient de faire attention à ne pas essayer d'obtenir ou modifier cette propriété sur un objet de contenu non enveloppé (par exemple sur l'objet <code>wrappedJSObject</code> d'un <code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/Xray_vision">XPCNativeWrapper</a></code>). Consultez les commentaires du {{ Bug(324464) }} pour plus de détails.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval line-numbers language-html"><code class="language-html">var uri = doc.documentURIObject;</code></pre> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="eval">// Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http », +// en supposant que ce code s'exécute dans le contexte de browser.xul + +var uriObj = content.document.documentURIObject; +var uriPort = uriObj.port; + +if (uriObj.schemeIs('http')) { + ... +} +</pre> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<p>Ne fait partie d'aucune spécification.</p> diff --git a/files/fr/web/api/document/domain/index.html b/files/fr/web/api/document/domain/index.html new file mode 100644 index 0000000000..94d4f1775b --- /dev/null +++ b/files/fr/web/api/document/domain/index.html @@ -0,0 +1,61 @@ +--- +title: Document.domain +slug: Web/API/Document/domain +tags: + - API + - Document + - HTML DOM + - NeedsCompatTable + - NeedsMarkupWork + - NeedsSpecTable + - Propriété + - Reference +translation_of: Web/API/Document/domain +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">Résumé</h2> + +<p>Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">politique d'origine identique</a>.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">var <var>chaineDomaine</var> = document.domain; document.domain = <em>chaine</em>; +</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:js" dir="rtl">// Pour le document www.example.xxx/good.html, +// ce script ferme la fenêtre +var mauvaisDomaine = "www.example.xxx"; + +if (document.domain == mauvaisDomaine ) + window.close(); // juste un exemple - window.close() n'a parfois aucun effet.</pre> + +<pre class="brush:js">// Pour l'URI http://developer.mozilla.org/en-US/docs/Web, ce qui +// suit définit le domaine comme étant la chaîne "developer.mozilla.org" +var domaine = document.domain; +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Cette propriété retourne <code>null</code> si le domaine du document ne peut pas être identifié.</p> + +<p>Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29" title="nsIEffectiveTLDService#getBaseDomain.28.29">domaine de base</a>. Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org".</p> + +<p>Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null.</p> + +<p>Mozilla fait la distinction entre la propriété d'un <code>document.domain</code> qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini <code>document.domain</code> à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini <code>document.domain</code> et que les domaines dans les URLs sont les mêmes (<a class="link-https" href="https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199" title="https://mxr.mozilla.org/mozilla-central/source/caps/src/nsScriptSecurityManager.cpp#1003">implementation</a>). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS) depuis ses sous-domaines (par exemple, <a class="link-https" href="https://bugzilla.mozilla.org" rel="freelink">https://bugzilla.mozilla.org</a> pourrait être attaqué par des pièces jointes de bugs sur <a class="link-https" href="https://bug*.bugzilla.mozilla.org" rel="freelink">https://bug*.bugzilla.mozilla.org</a>).</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147">DOM Level 2 HTML: document.domain</a> (le décrit comme étant en lecture-seule)</li> + <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html">HTML5: document.domain</a> (décrit un comportement similaire à celui de Mozilla)</li> +</ul> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">Politique de même origine pour JavaScriptHTML</a></li> +</ul> diff --git a/files/fr/web/api/document/domcontentloaded_event/index.html b/files/fr/web/api/document/domcontentloaded_event/index.html new file mode 100644 index 0000000000..29c8b67905 --- /dev/null +++ b/files/fr/web/api/document/domcontentloaded_event/index.html @@ -0,0 +1,184 @@ +--- +title: 'Document: DOMContentLoaded event' +slug: Web/API/Document/DOMContentLoaded_event +translation_of: Web/API/Document/DOMContentLoaded_event +--- +<div>{{APIRef}}</div> + +<p>L'évènement <strong><code>DOMContentLoaded</code></strong> est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bouillonne</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui (bien que spécifié comme évènement simple non annulable)</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Propriété de gestion de l’évènement</th> + <td>Aucune</td> + </tr> + </tbody> +</table> + +<p>Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord <code>load</code> là où <code>DOMContentLoaded</code> serait plus approprié.</p> + +<p>Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">(en) JavaScript asynchrone</a> et <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">(en) optimiser le chargement des feuilles de styles</a>. Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Usage_simple">Usage simple</h3> + +<pre class="brush: js">document.addEventListener('DOMContentLoaded', (event) => { + console.log('DOM fully loaded and parsed'); +}); +</pre> + +<h3 id="Retarde_DOMContentLoaded">Retarde DOMContentLoaded</h3> + +<pre class="brush: html"><script> + document.addEventListener('DOMContentLoaded', (event) => { + console.log('DOM fully loaded and parsed'); + }); + +for( let i = 0; i < 1000000000; i++) +{} // This synchronous script is going to delay parsing of the DOM, + // so the DOMContentLoaded event is going to launch later. +</script> +</pre> + +<h3 id="Vérifie_que_le_contenu_si_le_chargement_est_déjà_fini">Vérifie que le contenu si le chargement est déjà fini</h3> + +<p>L'évènement <code>DOMContentLoaded</code> peut-être déclenché avant que le script soit exécuté, donc il vaut mieux vérifier avant d'ajouter un écouteur d'évènement.</p> + +<pre class="brush: js">function doSomething() { + console.info('DOM loaded'); +} + +if (document.readyState === 'loading') { // Loading hasn't finished yet + document.addEventListener('DOMContentLoaded', doSomething); +} else { // `DOMContentLoaded` has already fired + doSomething(); +} +</pre> + +<h3 id="Démonstration">Démonstration</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="controls"> + <button id="reload" type="button">Reload</button> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +#reload { + height: 2rem; +} + +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const log = document.querySelector('.event-log-contents'); +const reload = document.querySelector('#reload'); + +reload.addEventListener('click', () => { + log.textContent =''; + window.setTimeout(() => { + window.location.reload(true); + }, 200); +}); + +window.addEventListener('load', (event) => { + log.textContent = log.textContent + 'load\n'; +}); + +document.addEventListener('readystatechange', (event) => { + log.textContent = log.textContent + `readystate: ${document.readyState}\n`; +}); + +document.addEventListener('DOMContentLoaded', (event) => { + log.textContent = log.textContent + `DOMContentLoaded\n`; +}); + +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p> + +<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">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Document.DOMContentLoaded_event")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Évènements similaires: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}} et {{domxref("Window/unload_event", "unload")}}</li> + <li>Cet évènement sur la cible {{domxref("Window")}}: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}</li> +</ul> diff --git a/files/fr/web/api/document/drag_event/index.html b/files/fr/web/api/document/drag_event/index.html new file mode 100644 index 0000000000..7bd2710641 --- /dev/null +++ b/files/fr/web/api/document/drag_event/index.html @@ -0,0 +1,313 @@ +--- +title: drag +slug: Web/API/Document/drag_event +translation_of: Web/API/Document/drag_event +--- +<div>{{APIRef}}</div> + +<p>L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes)</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("DragEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Continuer l'opération drag & drop.</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> + +<style> + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } +</style> + +<script> + var dragged; + + /* Les événements sont déclenchés sur les objets glissables */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // Stocke une référence sur l'objet glissable + dragged = event.target; + // transparence 50% + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // reset de la transparence + event.target.style.opacity = ""; + }, false); + + /* Les événements sont déclenchés sur les cibles du drop */ + document.addEventListener("dragover", function( event ) { + // Empêche default d'autoriser le drop + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + /* reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent */ + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // Empêche l'action par défaut (ouvrir<span class="short_text" id="result_box" lang="fr"><span> comme lien pour certains éléments)</span></span> + event.preventDefault(); + // Déplace l'élément traîné vers la cible du drop sélectionnée + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false); +</script> +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> + <li><a href="http://jsfiddle.net/zfnj5rv4/">Demo</a></li> +</ul> diff --git a/files/fr/web/api/document/dragend_event/index.html b/files/fr/web/api/document/dragend_event/index.html new file mode 100644 index 0000000000..74508d8303 --- /dev/null +++ b/files/fr/web/api/document/dragend_event/index.html @@ -0,0 +1,316 @@ +--- +title: dragend +slug: Web/API/Document/dragend_event +translation_of: Web/API/Document/dragend_event +--- +<p>L'événement <strong>dragend</strong> est déclenché lorsque une opération de glissement est terminée (en relâchant le bouton de la souris ou en appuyant sur la touche Echap).</p> + +<h2 id="Informations_généralesEdit">Informations générales<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Events/animationend$edit#Informations_g%C3%A9n%C3%A9rales"><span>Edit</span></a></h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("DragEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Varie</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> + +<style> + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } +</style> + +<script> + <span>var dragged; + + /* </span>Les événements sont déclenchés sur les objets glissables<span> */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // </span>Stocke une référence sur l'objet glissable<span> + dragged = event.target; + // </span>transparence 50%<span> + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // </span>reset de la transparence<span> + event.target.style.opacity = ""; + }, false); + + /* </span>Les événements sont déclenchés sur les cibles du drop<span> */ + document.addEventListener("dragover", function( event ) { + // </span>Empêche default d'autoriser le drop<span> + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span> + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + // r</span>eset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent<span> + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span> + event.preventDefault(); + // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span> + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false);</span> +</script> +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>10</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Avec Gecko, <strong>dragend</strong> n'est pas envoyé si la source du nœud est déplacée ou supprimée durant l'opération de glissement (par ex. durant un événement <strong>drop</strong> ou <strong>dragover</strong>). Voir {{bug("460801")}}.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<p> </p> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> + +<p> </p> diff --git a/files/fr/web/api/document/dragenter_event/index.html b/files/fr/web/api/document/dragenter_event/index.html new file mode 100644 index 0000000000..50739f9415 --- /dev/null +++ b/files/fr/web/api/document/dragenter_event/index.html @@ -0,0 +1,314 @@ +--- +title: dragenter +slug: Web/API/Document/dragenter_event +translation_of: Web/API/Document/dragenter_event +--- +<div>{{APIRef}}</div> + +<p>L'événement <strong>dragenter</strong> est déclenché lorsqu'un élément glissé ou une sélection de texte entre dans une cible de drop valide.</p> + +<h2 id="Informations_généralesEdit">Informations générales<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Events/animationend$edit#Informations_g%C3%A9n%C3%A9rales"><span>Edit</span></a></h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("DragEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">La sélection immédiate de l'utilisateur (l'élément présentement indiqué par l'utilisateur comme cible pour le drop), ou l'élément {{HTMLElement("body")}}.</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> + +<style> + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } +</style> + +<script> + <span>var dragged; + + /* </span>Les événements sont déclenchés sur les objets glissables<span> */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // </span>Stocke une référence sur l'objet glissable<span> + dragged = event.target; + // </span>transparence 50%<span> + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // </span>reset de la transparence<span> + event.target.style.opacity = ""; + }, false); + + /* </span>Les événements sont déclenchés sur les cibles du drop<span> */ + document.addEventListener("dragover", function( event ) { + // </span>Empêche default d'autoriser le drop<span> + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span> + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + // r</span>eset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent<span> </span><span> + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span> + event.preventDefault(); + // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span> + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false);</span> +</script> +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblités_navigateurs">Compatiblités navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>10</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <span id="summary_alias_container"><span id="short_desc_nonedit_display">L'événement <strong>dragenter</strong> est déclenché deux fois quand la zone de drop est parente de draggable ou gissable elle même. Voir </span></span>{{bug("804036")}}.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> diff --git a/files/fr/web/api/document/dragleave_event/index.html b/files/fr/web/api/document/dragleave_event/index.html new file mode 100644 index 0000000000..ef32a3fe75 --- /dev/null +++ b/files/fr/web/api/document/dragleave_event/index.html @@ -0,0 +1,310 @@ +--- +title: dragleave +slug: Web/API/Document/dragleave_event +translation_of: Web/API/Document/dragleave_event +--- +<p>L'événement <strong>dragleave </strong>est déclenché lorsqu'un élément glissé ou une sélection de texte quitte une cible de dépôt valide.</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> + +<style> + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } +</style> + +<script> + <span>var dragged; + + /* </span>Les événements sont déclenchés sur les objets glissables <span>*/ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // </span>Stocke une référence sur l'objet glissable<span> + dragged = event.target; + // </span>transparence 50%<span> + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // </span>reset de la transparence<span> + event.target.style.opacity = ""; + }, false); + + /* </span>Les événements sont déclenchés sur les cibles du drop <span>*/ + document.addEventListener("dragover", function( event ) { + // </span>Empêche default d'autoriser le drop<span> + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span> + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + //</span> reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent <span> + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span> + event.preventDefault(); + // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span> + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false);</span> +</script> +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> diff --git a/files/fr/web/api/document/dragover_event/index.html b/files/fr/web/api/document/dragover_event/index.html new file mode 100644 index 0000000000..2efc385956 --- /dev/null +++ b/files/fr/web/api/document/dragover_event/index.html @@ -0,0 +1,313 @@ +--- +title: dragover +slug: Web/API/Document/dragover_event +translation_of: Web/API/Document/dragover_event +--- +<div>{{APIRef}}</div> + +<p>L'événement <strong>dragover </strong>est déclenché lorsqu'un élément ou une sélection de texte est glissé jusqu'à une cible de dépôt valide (toutes les 100ms)</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Reset l'opération de glissement courante à "none"</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span> + <span class="operator token"><</span>div id<span class="operator token">=</span><span class="string token">"draggable"</span> draggable<span class="operator token">=</span><span class="string token">"true"</span> ondragstart<span class="operator token">=</span><span class="string token">"event.dataTransfer.setData('text/plain',null)"</span><span class="operator token">></span> + This div is draggable + <span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> +<span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> +<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> +<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> +<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> + +<span class="operator token"><</span>style<span class="operator token">></span> + #draggable <span class="punctuation token">{</span> + width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span> + height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span> + text<span class="operator token">-</span>align<span class="punctuation token">:</span> center<span class="punctuation token">;</span> + background<span class="punctuation token">:</span> white<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="punctuation token">.</span>dropzone <span class="punctuation token">{</span> + width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span> + height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span> + background<span class="punctuation token">:</span> blueviolet<span class="punctuation token">;</span> + margin<span class="operator token">-</span>bottom<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span> + padding<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="operator token"><</span><span class="operator token">/</span>style<span class="operator token">></span> + +<span class="operator token"><</span>script<span class="operator token">></span> + <span class="keyword token">var</span> dragged<span class="punctuation token">;</span> + + <span class="comment token">/* Les événements sont déclenchés sur les objets glissables */</span> + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drag"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragstart"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Stocke une référence sur l'objet glissable</span> + dragged <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">;</span> + <span class="comment token">// transparence 50%</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="punctuation token">.</span><span class="number token">5</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragend"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// reset de la transparence</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">/* Les événements sont déclenchés sur les cibles du drop */</span> + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragover"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Empêche default d'autoriser le drop</span> + event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragenter"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"purple"</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragleave"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent </span> + <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drop"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Empêche l'action par défaut (ouvrir comme lien pour certains éléments)</span> + event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">// Déplace l'élément traîné vers la cible du drop sélectionnée</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> + dragged<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="operator token"><</span><span class="operator token">/</span>script<span class="operator token">></span></code></pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> + +<p> </p> diff --git a/files/fr/web/api/document/dragstart_event/index.html b/files/fr/web/api/document/dragstart_event/index.html new file mode 100644 index 0000000000..fb43328e8b --- /dev/null +++ b/files/fr/web/api/document/dragstart_event/index.html @@ -0,0 +1,315 @@ +--- +title: dragstart +slug: Web/API/Document/dragstart_event +translation_of: Web/API/Document/dragstart_event +--- +<p>L'événement <strong>dragstart </strong>est déclenché lorsque l'utilisateur glisse un élément ou une sélection de texte.</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Initie l'opération de glisser-déposer</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple：dropzone">Exemple：dropzone</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css"> #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js"> var dragged; + + /* Les événements sont déclenchés sur les objets glissables */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // Stocke une référence sur l'objet glissable + dragged = event.target; + // transparence 50% + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // reset de la transparence + event.target.style.opacity = ""; + }, false); + + /* Les événements sont déclenchés sur les cibles du drop */ + document.addEventListener("dragover", function( event ) { + // Empêche default d'autoriser le drop + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) + event.preventDefault(); + // Déplace l'élément traîné vers la cible du drop sélectionnée + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false);</pre> + +<p>{{ EmbedLiveSample('Example：dropzone') }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> diff --git a/files/fr/web/api/document/drop_event/index.html b/files/fr/web/api/document/drop_event/index.html new file mode 100644 index 0000000000..a67eb0684b --- /dev/null +++ b/files/fr/web/api/document/drop_event/index.html @@ -0,0 +1,313 @@ +--- +title: drop +slug: Web/API/Document/drop_event +translation_of: Web/API/Document/drop_event +--- +<div>{{APIRef}}</div> + +<p>L'événement <strong>drop </strong>est déclenché lorsqu'un élément ou une sélection de texte est déposé sur une cible de dépôt valide.</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;"><a href="https://developer.mozilla.org/fr/docs/Web/API/Document" title="Toute page web chargée dans un navigateur web a son propre objet document. Cet objet sert de point d'entrée au contenu de la page et apporte des fonctions générales au document."><code>Document</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/API/Element" title="Ce chapitre fournit une brève référence des méthodes, propriétés et évènements généraux disponibles pour la plupart des éléments HTML et XML au sein du DOM des navigateurs utilisant Gecko."><code>Element</code></a></dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Varie</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span> + <span class="operator token"><</span>div id<span class="operator token">=</span><span class="string token">"draggable"</span> draggable<span class="operator token">=</span><span class="string token">"true"</span> ondragstart<span class="operator token">=</span><span class="string token">"event.dataTransfer.setData('text/plain',null)"</span><span class="operator token">></span> + Cette div peut être glissée + <span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> +<span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> +<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> +<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> +<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> + +<span class="operator token"><</span>style<span class="operator token">></span> + #draggable <span class="punctuation token">{</span> + width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span> + height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span> + text<span class="operator token">-</span>align<span class="punctuation token">:</span> center<span class="punctuation token">;</span> + background<span class="punctuation token">:</span> white<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="punctuation token">.</span>dropzone <span class="punctuation token">{</span> + width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span> + height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span> + background<span class="punctuation token">:</span> blueviolet<span class="punctuation token">;</span> + margin<span class="operator token">-</span>bottom<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span> + padding<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="operator token"><</span><span class="operator token">/</span>style<span class="operator token">></span> + +<span class="operator token"><</span>script<span class="operator token">></span> + <span class="keyword token">var</span> dragged<span class="punctuation token">;</span> + + <span class="comment token">/* Les événements sont déclenchés sur les objets glissables */</span> + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drag"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragstart"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Stocke une référence sur l'objet glissable</span> + dragged <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">;</span> + <span class="comment token">// transparence 50%</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="punctuation token">.</span><span class="number token">5</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragend"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// réinitialisation de la transparence</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">/* Les événements sont déclenchés sur les cibles du drop */</span> + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragover"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Empêche le comportement par défaut afin d'autoriser le drop</span> + event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragenter"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"purple"</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragleave"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// réinitialisation de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent </span> + <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drop"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// Empêche l'action par défaut (ouvrir comme lien pour certains éléments)</span> + event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">// Déplace l'élément traîné vers la cible du drop sélectionnée</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> + dragged<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span> + event<span class="punctuation token">.</span>target<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="operator token"><</span><span class="operator token">/</span>script<span class="operator token">></span></code></pre> + +<p> </p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Première définition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> diff --git a/files/fr/web/api/document/elementfrompoint/index.html b/files/fr/web/api/document/elementfrompoint/index.html new file mode 100644 index 0000000000..d715bfad7a --- /dev/null +++ b/files/fr/web/api/document/elementfrompoint/index.html @@ -0,0 +1,52 @@ +--- +title: document.elementFromPoint +slug: Web/API/Document/elementFromPoint +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint +--- +<p>{{ ApiRef() }}</p> +<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<p>Renvoie l'élément visible au point donné, spécifié relativement au point supérieur gauche visible dans le document.</p> +<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<pre class="eval"><i>element</i> = document.elementFromPoint(<i>x</i>,<i>y</i>); +</pre> +<p>where</p> +<ul> + <li><code>element</code> est un objet <a href="fr/DOM/element">element</a>.</li> + <li><code>x</code> et <code>y</code> spécifient les coordonnées à vérifier.</li> +</ul> +<h3 id="Exemple" name="Exemple">Exemple</h3> +<pre><html> +<head> +<title>Exemple d'utilisation d'elementFromPoint</title> + +<script type="text/javascript"> + +function changeColor(newColor) +{ + elem = document.elementFromPoint(2, 2); + elem.style.color = newColor; +} +</script> +</head> + +<body> +<p id="para1">Un peu de texte ici</p> +<button onclick="changeColor('blue');">bleu</button> +<button onclick="changeColor('red');">rouge</button> +</body> +</html> +</pre> +<h3 id="Notes" name="Notes">Notes</h3> +<p>Si l'élément au point spécifié appartient à un autre document (par exemple, les sous-document d'un iframe), l'élément dans le DOM du document appelant (l'iframe lui-même) est renvoyé. Si l'élément au point donné est anonyme ou du contenu généré par XBL, comme la barre de défilement d'une boîte de texte, le premier élément parent non anonyme (par exemple, la boîte de texte) est renvoyé.</p> +<p>Si le point spécifié est en dehors de la portion visible du document ou que l'une ou l'autre des coordonnées est négative, le résultat est <code>NULL</code>.</p> +<p>{{ Note("Les appelants qui sont des documents XUL devraient attendre que l\'évènement <code>onload</code> se soit déclenché avant d\'appeler cette méthode.") }}</p> +<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<ul> + <li>Spécification préliminaire : <code><a class="external" href="http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint">elementFromPoint</a></code></li> +</ul> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/document.elementFromPoint", "es": "es/DOM/document.elementFromPoint", "ja": "ja/DOM/document.elementFromPoint" } ) }}</p> diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.html b/files/fr/web/api/document/enablestylesheetsforset/index.html new file mode 100644 index 0000000000..d6fb8bc63f --- /dev/null +++ b/files/fr/web/api/document/enablestylesheetsforset/index.html @@ -0,0 +1,59 @@ +--- +title: Document.enableStyleSheetsForSet() +slug: Web/API/Document/enableStyleSheetsForSet +tags: + - API + - Activation + - CSS + - DOM + - Feuilles de styles + - Méthode +translation_of: Web/API/Document/enableStyleSheetsForSet +--- +<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p> + +<p>Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de feuilles de styles en cours et désactive toutes les autres (à l'exception de celles sans titre qui sont toujours activées).</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval">document.enableStyleSheetsForSet(<em>name</em>) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Le nom des feuilles de styles à activer. Toutes les feuilles de styles dont le titre correspond à ce nom seront activées, tandis que toutes celles possédant un autre titre seront désactivées. Spécifiez une chaîne vide dans le paramètre <code>name</code> pour supprimer toutes les feuilles de styles alternatives et préférées (mais pas les feuilles de styles persistantes, c'est-à-dire, celles sans attribut <code>title</code> (<em>titre</em>)).</dd> +</dl> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>Les correspondances de titre sont sensibles à la casse.</li> + <li>L'appel de cette méthode avec un <code>name</code> <code>null</code> n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous <strong>devez</strong> utiliser "", la chaîne vide.</li> + <li>Les feuilles de styles qui n'ont pas de titre ne sont jamais affectées par cette méthode.</li> + <li>Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}.</li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre>document.enableStyleSheetsForSet("Some style sheet set name"); +</pre> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{ domxref("Stylesheet") }}</li> + <li>{{ domxref("document.styleSheets") }}</li> + <li>{{ domxref("document.lastStyleSheetSet") }}</li> + <li>{{ domxref("document.preferredStyleSheetSet") }}</li> + <li>{{ domxref("document.selectedStyleSheetSet") }}</li> + <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li> + <li><a href="https://developer.mozilla.org/fr/docs/Archive/Standards_du_Web/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes" title="en/Correctly Using Titles With External Stylesheets">Utiliser des titres corrects avec des feuilles de styles externes</a></li> +</ul> diff --git a/files/fr/web/api/document/evaluate/index.html b/files/fr/web/api/document/evaluate/index.html new file mode 100644 index 0000000000..51130c63be --- /dev/null +++ b/files/fr/web/api/document/evaluate/index.html @@ -0,0 +1,163 @@ +--- +title: document.evaluate +slug: Web/API/Document/evaluate +tags: + - API + - DOM + - Méthode + - Reference + - XPath +translation_of: Web/API/Document/evaluate +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>La méthode <code><strong>evaluate()</strong></code> renvoie un {{domxref("XPathResult")}} basé sur une expression <a href="https://developer.mozilla.org/fr/docs/XPath" title="XPath">XPath</a> et d'autres paramètres donnés.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var xpathResult = document.evaluate( + xpathExpression, + contextNode, + namespaceResolver, + resultType, + result +);</pre> + +<ul> + <li><code>xpathExpression</code> est une chaîne de caractères représentant le XPath à évaluer.</li> + <li><code>contextNode</code> spécifie le noeud de contexte pour la requête (voir <a class="external external-icon" href="http://www.w3.org/TR/xpath" rel="freelink">XPath specification</a>) . Il est courant de transmettre un document en tant que nœud de contexte.</li> + <li><code>namespaceResolver</code> est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. <code>null</code> est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé.</li> + <li><code>resultType</code> est un nombre entier qui correspond au type de résultat <code>XPathResult</code> à retourner. Utilisez des <a href="#Types_de_resultats">propriétés de constantes nommées</a>, comme <code>XPathResult.ANY_TYPE</code> du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9.</li> + <li><code>result</code> est un <code>XPathResult</code> existant à utiliser pour les résultats. <code>null</code> est le plus commun et va créer un nouveau XPathResult</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js line-numbers language-js"><code class="language-js"> var headings = document . evaluate ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null); + /* Cherche le document pour tout élément h2. + * Le résultat sera probablement un itérateur de noeuds non ordonné. */ + var thisHeading = headings . iterateNext ( ) ; + var alertText = "Level 2 headings in this document are:\n" ; + while ( thisHeading ) { + alertText + = thisHeading . textContent + "\n" ; + thisHeading = headings . iterateNext ( ) ; + } + alert ( alertText ) ; // Alerte le texte de tout élément h2 </code></pre> + +<p>Note : dans l'exemple ci-dessus, un XPath plus verbeux est préféré aux raccourcis communs tels que <code>//h2</code>. Généralement, des sélecteurs XPath plus spécifiques, comme dans l'exemple ci-dessus, améliorent de façon significative les performances, en particulier pour les documents très volumineux. C'est parce que l'évaluation de la requête ne perd pas de temps à visiter des noeuds inutiles. L'utilisation de // est généralement lente car elle visite tous les nœuds de la racine et tous les sous-nœuds à la recherche de correspondances possibles.</p> + +<p>Une optimisation supplémentaire peut être obtenue en utilisant soigneusement le paramètre de contexte. Par exemple, si vous savez que le contenu que vous recherchez se trouve quelque part dans la balise body, vous pouvez utiliser ceci :</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">document . evaluate ( " . //h2", document.body, null, XPathResult.ANY_TYPE, null); </code></pre> + +<p>Remarquez ci-dessus, <code>document.body</code> a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le <code>"."</code> est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant <code>//h2</code>), la requête démarrera à partir du noeud racine ( <code>html</code>) ce qui serait plus inutile.)</p> + +<p>Voir <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript" title="Introduction to using XPath in JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a> pour plus d'informations.</p> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>Les expressions XPath peuvent être évaluées sur les documents HTML et XML.</li> + <li>Lors de l'utilisation de document.evaluate() dans FF2 ; dans FF3, il faut utiliser someXMLDoc.evaluate() si l'on évalue quelque chose d'autre que le document actuel.</li> +</ul> + +<h2 id="Types_de_résultats">Types de résultats</h2> + +<p>Ce sont des valeurs prises en charge pour le paramètre <code>resultType</code> de la méthode <code>evaluate</code> :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Type de résultat</td> + <td class="header">Valeur</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>ANY_TYPE</code></td> + <td>0</td> + <td>Quel que soit le type, résulte naturellement de l'expression donnée.</td> + </tr> + <tr> + <td><code>NUMBER_TYPE</code></td> + <td>1</td> + <td>Un ensemble de résultats contenant un seul nombre. Utile, par exemple, dans une expression XPath utilisant la fonction count().</td> + </tr> + <tr> + <td><code>STRING_TYPE</code></td> + <td>2</td> + <td>Un ensemble de résultats contenant une seule chaîne de caractères.</td> + </tr> + <tr> + <td><code>BOOLEAN_TYPE</code></td> + <td>3</td> + <td>Un ensemble de résultats contenant une seule valeur booléenne. Utile pour, par exemple, une expression XPath utilisant la fonction not().</td> + </tr> + <tr> + <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td> + <td>4</td> + <td>Un ensemble de résultats contenant tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document.</td> + </tr> + <tr> + <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td> + <td>5</td> + <td>Un ensemble de résultats contenant tous les noeuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .</td> + </tr> + <tr> + <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>6</td> + <td>Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document .</td> + </tr> + <tr> + <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>7</td> + <td>Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .</td> + </tr> + <tr> + <td><code>ANY_UNORDERED_NODE_TYPE</code></td> + <td>8</td> + <td>Un ensemble de résultats contenant un seul nœud correspondant à l'expression. Le noeud n'est pas nécessairement le premier noeud du document qui correspond à l'expression.</td> + </tr> + <tr> + <td><code>FIRST_ORDERED_NODE_TYPE</code></td> + <td>9</td> + <td>Un ensemble de résultats contenant le premier nœud du document qui correspond à l'expression.</td> + </tr> + </tbody> +</table> + +<p>Les résultats des types <code>NODE_ITERATOR</code> contiennent des références aux noeuds du document. La modification d'un nœud invalidera l'itérateur. Après avoir modifié un nœud, tenter de parcourir les résultats entraînera une erreur.</p> + +<p>Les résultats des types <code>NODE_SNAPSHOT</code> sont des instantanés, qui sont essentiellement des listes de nœuds correspondants. Vous pouvez apporter des modifications au document en modifiant les nœuds de capture instantanée. La modification du document n'invalide pas l'instantané. Toutefois, si le document est modifié, l'instantané peut ne pas correspondre à l'état actuel du document, car les nœuds peuvent avoir été déplacés, modifiés, ajoutés ou supprimés.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td> + <td>{{Spec2("DOM3 XPath")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("api.Document.evaluate")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createExpression" title="DOM/document.createExpression">DOM : document.createExpression</a></li> + <li><a href="https://developer.mozilla.org/fr/Add-ons/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li> + <li><a href="http://codepen.io/johan/full/ckFgn">Vérifier le support du navigateur</a></li> +</ul> diff --git a/files/fr/web/api/document/execcommand/index.html b/files/fr/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..0828ac309b --- /dev/null +++ b/files/fr/web/api/document/execcommand/index.html @@ -0,0 +1,397 @@ +--- +title: document.execCommand +slug: Web/API/Document/execCommand +tags: + - API + - Commandes + - DOM + - Exécution + - Méthodes +translation_of: Web/API/Document/execCommand +--- +<p>{{ApiRef("DOM")}}<br> + Lorsqu'un document HTML est passé à <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/designMode">designMode</a></code>, l'objet document expose la méthode <strong><code>execCommand</code></strong> qui permet d'exécuter des commandes pour manipuler le contenu de la zone modifiable, telle que les éléments <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/input">form inputs</a> ou <code><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/contenteditable">contentEditable</a></code> .</p> + +<p>La plupart des commandes affectent la <a href="https://developer.mozilla.org/fr/docs/Web/API/Selection">sélection</a> du document (gras, italique, etc.), tandis que d'autres ajoutent de nouveaux éléments (ajout d'un lien) ou affectent une ligne entière (indentation). Lorsque vous utilisez <code>contentEditable</code>, l'appel <code>execCommand()</code> affectera l'élément modifiable actuellement actif.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre><em>bool</em> = document.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>)</pre> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Un {{jsxref('Boolean')}} qui est à <code>false</code> <em>(faux)</em> si la commande n'est pas supportée ou désactivée.</p> + +<div class="note"> +<p><strong> </strong><span id="result_box" lang="fr"><span><strong>Note :</strong> Ne renvoie <code>true</code> <em>(vrai)</em> que dans le contexte d'une interaction utilisateur. Ne pas utiliser la valeur de retour pour vérifier le support du navigateur avant d'appeler une commande.</span></span></p> +</div> + +<h3 id="Paramètres">Paramètres</h3> + +<p><code><strong>aCommandName</strong></code><br> + {{domxref("DOMString")}} spécifie le nom de la commande à exécuter . Voir {{anch("Commands")}} pour la liste des commandes possibles .</p> + +<p><strong><code>aShowDefaultUI</code></strong><br> + Un {{jsxref("Boolean")}} indiquant si l'interface utilisateur par défaut doit être affichée. Ceci n'est pas implémenté par Mozilla.</p> + +<p><strong><code>aValueArgument</code></strong><br> + Pour les commandes qui nécessitent un argument , il s'agit d'une {{domxref ("DOMString")}} <em>(chaîne de caractères)</em> fournissant ces informations. Par exemple, <code>insertImage</code> requière l'URL de l'image à insérer. Spécifiez <code>null </code>si aucun argument n'est nécessaire.</p> + +<h3 id="Commandes"><a id="Commands" name="Commands">Commandes</a></h3> + +<p><code><strong>backColor</strong></code><br> + Change la couleur d'arrière-plan du document. En mode <code>styleWithCss</code>, il affecte plutôt la couleur de fond du bloc contenant. Cela nécessite une chaîne de valeurs {{cssxref ("<color>")}} pour être transmise en tant qu'argument de valeur. Notez que Internet Explorer utilise cette option pour définir la couleur d'arrière-plan du texte.</p> + +<p><code><strong>bold</strong></code><br> + Ajoute ou enlève l'affichage <code>bold</code> de la sélection ou au point d'insertion. Internet Explorer utilise la balise {{HTMLElement("strong")}} au lieu de {{HTMLElement("b")}}.</p> + +<p><strong><code>contentReadOnly</code></strong><br> + Rend le contenu du document en lecture seule ou modifiable. Cela nécessite qu'un booléen <code>true</code> / <code>false</code> soit transmis en tant qu'argument de valeur. (Non pris en charge par Internet Explorer.)</p> + +<p><strong><code>copy</code></strong><br> + Copie la sélection courante dans le presse papier. Les conditions d'activation de ce comportement varient d'un navigateur à l'autre et ont évolué au fil du temps. Vérifiez la table de compatibilité pour déterminer si vous pouvez l'utiliser dans votre cas.</p> + +<p><code><strong>createLink</strong></code><br> + Crée un lien d'ancrage à partir de la sélection, uniquement s'il existe une sélection. Cela nécessite que la chaîne URI HREF soit transmise en tant qu'argument de valeur. L'URI doit contenir au moins un caractère unique, qui peut être un espace blanc. (Internet Explorer créera un lien avec une valeur URI <code>null</code>.)</p> + +<p><code><strong>cut</strong></code><br> + Coupe et copie la sélection courante dans le presse papier. Les conditions d'activation de ce comportement varient d'un navigateur à l'autre et ont évolué au fil du temps. Vérifiez la <a href="#Compatibilité des navigateurs">table de compatibilité</a> pour déterminer si vous pouvez l'utiliser dans votre cas.</p> + +<p><code><strong>decreaseFontSize</strong></code><br> + Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou du point d'insertion (Non pris en charge par Internet Explorer).</p> + +<dl> + <dt><code>defaultParagraphSeparator</code></dt> + <dd>Change le séparateur de paragraphes utilisé lorsque de nouveaux paragraphes sont créés dans les zones de textes modifiables. Voir <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Contenu_editable#Differences_in_markup_generation">Contenu éditable</a> pour plus de détails.</dd> +</dl> + +<p><code><strong>delete</strong></code><br> + Supprime la sélection courante</p> + +<p><strong><code>enableInlineTableEditing</code></strong><br> + Active ou désactive les commandes d'insertion et de suppression des lignes et des colonnes du tableau. (Non pris en charge par Internet Explorer.)</p> + +<p><code><strong>enableObjectResizing</strong></code><br> + Active ou désactive les poignées de redimensionnement des images et autres objets redimensionnables. (Non pris en charge par Internet Explorer.)</p> + +<p><code><strong>fontName</strong></code><br> + Modifie le nom de police de la sélection ou du point d'insertion. Cela nécessite une chaîne de nom de police (tel qu'<code>"Arial"</code>) à transmettre comme argument de valeur.</p> + +<p><code><strong>fontSize</strong></code><br> + Modifie la taille de police pour la sélection ou au point d'insertion. Cela nécessite que la taille d'une police HTML (<code>1</code>-<code>7</code>) soit transmise en tant qu'argument de valeur.</p> + +<p><code><strong>foreColor</strong></code><br> + Modifie une couleur de police pour la sélection ou au point d'insertion. Cela nécessite qu'une chaîne de valeurs de couleur soit transmise en tant qu'argument de valeur.</p> + +<p><code><strong>formatBlock</strong></code><br> + Ajoute une balise HTML style bloc autour de la ligne contenant la sélection en cours, en remplaçant l'élément bloc contenant la ligne si elle existe (dans Firefox, BLOCKQUOTE est l'exception - il enroule tout élément bloc contenant). Nécessite la saisie d'une chaîne de nom d'étiquette comme argument de valeur. Pratiquement toutes les étiquettes de style de bloc peuvent être utilisées (par exemple "{{HTMLElement("h1")}}", "{{HTMLElement("p")}}", "{{HTMLElement("dl")}}", "{{HTMLElement("blockquote")}}"). (Internet Explorer ne prend en charge que les balises de titre <code>H1</code> - <code>H6</code>, <code>ADDRESS</code> et <code>PRE</code>, qui doivent également inclure les délimiteurs de balises <>, tels que <code>"<H1>"</code>.)</p> + +<p><code><strong>forwardDelete</strong></code><br> + Supprime le caractère avant la position du <a href="http://en.wikipedia.org/wiki/Cursor_%28computers%29">curseur</a>. Il est le même que frapper la touche de suppression.</p> + +<p><code><strong>heading</strong></code><br> + Ajoute une balise de titre autour d'une ligne de sélection ou d'insertion. Nécessite que la chaîne de nom d'étiquette soit transmise en tant qu'argument de valeur (c'est-à-dire "{{HTMLElement("<code>H1</code>")}}", "{{HTMLElement("<code>H6</code>")}}"). (Non pris en charge par Internet Explorer et Safari.)</p> + +<p><code><strong>hiliteColor</strong></code><br> + Modifie la couleur d'arrière-plan de la sélection ou du point d'insertion. Nécessite une chaîne de valeurs de couleur à transmettre comme argument de valeur. <code>UseCSS</code> doit être à <code>true</code> (<em>vrai</em>) pour que cela fonctionne. (Non pris en charge par Internet Explorer.)</p> + +<p><code><strong>increaseFontSize</strong></code><br> + Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou au point d'insertion. (Non pris en charge par Internet Explorer.)</p> + +<p><code><strong>indent</strong></code><br> + Décale la ligne contenant le point de sélection ou d'insertion. Dans Firefox, si la sélection s'étend sur plusieurs lignes à différents niveaux d'indentation, seules les lignes les moins indentées de la sélection seront indentées.</p> + +<p><code><strong>insertBrOnReturn</strong></code><br> + Contrôle si la touche Entrée insère une balise br ou divise l'élément de bloc courant en deux. (Non pris en charge par Internet Explorer.)</p> + +<p><strong><code>insertHorizontalRule</code></strong><br> + Insère une ligne horizontale au point d'insertion. (Supprime la sélection)</p> + +<p><code><strong>insertHTML</strong></code><br> + Insère une chaîne HTML au point d'insertion (supprime la sélection). Nécessite une chaîne HTML valide à transmettre en tant qu'argument de valeur. (Non pris en charge par Internet Explorer.)</p> + +<p><code><strong>insertImage</strong></code><br> + Insère une image au point d'insertion (supprime la sélection). Nécessite l'image SRC URI chaîne à passer comme un argument de valeur. L'URI doit contenir au moins un caractère unique, qui peut être un espace blanc. (Internet Explorer créera un lien avec une valeur URI nulle.)</p> + +<p><code><strong>insertOrderedList</strong></code><br> + Crée une <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/ol">liste ordonnée numérotée</a> pour la sélection ou le point d'insertion.</p> + +<p><code><strong>insertUnorderedList</strong></code><br> + Crée une <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/ul">liste non triée à puces</a> pour la sélection ou au point d'insertion.</p> + +<p><code><strong>insertParagraph</strong></code><br> + Insère un <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/p">paragraphe</a> autour de la sélection ou de la ligne en cours. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.)</p> + +<p><code><strong>insertText</strong></code><br> + Insère le texte brut donné au point d'insertion (supprime la sélection).</p> + +<p><code><strong>italic</strong></code><br> + Active / désactive l'italique pour la sélection ou le point d'insertion. (Internet Explorer utilise la balise {{HTMLElement("em")}} au lieu de {{HTMLElement("i")}}).</p> + +<p><code><strong>justifyCenter</strong></code><br> + Centre le point de sélection ou d'insertion.</p> + +<p><code><strong>justifyFull</strong></code><br> + Justifie le point de sélection ou d'insertion.</p> + +<p><code><strong>justifyLeft</strong></code><br> + Justifie le point de sélection ou d'insertion à gauche.</p> + +<p><code><strong>justifyRight</strong></code><br> + Justifie à droite la sélection ou le point d'insertion.</p> + +<p><code><strong>outdent</strong></code><br> + Augmente la ligne contenant le point de sélection ou d'insertion.</p> + +<p><code><strong>paste</strong></code><br> + Colle le contenu du Presse-papiers au point d'insertion (remplace la sélection en cours). La fonctionnalité Presse-papiers doit être activée dans le fichier de préférences <em>user.js</em>. Voir [1].</p> + +<p><code><strong>redo</strong></code><br> + Rétablit la commande d'annulation précédente.</p> + +<p><code><strong>removeFormat</strong></code><br> + Supprime tout le formatage de la sélection en cours.</p> + +<p><code><strong>selectAll</strong></code><br> + Sélectionne tout le contenu de la zone modifiable.</p> + +<p><code><strong>strikeThrough</strong></code><br> + Active ou désactive le barré pour la sélection ou le point d'insertion.</p> + +<p><code><strong>subscript</strong></code><br> + Active ou désactive l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/sub">élément de souscription</a> sur la sélection ou au point d'insertion.</p> + +<p><code><strong>superscript</strong></code><br> + Active / désactive l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/sup">élément de mise en exposant</a> pour la sélection ou le point d'insertion.</p> + +<p><code><strong>underline</strong></code><br> + Active ou désactive l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/u">élément d'annotation non textuelle</a> pour la sélection ou le point d'insertion.</p> + +<p><code><strong>undo</strong></code><br> + Annule la dernière commande exécutée.</p> + +<p><code><strong>unlink</strong></code><br> + Supprime l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/a">élément d'ancrage</a> de l'hyperlien sélectionné.</p> + +<p><code><strong>useCSS</strong></code><strong> {{Deprecated_inline}}</strong><br> + Active / désactive l'utilisation de balises HTML ou CSS pour le balisage généré. Nécessite un argument booléen vrai / faux comme argument de valeur. REMARQUE : Cet argument est logiquement inverse (c.-à-d. utilise <code>false</code> pour utiliser CSS, <code>true</code> pour utiliser HTML). (Non pris en charge par Internet Explorer.) Cela a été obsolète; Utilisez plutôt la commande <code>styleWithCSS</code>.</p> + +<p><code><strong>styleWithCSS</strong></code><br> + Remplace la commande <code>useCSS</code><em> </em>; argument fonctionne comme prévu, c'est-à-dire <code>true</code> modifie / génère des attributs de <code>style</code> dans le balisage, <code>false</code> génère des éléments de mise en forme.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Un <a href="http://codepen.io/netsi1964/full/QbLLGW/">exemple d'utilisation</a> sur CodePen.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs"><a id="Compatibilité des navigateurs" name="Compatibilité des navigateurs"></a>Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop" style="display: block;"> +<div id="compat-desktop"> +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>insertBrOnReturn</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>copy</code>/<code>cut</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(41)}}</td> + <td>9</td> + <td>29</td> + <td>10</td> + </tr> + <tr> + <td><code>defaultParagraphSeparator</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ClearAuthenticationCache</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>6</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>insertBrOnReturn</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>copy</code>/<code>cut</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>defaultParagraphSeparator</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ClearAuthenticationCache</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + </div> + </div> + +<div id="compat-mobile" style="display: none;"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>insertBrOnReturn</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>copy</code>/<code>cut</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Avant Firefox 41, la capacité du presse-papiers devait être activée dans le fichier de préférences user.js. Voir <a href="https://developer.mozilla.org/fr/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences">Un bref guide des préférences Mozilla</a> pour plus d'informations. Si la commande n'était pas prise en charge ou activée, <code>execCommand</code> déclenchait une exception au lieu de renvoyer <code>false</code>. Dans Firefox 41 et versions ultérieures, la capacité du presse-papiers est activée par défaut dans n'importe quel gestionnaire d'événements capable de faire apparaître une fenêtre (scripts semi-approuvés), mais aucun contenu web ne peut lire le presse-papier. Les extensions web peuvent <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions/interagir_avec_le_presse_papier">interagir avec le presse-papier</a>.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="https://developer.mozilla.org/fr/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> <span class="short_text" id="result_box" lang="fr"><span>avec des bugs liés</span></span> à <code>document.execCommand</code>.{{CompatUnknown}}</li> +</ul> diff --git a/files/fr/web/api/document/exitfullscreen/index.html b/files/fr/web/api/document/exitfullscreen/index.html new file mode 100644 index 0000000000..a5c8172182 --- /dev/null +++ b/files/fr/web/api/document/exitfullscreen/index.html @@ -0,0 +1,120 @@ +--- +title: Document.exitFullscreen() +slug: Web/API/Document/exitFullscreen +tags: + - API + - Affichage + - DOM + - Méthodes + - Plein écran +translation_of: Web/API/Document/exitFullscreen +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p>La méthode <code><strong>Document.exitFullscreen()</strong></code> extrait le document du mode plein écran ; elle est utilisée pour inverser les effets d'un appel au mode plein écran réalisé avec la méthode {{domxref("Element.requestFullscreen()")}}.</p> + +<div class="note"><strong>Note :</strong> Si un autre élément était précédemment en mode plein écran lorsque l'élément en cours a été placé en mode plein écran, cet élément précédent reprend le mode plein écran. Une "pile" d'éléments en plein écran est maintenue par le navigateur à cette fin.</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">document.exitFullscreen(); +</pre> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js">// Click bascule en mode plein écran +document.onclick = function (event) { + if (document.fullscreenElement) { + document.exitFullscreen() + } else { + document.documentElement.requestFullscreen() + } +};</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(45)}} (unprefixed)</td> + <td>{{CompatGeckoDesktop("9.0")}} as <code>mozCancelFullScreen</code><sup>[1]</sup><br> + {{CompatGeckoDesktop("47.0")}}<sup>[1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android Webkit</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(45)}} (unprefixed)</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(45)}} (unprefixed)</td> + <td>{{CompatGeckoMobile("9.0")}} as <code>mozCancelFullScreen</code><sup>[1]</sup><br> + {{CompatGeckoMobile("47.0")}}<sup>[1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La "pile" du mode plein écran qui permet d'annuler le plein écran pour un élément et de le restaurer pour un élément précédent automatiquement, a été implémentée dans Gecko 11.0 {{geckoRelease("11.0")}}.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Using_full_screen_mode" title="en/DOM/Using full-screen mode">Utiliser le mode plein écran</a></li> + <li>{{ domxref("Element.requestFullscreen()") }}</li> + <li>{{ domxref("Document.exitFullscreen()") }}</li> + <li>{{ domxref("Document.fullscreen") }}</li> + <li>{{ domxref("Document.fullscreenElement") }}</li> + <li>{{ cssxref(":fullscreen") }}</li> + <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li> +</ul> diff --git a/files/fr/web/api/document/exitpointerlock/index.html b/files/fr/web/api/document/exitpointerlock/index.html new file mode 100644 index 0000000000..3337e00ae7 --- /dev/null +++ b/files/fr/web/api/document/exitpointerlock/index.html @@ -0,0 +1,109 @@ +--- +title: Document.exitPointerLock() +slug: Web/API/Document/exitPointerLock +tags: + - API + - DOM + - Experimental + - Méthode + - Reference +translation_of: Web/API/Document/exitPointerLock +--- +<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> + +<p>La méthode <strong><code>exitPointerLock()</code></strong> permet de relâcher un pointeur de façon asynchrone lorsque le pointeur était auparavant mobilisé par la méthode {{domxref("Element.requestPointerLock()")}}.</p> + +<p>Pour connaître le succès ou l'échec de cette requête, il faut surveiller les évènements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">document.exitPointerLock(); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','l#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extension de l'interface <code>Document</code></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Prise en charge sans préfixe</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(50)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Document.pointerLockElement")}}</li> + <li>{{domxref("Element.requestPointerLock()")}}</li> + <li><a href="/fr/docs/WebAPI/Pointer_Lock">L'API <em>Pointer Lock</em></a></li> +</ul> diff --git a/files/fr/web/api/document/featurepolicy/index.html b/files/fr/web/api/document/featurepolicy/index.html new file mode 100644 index 0000000000..4c2dbbe9ba --- /dev/null +++ b/files/fr/web/api/document/featurepolicy/index.html @@ -0,0 +1,47 @@ +--- +title: Document.featurePolicy +slug: Web/API/Document/featurePolicy +tags: + - API + - Document + - Feature Policy + - Feature-Policy + - Reference +translation_of: Web/API/Document/featurePolicy +--- +<p>{{APIRef("Feature Policy")}}</p> + +<p>La propriété en lecture seule <strong><code>featurePolicy</code></strong> de l'interface {{domxref("Document")}} retourne l'interface {{domxref("FeaturePolicy")}}, qui fournit une API permettant de consulter facilement les règles de fonctionnalités appliquées sur un document spécifique.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="notranslate">var <var>policy</var> = <var>iframeElement</var>.featurePolicy</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un objet {{domxref("FeaturePolicy")}} pouvant être utilisé pour consulter les paramètres de Feature Policy appliqués au document.</p> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Feature Policy")}}</td> + <td>{{Spec2("Feature Policy")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Document.featurePolicy")}}</p> diff --git a/files/fr/web/api/document/forms/index.html b/files/fr/web/api/document/forms/index.html new file mode 100644 index 0000000000..c892b63976 --- /dev/null +++ b/files/fr/web/api/document/forms/index.html @@ -0,0 +1,116 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - API + - DOM + - Document + - Formulaires + - Propriétés +translation_of: Web/API/Document/forms +--- +<div>{{APIRef("DOM")}}</div> + +<p>La propriété <code>forms</code> de {{domxref("Document")}} retourne une collection ({{domxref("HTMLCollection")}}) des éléments {{HTMLElement("form")}} présents dans le document actuel.</p> + +<div class="note"> +<p><strong>Note :</strong> De même, vous pouvez accéder à une liste des éléments d'entrée utilisateur d'un formulaire à l'aide de la propriété {{domxref ("HTMLFormElement.elements")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><var>collection</var> = document.forms;</pre> + +<h3 id="Example" name="Example">Valeur</h3> + +<p>Un objet {{domxref("HTMLCollection")}} listant tous les formulaires du document. Chaque élément de la collection est un {{domxref("HTMLFormElement")}} représentant un seul élément <code><form></code>.</p> + +<h2 id="Example" name="Example">Exemples</h2> + +<h3 id="Example" name="Example">Récupérer les informations d'un formulaire</h3> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> + +<head> +<title>document.forms example</title> +</head> + +<body> + +<form id="robby"> + <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> +</form> + +<form id="dave"> + <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> +</form> + +<form id="paul"> + <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /> +</form> + +</body> +</html> +</pre> + +<h3 id="Accéder_à_un_élément_contenu_dans_un_formulaire">Accéder à un élément contenu dans un formulaire</h3> + +<pre class="brush: js">var selectForm = document.forms[index]; +var selectFormElement = document.forms[index].elements[index]; +</pre> + +<h3 id="Specification" name="Specification">Accéder aux formulaires nommés</h3> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></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>title</span><span class="punctuation token">></span></span>document.forms example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</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>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>login<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>submit<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Log in<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</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="keyword token">var</span> loginForm <span class="operator token">=</span> document<span class="punctuation token">.</span>forms<span class="punctuation token">.</span>login<span class="punctuation token">;</span> <span class="comment token">// Ou document.forms['login']</span> + loginForm<span class="punctuation token">.</span>elements<span class="punctuation token">.</span>email<span class="punctuation token">.</span>placeholder <span class="operator token">=</span> <span class="string token">'test@example.com'</span><span class="punctuation token">;</span> + loginForm<span class="punctuation token">.</span>elements<span class="punctuation token">.</span>password<span class="punctuation token">.</span>placeholder <span class="operator token">=</span> <span class="string token">'password'</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>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="Specification" name="Specification">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="See_Also" name="See_Also">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires">Formulaires HTML</a></li> + <li>{{HTMLElement("form")}} et l'interface {{domxref("HTMLFormElement")}}</li> +</ul> diff --git a/files/fr/web/api/document/fullscreenchange_event/index.html b/files/fr/web/api/document/fullscreenchange_event/index.html new file mode 100644 index 0000000000..ca78a615cd --- /dev/null +++ b/files/fr/web/api/document/fullscreenchange_event/index.html @@ -0,0 +1,85 @@ +--- +title: fullscreenchange +slug: Web/API/Document/fullscreenchange_event +translation_of: Web/API/Document/fullscreenchange_event +--- +<p>L'événement <strong><code>onfullscreenchange</code></strong> est déclenché lorsque le navigateur alterne entre le mode fenêtré et plein écran.</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>L'élément recevant l'événement.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Le type de l'événement.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Indique si l'événement bubble habituellement ou non.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Indique si l'événement est annulable ou non.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush:js;">// Noter que l'API est toujours vendor-prefixed dans les navigateurs l'implémentant +document.addEventListener("fullscreenchange", function( event ) { + + // L'objet event ne porte pas l'information à propos du mode plein écran + // Cependant, il est possible de la trouver à travers l'API fullscreen + if ( document.fullscreen ) { + + // La cible de l'événement est toujours le document, + // mais il est possible de retrouver l'élément fullscreen à travers l'API + document.fullscreenElement; + } + +});</pre> + +<h2 id="Evénements_liés">Evénements liés</h2> + +<ul> + <li><a href="/fr/docs/Mozilla_event_reference/fullscreenerror"><code>fullscreenerror</code></a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/DOM/Using_full-screen_mode">Utilisation du mode plein écran</a></li> +</ul> diff --git a/files/fr/web/api/document/fullscreenerror_event/index.html b/files/fr/web/api/document/fullscreenerror_event/index.html new file mode 100644 index 0000000000..5f88b26992 --- /dev/null +++ b/files/fr/web/api/document/fullscreenerror_event/index.html @@ -0,0 +1,69 @@ +--- +title: fullscreenerror +slug: Web/API/Document/fullscreenerror_event +translation_of: Web/API/Document/fullscreenerror_event +--- +<p>L'événement <strong><code>fullscreenerror</code></strong><code> est déclenché lorsque le navigateur ne peut pas entrer en mode plein écran.</code></p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Evénements_liés">Evénements liés</h2> + +<ul> + <li><a href="/fr/docs/Mozilla_event_reference/fullscreenchange"><code>fullscreenchange</code></a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/DOM/Using_full-screen_mode">Utilisation du mode plein écran</a></li> +</ul> diff --git a/files/fr/web/api/document/getboxobjectfor/index.html b/files/fr/web/api/document/getboxobjectfor/index.html new file mode 100644 index 0000000000..97b613781e --- /dev/null +++ b/files/fr/web/api/document/getboxobjectfor/index.html @@ -0,0 +1,42 @@ +--- +title: Document.getBoxObjectFor() +slug: Web/API/Document/getBoxObjectFor +tags: + - API + - Boîte + - DOM + - Méthodes + - Objets +translation_of: Web/API/Document/getBoxObjectFor +--- +<p>{{ ApiRef("DOM") }} {{obsolete_header}}</p> + +<p>Renvoie un <code>boxObject</code> (x, y, largeur, hauteur) pour un élément spécifié.</p> + +<div class="note"><strong>Note :</strong> Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place.</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><var>boxObject</var> = <var>document</var>.getBoxObjectFor(<var>element</var>); +</pre> + +<ul> + <li><code>boxObject</code> est un {{interface("nsIBoxObject")}}.</li> + <li><code>element</code> est un {{domxref("element","DOMElement")}}</li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:js">var myDiv = document.getElementById("myDiv"), + boxObj = document.getBoxObjectFor (myDiv); + +alert ( + "x:" + boxObj.x + + ", y:" + boxObj.y + + ", Width:" + boxObj.width + + ", Height:" + boxObj.height +);</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Spécifié dans <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl" title="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl">nsIXULDocument.idl</a></p> diff --git a/files/fr/web/api/document/getelementbyid/index.html b/files/fr/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..eb8a78ee99 --- /dev/null +++ b/files/fr/web/api/document/getelementbyid/index.html @@ -0,0 +1,148 @@ +--- +title: document.getElementById +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elements + - Identifiant + - Méthodes +translation_of: Web/API/Document/getElementById +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>La méthode <code><strong>getElementById()</strong></code> de {{domxref("Document")}} renvoie un objet {{domxref("Element")}} représentant l'élément dont la propriété {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique.</p> + +<p>Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="brush: js"><em>var element</em> = document.getElementById(<em>id</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>id</code></dt> + <dd>L'ID (<em>identifiant)</em> de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.</dd> + <dt> + <h3 id="Valeur_de_retour">Valeur de retour</h3> + </dt> +</dl> + +<p>Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou <code>null</code> si aucun n'a été trouvé dans le document.</p> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<h3 id="Contenu_HTML">Contenu HTML</h3> + +<pre class="brush: html line-numbers language-html"><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>title</span><span class="punctuation token">></span></span>getElementById example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</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>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>para<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Some text here<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeColor(<span class="punctuation token">'</span>blue<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>blue<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeColor(<span class="punctuation token">'</span>red<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>red<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</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> + +<h3 id="Contenu_JavaScript">Contenu JavaScript</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">changeColor</span><span class="punctuation token">(</span>newColor<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'para'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + elem<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> newColor<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="Notes" name="Notes">Résultat</h3> + +<p>{{ EmbedLiveSample('Example1', 250, 100) }}</p> + +<h2 id="Notes" name="Notes">Notes d'utilisation</h2> + +<p>L'écriture de la lettre capitale de « Id » dans le nom de cette méthode <em>doit</em> être respectée pour que le code fonctionne ; <code>getElementByID()</code> n'est pas valide et ne fonctionnera <em>pas</em>, même si elle semble naturelle.</p> + +<p>Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, <code>getElementById</code> est uniquement disponible comme méthode de l'objet global <code>document</code> et <em>n'est pas</em> disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction.</p> + +<h2 id="Exemple_2">Exemple</h2> + +<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>!doctype</span> <span class="attr-name token">html</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> +<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>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Document<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</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>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parent-id<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello word1<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>hello word2<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello word3<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello word4<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</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="keyword token">var</span> parentDOM <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parent-id'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> test1<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'test1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">//</span></span></code><span class="short_text" id="result_box" lang="fr"><span>erreur de lancement</span></span> <code class="language-html"><span class="language-javascript script token"> + <span class="comment token">//</span></span></code><span id="result_box" lang="fr"><span>TypeError inattendu </span></span><span lang="fr"><span>: parentDOM.getElementById n'est pas une fonction</span></span> <code class="language-html"><span class="language-javascript script token"> + </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>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> + +<p>S'il n'y a pas d'élément avec l'<code>id</code> fourni, cette fonction retourne <code>null</code>. A noter que le paramètre <code>id</code> est sensible à la casse, ainsi<code> document.getElementById("Main")</code> retournera <code>null</code> au lieu de l'élément <code><div id="main"></code> étant donné que "M" et "m" sont différents pour cette méthode.</p> + +<p><strong>Les éléments absents du document</strong> ne sont pas cherchés par <code>getElementById()</code>. Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec <code>getElementById()</code> :</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> element <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">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +element<span class="punctuation token">.</span>id <span class="operator token">=</span> <span class="string token">'testqq'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'testqq'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// el vaudra null !</span></code></pre> + +<p><strong>Les documents non-HTML.</strong> Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut <code>id</code> est défini comme étant de type ID dans les langages courants comme <a href="/fr/XHTML" title="fr/XHTML">XHTML</a> ou <a href="/fr/XUL" title="fr/XUL">XUL</a>. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer <code>null</code>.</p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Définition initiale de l'interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Remplace DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Remplace DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Remplacera DOM 3</td> + </tr> + </tbody> +</table> + +<p>Traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId">getElementById</a></p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer un <em>pull request</em>.</div> + +<p>{{Compat("api.Document.getElementById")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Document")}} référence pour d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir la référence vers des éléments du document.</li> + <li>{{domxref("Document.querySelector()")}} pour utiliser des sélecteurs avec des requêtes comme <code>'div.myclass'</code></li> + <li><a href="/fr/xml/xml:id" title="fr/xml/id">xml:id</a> dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).</li> +</ul> diff --git a/files/fr/web/api/document/getelementsbyclassname/index.html b/files/fr/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..021ce5c742 --- /dev/null +++ b/files/fr/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,92 @@ +--- +title: document.getElementsByClassName +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/getElementsByClassName +--- +<p>{{ Fx_minversion_header(3) }} {{APIRef("DOM")}}</p> + +<p><span id="result_box" lang="fr"><span>Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés.</span> <span>Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine.</span> <span>Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément;</span> <span>il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.</span></span></p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or: +<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre> + +<ul> + <li><var>elements</var> <span id="result_box" lang="fr"><span>est une {{domxref ("HTMLCollection")}} des éléments trouvés.</span></span></li> + <li><var>names</var> est une chaîne représentant le nom de la classe des éléments à trouver.</li> + <li><span id="result_box" lang="fr"><span>getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document.</span> <span>L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.</span></span></li> +</ul> + +<h2 id="Exemples" name="Exemples">Exemples</h2> + +<p>Trouve tous les éléments ayant la classe « test » :</p> + +<pre class="eval"> document.getElementsByClassName('test') +</pre> + +<p>Trouve tous les éléments ayant les classes « rouge » et « test » :</p> + +<pre class="eval"> document.getElementsByClassName('rouge test') +</pre> + +<p>Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :</p> + +<pre class="eval"> document.getElementById('main').getElementsByClassName('test') +</pre> + +<p><span id="result_box" lang="fr"><span>Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode.</span> <span>Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> testElements <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">'test'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> testDivs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>filter<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>testElements<span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>testElement<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">return</span> testElement<span class="punctuation token">.</span>nodeName <span class="operator token">===</span> <span class="string token">'DIV'</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p><span class="comment">XXX writeme == Notes == Une méthode semblable existe pour <code>Element</code></span></p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><span class="short_text" id="result_box" lang="fr"><span>Obtenir la classe des éléments test</span></span></h2> + +<p><span id="result_box" lang="fr"><span>C'est la méthode d'opération la plus couramment utilisée</span></span>.</p> + +<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>!doctype</span> <span class="attr-name token">html</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> +<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>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Document<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</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>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parent-id<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello word1<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>hello word2<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="punctuation token">></span></span>hello word3<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello word4<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</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="keyword token">var</span> parentDOM <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"parent-id"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="keyword token">var</span> test<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//test is not target element</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>test<span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//HTMLCollection[1]</span> + + <span class="keyword token">var</span> testTarget<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span><span class="comment token">//here , this element is target</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>testTarget<span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//<p class="test">hello word2</p></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>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="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + +<p>{{Compat("api.Document.getElementsByClassName")}}</p> + + + +<h2 id="Specification" name="Specification">Spécification</h2> + +<ul> + <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external external-icon">W3C: getElementsByClassName</span></a></li> +</ul> diff --git a/files/fr/web/api/document/getelementsbyname/index.html b/files/fr/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..c8136c8de7 --- /dev/null +++ b/files/fr/web/api/document/getelementsbyname/index.html @@ -0,0 +1,86 @@ +--- +title: document.getElementsByName() +slug: Web/API/Document/getElementsByName +tags: + - API + - DOM + - Document + - HTML + - Méthodes +translation_of: Web/API/Document/getElementsByName +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval"><em>elements</em> = document.getElementsByName(<em>name</em>) +</pre> + +<ul> + <li><code>elements</code> est une collection de {{domxref("NodeList")}}</li> + <li><code>name</code> est la valeur de l'attribut <code>name</code> des éléments.</li> +</ul> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></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>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>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>up<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>down<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</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="keyword token">var</span> up_forms <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByName</span><span class="punctuation token">(</span><span class="string token">"up"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>up_forms<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>tagName<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// retourne "FORM"</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>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="Notes" name="Notes">Notes</h2> + +<p><span id="result_box" lang="fr"><span>L'attribut <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/name">name</a></code> est uniquement applicable aux documents (X) HTML.</span> <span>La méthode renvoie une collection </span></span> {{domxref("NodeList")}} <span lang="fr"><span> en cours qui contient tous les éléments avec une valeur donnée pour l'attribut name, tels que </span></span> {{htmlelement("meta")}} <span lang="fr"><span> ou </span></span> {{htmlelement("object")}} <span lang="fr"><span> ou même si le nom est placé sur des éléments qui ne supportent pas du tout un attribut <code>name</code>.</span></span></p> + +<p><span id="result_box" lang="fr"><span>La méthode <strong>getElementsByName</strong> fonctionne différemment dans différents navigateurs.</span> <span>Dans IE <10, la méthode getElementsByName () renvoie également les éléments qui ont un attribut id avec la valeur spécifiée.</span> <span>Vous devriez donc faire attention à ne pas utiliser la même chaîne pour le nom et l'identifiant.</span></span></p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259">DOM Level 2 HTML : getElementsByName</a> — <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-71555259">traduction en français</a> (non normative)</li> + <li><a href="http://www.whatwg.org/html/#dom-document-getelementsbyname" title="http://www.whatwg.org/html/">HTML5 : getElementsByName</a></li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{domxref("document.getElementById()")}} pour retourner une référence à un élément par son ID</li> + <li>{{domxref("document.getElementsByTagName()")}} pour renvoyer les références sur les éléments avec la balise de nom donnée</li> + <li>{{domxref("document.querySelector()")}} pour des sélecteurs par des requêtes comme <code>'div.myclass'</code></li> +</ul> + +<p> </p> diff --git a/files/fr/web/api/document/getelementsbytagname/index.html b/files/fr/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..268a5a6453 --- /dev/null +++ b/files/fr/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,113 @@ +--- +title: document.getElementsByTagName +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - Elements + - Méthodes +translation_of: Web/API/Document/getElementsByTagName +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p><span id="result_box" lang="fr"><span>Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise donné.</span> <span>Le document complet est recherché, y compris le nœud racine.</span> <span>Le <code>HTMLCollection</code> renvoyée est en direct, ce qui signifie qu'elle se met à jour automatiquement pour rester synchronisée avec l'arborescence DOM sans avoir à rappeler document.getElementsByTagName ().</span></span></p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre> + +<ul> + <li><code>elements</code> est une liste de nœuds (<code>NodeList</code>) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre.</li> + <li><code>nom</code> est une chaîne représentant le nom des éléments. La chaîne spéciale <code>"*"</code> représente « tous les éléments ».</li> +</ul> + +<div class="note"> +<p><strong>Note :</strong> <a href="https://dom.spec.whatwg.org/">La dernière spécification W3C</a> dit que <code>elements</code> est une <code>HTMLCollection</code> ; cependant cette méthode renvoie une {{domxref("NodeList")}} dans les navigateurs WebKit. Voir {{bug(14869)}} pour plus de détails.</p> +</div> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<p><span id="result_box" lang="fr"><span>Dans l'exemple suivant, <code>getElementsByTagName()</code> commence à partir d'un élément parent particulier et effectue une recherche descendante récursive dans le DOM à partir de cet élément parent, en créant une collection de tous les éléments descendants qui correspondent au paramètre de <code>name</code>.</span> <span>Cela démontre à la fois <code>document.getElementsByTagName()</code> et son homologue {{domxref ("Element.getElementsByTagName ()")}}, qui lance la recherche sur un élément spécifique dans l'arbre DOM.</span></span></p> + +<p><span id="result_box" lang="fr"><span>Cliquer sur les boutons utilise <code>getElementsByTagName()</code> pour compter les éléments de paragraphe descendant d'un parent particulier (le document lui-même ou l'un des éléments {{HTMLElement ("div")}} imbriqués).</span></span></p> + +<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></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>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>getElementsByTagName example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</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="keyword token">function</span> <span class="function token">getAllParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> allParas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> num <span class="operator token">=</span> allParas<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in this document'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">function</span> <span class="function token">div1ParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> div1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> div1Paras <span class="operator token">=</span> div1<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> num <span class="operator token">=</span> div1Paras<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in #div1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="keyword token">function</span> <span class="function token">div2ParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> div2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> div2Paras <span class="operator token">=</span> div2<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> num <span class="operator token">=</span> div2Paras<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in #div2'</span><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="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid green <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid blue <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some div1 text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some div1 text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some div1 text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div2<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid red <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some div2 text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some div2 text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>getAllParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + show all p elements in document<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span> <span class="punctuation token">/></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div1ParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + show all p elements in div1 element<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span> <span class="punctuation token">/></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div2ParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + show all p elements in div2 element<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</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="Sp.C3.A9cification" name="Sp.C3.A9cification">Notes</h2> + +<p><span id="result_box" lang="fr"><span>Lorsqu'elle est appelée sur un document HTML, <code>getElementsByTagName()</code> classe son argument avant de continuer.</span> <span>Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML.</span> <span>{{Domxref ("document.getElementsByTagNameNS ()")}} est utile dans ce cas.</span> <span>Voir aussi {{Bug (499656)}}.</span><br> + <br> + <span><code>document.getElementsByTagName()</code> est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.</span></span></p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core : getElementsByTagName</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094">traduction</a> (non normative)</small></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Element.getElementsByTagName()")}}</li> + <li>{{domxref("document.getElementById()")}} pour renvoyer une référence à un élément par son <code>id</code> (<em>identifiant</em>)</li> + <li>{{domxref("document.getElementsByName()")}} pour renvoyer une référence à un élément par son <code>name</code> (<em>nom</em>)</li> + <li>{{domxref("document.querySelector()")}} pour les sélecteurs puissants via des requêtes comme <code>'div.myclass'</code></li> +</ul> diff --git a/files/fr/web/api/document/getelementsbytagnamens/index.html b/files/fr/web/api/document/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..537bc24875 --- /dev/null +++ b/files/fr/web/api/document/getelementsbytagnamens/index.html @@ -0,0 +1,136 @@ +--- +title: Document.getElementsByTagNameNS() +slug: Web/API/Document/getElementsByTagNameNS +tags: + - API + - DOM + - Elements + - Méthodes + - Nom + - XPath +translation_of: Web/API/Document/getElementsByTagNameNS +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>{{ fx_minversion_note("3.6","Voir la <a href='\"/en/DOM/element.getElementsByTagNameNS#Notes\"'>section Notes de element.getElementsByTagNameNS</a> pour les changements qui s'appliquent aussi à cet API dans Firefox 3.6.") }}</p> + +<p>Renvoie une liste d'éléments avec la balise de nom donnée appartenant à l'espace de noms donné. Le document complet est recherché, y compris le noeud racine.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval"><em>elements</em> = document.getElementsByTagNameNS(<em>namespace</em>,<em>name</em>) +</pre> + +<ul> + <li><code>elements</code> est une {{domxref("NodeList")}} (<em>liste de noeud</em>) directe (mais voir le note ci-dessous) d'éléments trouvés dans l'ordre de leur apparition dans l'arbre.</li> + <li><code>namespace</code> l'URI d'espace de noms des éléments à rechercher (voir <code><a href="/en/DOM/Node.namespaceURI" title="En/DOM/Node.namespaceURI">element.namespaceURI</a></code>).</li> + <li><code>name</code> est, soit le nom local des éléments à rechercher, soit la valeur spéciale <code>"*"</code> pour tous les éléments (voir <code><a href="/en/DOM/Node.localName" title="En/DOM/Node.localName">element.localName</a></code>).</li> +</ul> + +<div class="note"><strong>Note :</strong> Tandis que la spécification W3C indique que les <code>elements</code> sont des <code>NodeList</code>, cette méthode renvoie une {{domxref("HTMLCollection")}} dans Gecko et Internet Explorer. Opera retourne une <code>NodeList</code>, mais avec une méthode implémentée <code>namedItem</code>, ce qui la rend similaire à une <code>HTMLCollection</code>. À partir de Janvier 2012, dans les navigateurs WebKit seulement, la valeur retournée est une pure <code>NodeList</code>. Voir <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=14869" title="https://bugzilla.mozilla.org/show_bug.cgi?id=14869">bug 14869</a> pour plus de détails.</div> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Dans l'exemple suivant, <code>getElementsByTagNameNS</code> commence à partir d'un élément parent particulier et cherche dans le DOM récursivement de haut en bas à partir de cet élément parent, les éléments enfants correspondant au paramètre <code>name</code> de la balise.</p> + +<p>Notez que lorsque le noeud sur lequel <code>getElementsByTagName</code> est invoqué n'est pas un noeud <code>document</code>, la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Element/getElementsByTagNameNS" title="en/DOM/element.getElementsByTagNameNS">element.getElementsByTagNameNS</a> est en fait utilisée.</p> + +<p>Pour utiliser l'exemple suivant, il suffit de le copier/coller dans un nouveau fichier enregistré avec l'extension .xhtml.</p> + +<pre class="brush: html"><html xmlns="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"> + +<head> +<title>getElementsByTagNameNS example</title> + +<script type="text/javascript"> + +function getAllParaElems() +{ + var allParas = document.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = allParas.length; + + alert("There are " + num + " &lt;p&gt; elements in this document"); +} + + +function div1ParaElems() +{ + var div1 = document.getElementById("div1") + var div1Paras = div1.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = div1Paras.length; + + alert("There are " + num + " &lt;p&gt; elements in div1 element"); +} + + +function div2ParaElems() +{ + var div2 = document.getElementById("div2") + var div2Paras = div2.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = div2Paras.length; + + alert("There are " + num + " &lt;p&gt; elements in div2 element"); +} + +</script> +</head> + +<body style="border: solid green 3px"> +<p>Some outer text</p> +<p>Some outer text</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Some div1 text</p> + <p>Some div1 text</p> + <p>Some div1 text</p> + + <div id="div2" style="border: solid red 3px"> + <p>Some div2 text</p> + <p>Some div2 text</p> + </div> + </div> + +<p>Some outer text</p> +<p>Some outer text</p> + +<button onclick="getAllParaElems();"> + show all p elements in document</button><br /> + +<button onclick="div1ParaElems();"> + show all p elements in div1 element</button><br /> + +<button onclick="div2ParaElems();"> + show all p elements in div2 element</button> + +</body> +</html> +</pre> + +<h2 id="Potential_Workaround_for_other_browsers_which_do_not_support" name="Potential_Workaround_for_other_browsers_which_do_not_support">Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath</h2> + +<p>Si le navigateur souhaité ne supporte pas XPath, une autre approche (comme traverser le DOM à travers tous ses enfants, identifier toutes les instances de @xmlns, etc.) serait nécessaire pour trouver toutes les balises avec le nom local et l'espace de noms, mais XPath est beaucoup plus rapide. (Pour adapter à Explorer, on pourrait appeler un wrapper XPath au lieu du XPath dans la fonction ci-dessous (comme Explorer supporte XPath avec une API différente), comme <a class="external" href="http://www.davidflanagan.com/javascript5/display.php?n=21-10&f=21/10.js">cette classe wrapper</a>.)</p> + +<pre class="brush: js">function getElementsByTagNameNSWrapper (ns, elName, doc, context) { + if (!doc) { + doc = document; + } + if (!context) { + context = doc; + } + + var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); + + var a = []; + for(var i = 0; i < result.snapshotLength; i++) { + a[i] = result.snapshotItem(i); + } + return a; +} +</pre> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p> diff --git a/files/fr/web/api/document/getselection/index.html b/files/fr/web/api/document/getselection/index.html new file mode 100644 index 0000000000..5a0bb35861 --- /dev/null +++ b/files/fr/web/api/document/getselection/index.html @@ -0,0 +1,14 @@ +--- +title: document.getSelection +slug: Web/API/Document/getSelection +tags: + - API + - DOM + - Méthodes + - Reference + - Selection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +--- +<p>{{APIRef("DOM")}}</p> + +<p><span id="result_box" lang="fr"><span>Cette méthode fonctionne de manière identique à la méthode {{domxref ("Window.getSelection()")}} ;</span> elle<span> renvoie un objet {{domxref ("Selection")}} représentant le texte actuellement sélectionné dans le document.</span></span></p> diff --git a/files/fr/web/api/document/hasfocus/index.html b/files/fr/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..4b70cdaf0a --- /dev/null +++ b/files/fr/web/api/document/hasfocus/index.html @@ -0,0 +1,151 @@ +--- +title: document.hasFocus +slug: Web/API/Document/hasFocus +tags: + - API + - DOM + - Focus + - Méthodes + - Reference +translation_of: Web/API/Document/hasFocus +--- +<p>{{ ApiRef() }}</p> + +<p>La méthode <code><strong>Document.hasFocus()</strong></code> retourne une valeur {{jsxref("Boolean")}} <code>true</code> <em>(vrai)</em> indiquant <span id="result_box" lang="fr"><span>si le document ou tout élément à l'intérieur du document a le focus.</span> <span>Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus.</span></span></p> + +<div class="note"> +<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus.</span> <span>Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus.</span></span></p> +</div> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval">focused = document.hasFocus(); +</pre> + +<h3 id="Exemple" name="Exemple">Valeur retournée</h3> + +<p><code>false</code> <em>(faux)</em> si l'élément actif dans le document n'a pas de focus ; <code>true</code><em> (vrai)</em> si l'élément actif dans le document a le focus.</p> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="brush:html;highlight:[17] line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></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>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>TEST<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> +<span class="selector token"><span class="id token">#message</span> </span><span class="punctuation token">{</span> <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span> <span class="punctuation token">}</span> +</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</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="function token">setInterval</span><span class="punctuation token">(</span> checkPageFocus<span class="punctuation token">,</span> <span class="number token">200</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">checkPageFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> info <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"message"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span> document<span class="punctuation token">.</span><span class="function token">hasFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> + info<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"The document has the focus."</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + info<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"The document doesn't have the focus."</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">openWindow</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + window<span class="punctuation token">.</span>open <span class="punctuation token">(</span> + <span class="string token">"http://developer.mozilla.org/"</span><span class="punctuation token">,</span> + <span class="string token">"mozdev"</span><span class="punctuation token">,</span> + <span class="string token">"width=640,height=300,left=150,top=260"</span> + <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>h1</span><span class="punctuation token">></span></span>JavaScript hasFocus example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>message<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Waiting for user action<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>openWindow()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Open a new window<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</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="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>30</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1.9") }}</td> + <td>6.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.9") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Page_Visibility_API">Using the Page Visibility API</a></li> +</ul> + +<p> </p> + +<div class="noinclude"> </div> + +<p> </p> diff --git a/files/fr/web/api/document/head/index.html b/files/fr/web/api/document/head/index.html new file mode 100644 index 0000000000..1fa6aa3fa3 --- /dev/null +++ b/files/fr/web/api/document/head/index.html @@ -0,0 +1,75 @@ +--- +title: document.head +slug: Web/API/Document/head +tags: + - DOM + - Document + - HTML5 +translation_of: Web/API/Document/head +--- +<h2 id="Summary" name="Summary">Résumé</h2> +<p>Retourne l'élément {{HTMLElement("head")}} du document courant. S'il y a plus d'un élément <head>, le premier est retourné.</p> +<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<pre class="syntaxbox"><em>var objRef</em> = document.head; +</pre> +<h2 id="Example" name="Example">Exemple</h2> +<pre class="brush: js">// en HTML: <head id="my-document-head"> +var aHead = document.head; + +alert(aHead.id); // "my-document-head"; + +alert( document.head === document.querySelector("head") ); // true +</pre> +<h2 id="Example" name="Example">Notes</h2> +<p><code>document.head</code> est en lecture seule. Essayer d'assigner une valeur à cettre propriété échouera en silence ou lancera une <code>TypeError</code> si le mode strict d'ECMAScript est activé dans un navigateur Gecko.</p> +<h2 id="Compatibilité">Compatibilité</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Specification" name="Specification">Spécification</h2> +<ul> + <li><a href="http://www.w3.org/TR/html5/dom.html#dom-tree-accessors" title="http://www.w3.org/TR/html5/dom.html#dom-document-head">HTML5: DOM Tree Accessors</a></li> +</ul> diff --git a/files/fr/web/api/document/height/index.html b/files/fr/web/api/document/height/index.html new file mode 100644 index 0000000000..8f69f2dbbc --- /dev/null +++ b/files/fr/web/api/document/height/index.html @@ -0,0 +1,44 @@ +--- +title: Document.height +slug: Web/API/Document/height +translation_of: Web/API/Document/height +--- +<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> + +<div class="note"> +<p><strong>Note:</strong> Apparu avec {{Gecko("6.0")}},<code> document.height n'est plus supporté</code>. Utilisez à la place <code>document.body.clientHeight</code>. Voir {{domxref("element.clientHeight")}}.</p> +</div> + +<h2 id="Résumé">Résumé</h2> + +<p>Retourne la hauteur de l'objet {{domxref("document")}}. Dans la plupart des cas, ceci est égal à l'élément {{HTMLElement("body")}} du document courant.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>height_value</em> = document.height +</pre> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js">// alert document height +alert(document.height); +</pre> + +<h2 id="Alternatives">Alternatives</h2> + +<pre class="syntaxbox">document.body.clientHeight +document.documentElement.clientHeight +document.documentElement.scrollHeight +</pre> + +<h2 id="Spécification">Spécification</h2> + +<p>HTML5</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("document.width")}}</li> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("Element.scrollHeight")}}</li> +</ul> diff --git a/files/fr/web/api/document/hidden/index.html b/files/fr/web/api/document/hidden/index.html new file mode 100644 index 0000000000..d4b6aaf64b --- /dev/null +++ b/files/fr/web/api/document/hidden/index.html @@ -0,0 +1,43 @@ +--- +title: Document.hidden +slug: Web/API/Document/hidden +translation_of: Web/API/Document/hidden +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>La propriété <code><strong>Document.hidden</strong></code> retourne un Booléen qui indique si la page est considérée cachée ou pas.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>boolean</em> = document.hidden</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush:js;">document.addEventListener("visibilitychange", function() { + console.log( document.hidden ); + // Modifier le comportement... +}); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">Le tableau de compatibilité de cette page est généré par des données structurées. Si vous voulez contribuer, venez jeter un oeil ici <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous votre requête pull.</div> + +<p>{{Compat("api.Document.hidden")}}</p> diff --git a/files/fr/web/api/document/images/index.html b/files/fr/web/api/document/images/index.html new file mode 100644 index 0000000000..56ae7fba48 --- /dev/null +++ b/files/fr/web/api/document/images/index.html @@ -0,0 +1,28 @@ +--- +title: document.images +slug: Web/API/Document/images +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Document/images +--- +<p>{{ ApiRef() }}</p> +<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2> +<p><a class="internal" href="/fr/DOM/document.images" title="Fr/DOM/Document.images"><code>document.images</code></a> renvoie une collection des images du document HTML courant.</p> +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<pre class="eval"><a class="internal" href="/fr/DOM/HTMLCollection" title="fr/DOM/HTMLCollection"><em>HTMLCollection</em></a> = <a class="internal" href="/fr/DOM/document.images" title="Fr/DOM/Document.images">document.images</a> +</pre> +<h2 id="Exemple" name="Exemple">Exemple</h2> +<pre class="eval">var listeimg = document.images; +for(var i = 0; i < listeimg.length; i++) { + if(listeimg[i] == "banner.gif") { + // l'image banner a été trouvée + } +} +</pre> +<h2 id="Notes" name="Notes">Notes</h2> +<p><a class="internal" href="/fr/DOM/document.images" title="Fr/DOM/Document.images"><code>document.images</code></a> fait partie du DOM HTML, et fonctionne uniquement pour les document HTML.</p> +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<ul> + <li>Spécification DOM Level 2 HTML : <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">HTMLDocument.images</a></li> + <li>Traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117">HTMLDocument.images</a></li> +</ul> diff --git a/files/fr/web/api/document/implementation/index.html b/files/fr/web/api/document/implementation/index.html new file mode 100644 index 0000000000..5f7d1a8bff --- /dev/null +++ b/files/fr/web/api/document/implementation/index.html @@ -0,0 +1,47 @@ +--- +title: document.implementation +slug: Web/API/Document/implementation +tags: + - API + - DOM + - Propriétés + - Reference +translation_of: Web/API/Document/implementation +--- +<h2 id="Résumé">Résumé</h2> + +<p>Retourne un objet {{domxref("DOMImplementation")}} associé avec le document courant.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>DOMImpObj</var> = document.implementation; +</pre> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> modName <span class="operator token">=</span> <span class="string token">"HTML"</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> modVer <span class="operator token">=</span> <span class="string token">"2.0"</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> conformTest <span class="operator token">=</span> document<span class="punctuation token">.</span>implementation<span class="punctuation token">.</span><span class="function token">hasFeature</span><span class="punctuation token">(</span> modName<span class="punctuation token">,</span> modVer <span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="function token">alert</span><span class="punctuation token">(</span> <span class="string token">"DOM "</span> <span class="operator token">+</span> modName <span class="operator token">+</span> <span class="string token">" "</span> <span class="operator token">+</span> modVer <span class="operator token">+</span> <span class="string token">" supported?: "</span> <span class="operator token">+</span> conformTest <span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge.</span></code></pre> + +<p><span id="result_box" lang="fr"><span>Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la </span></span> <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2">Conformance Section</a> <span lang="fr"><span> DOM niveau 2.</span></span></p> + +<h2 id="Notes"><span lang="fr"><span>Notes</span></span></h2> + +<p><span id="result_box" lang="fr"><span>La recommandation DOM niveau 1 du W3C ne spécifiait que la méthode <code>hasFeature</code>, qui est un moyen de déterminer si un module DOM est supporté par un navigateur (voir l'exemple ci-dessus et ce que votre agent utilisateur prétend prendre en charge ?).</span> <span>Si disponibles, d'autres méthodes <code>DOMImplementation</code> fournissent des services pour contrôler des choses en dehors d'un document unique.</span> <span>Par exemple, l'interface <code>DOMImplementation</code> inclut une méthode <code>createDocumentType</code> avec laquelle des DTD peuvent être créées pour un ou plusieurs documents gérés par l'implémentation.</span></span></p> + +<h2 id="Spécifications"><span lang="fr"><span>Spécifications</span></span></h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490">DOM Level 2 Core: implementation</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490">DOM Level 3 Core: implementation</a></li> +</ul> + +<h2 id="Notes_propres_à_Gecko">Notes propres à Gecko</h2> + +<ul> + <li><span id="result_box" lang="fr"><span>À partir de Gecko 19.0 {{geckoRelease ("19.0")}} la méthode {{domxref ("DOMImplementation.hasFeature", "hasFeature")}} retournera toujours true.</span></span></li> +</ul> diff --git a/files/fr/web/api/document/importnode/index.html b/files/fr/web/api/document/importnode/index.html new file mode 100644 index 0000000000..32bef68f4a --- /dev/null +++ b/files/fr/web/api/document/importnode/index.html @@ -0,0 +1,92 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +tags: + - API + - Copie + - Document + - Méthodes + - Noeud + - Reference +translation_of: Web/API/Document/importNode +--- +<p>{{APIRef("DOM")}}</p> + +<p><span id="result_box" lang="fr"><span>La méthode {{domxref ("Document")}} <code>importNode()</code> crée une nouvelle copie du {{domxref ("Node")}} ou {{domxref ("DocumentFragment")}} spécifié à partir d'un autre document, afin qu'il puisse</span> <span>être inséré dans le document actuel.</span> <span>Il n'est pas encore inclus dans l'arbre des documents;</span> <span>Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.</span></span></p> + +<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> + +<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>); +</pre> + +<dl> + <dt><code>externalNode</code></dt> + <dd>Le nouveau <code>Node</code> ou <code>DocumentFragment</code> à importer dans le document courant. Après l'importation, le nouveau <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/parentNode" title="DOM/Node.parentNode">parentNode</a></code> du noeud est <code>null</code>, <span id="result_box" lang="fr"><span>car il n'a pas encore été inséré dans l'arborescence du document.</span></span></dd> + <dt><code>deep</code></dt> + <dd>Une valeur booléenne <span id="result_box" lang="fr"><span>qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de <code>externalNode</code>.</span> <span>Si ce paramètre est <code>true</code> (<em>vrai</em>), alors <code>externalNode</code> et tous ses descendants sont copiés;</span> <span>si <code>false</code> <em>(faux)</em>, seul le nœud unique, <code>externalNode</code>, est importé.</span></span></dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> Dans la spécification DOM4, <span id="result_box" lang="fr"><span><code>deep</code> est répertorié en tant qu'argument facultatif.</span> <span>S'il est omis, la méthode agit comme si la valeur de <code>deep</code> était <code>true</code>, par défaut, elle utilisait le clonage profond comme comportement par défaut.</span> <span>Pour créer un clone superficiel, la profondeur doit être définie sur <code>false</code>.</span><br> + <br> + <span>Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de <code>deep</code> était <code>false</code>.</span> <span>Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> à la fois pour la compatibilité en amont et en aval.</span> <span>Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument.</span> <span>À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</span></span></p> +</div> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> iframe <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"iframe"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> oldNode <span class="operator token">=</span> iframe<span class="punctuation token">.</span>contentWindow<span class="punctuation token">.</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myNode"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> newNode <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">importNode</span><span class="punctuation token">(</span>oldNode<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"container"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newNode<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p><span id="result_box" lang="fr"><span>Le noeud d'origine n'est pas supprimé du document d'origine.</span> <span>Le noeud importé est un clone de l'original.</span></span></p> + +<p> </p> + +<p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> (ou adoptés avec <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son ownerDocument (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a>) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes de <a href="/fr/docs/Web/API/Node/ownerDocument" title="La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud."><code>Node.ownerDocument</code></a>, consultez la <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p> + +<p>Gecko n'obligeait pas à utiliser <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son ownerDocument (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9 alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception <code>WRONG_DOCUMENT_ERR</code> est déclenchée (<code>NS_ERROR_DOM_WRONG_DOCUMENT_ERR</code>). implémentation dans le <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener" title="FIXED: WRONG_DOCUMENT_ERR not being thrown">bug 47903</a>.</p> + +<p> </p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("api.Document.importNode")}} </p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("document.adoptNode()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> +</ul> + +<p> </p> diff --git a/files/fr/web/api/document/index.html b/files/fr/web/api/document/index.html new file mode 100644 index 0000000000..fa8a1dd365 --- /dev/null +++ b/files/fr/web/api/document/index.html @@ -0,0 +1,490 @@ +--- +title: document +slug: Web/API/Document +tags: + - API + - DOM + - Document + - Interface + - Reference +translation_of: Web/API/Document +--- +<p>{{ApiRef}}</p> + +<p><span id="result_box" lang="fr"><span>L'interface <strong><code>Document</code></strong> représente n'importe quelle page Web chargée dans le navigateur et sert de point d'entrée dans le contenu de la page Web, qui est l'arborescence DOM.</span> <span>L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} <em>(corps)</em> et {{HTMLElement ("table")}} <em>(tableau)</em>, parmi beaucoup d'autres.</span> <span>Il fournit des fonctionnalités globales au document, comme le moyen d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document.</span></span></p> + +<p>{{inheritanceDiagram}}</p> + +<p><span id="result_box" lang="fr"><span>L'interface Document décrit les propriétés et méthodes communes à tout type de document.</span> <span>En fonction du type de document (HTML, XML, SVG, ...), une API plus grande est disponible : les documents HTML, servis avec le type <code>text/html</code>, implémentent également l'interface {{domxref ("HTMLDocument")}}, alors que</span> l<span>es documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}.</span></span></p> + +<h2 id="Constructeur"><span lang="fr"><span>Constructeur</span></span></h2> + +<dl> + <dt>{{domxref("Document.Document","Document()")}}{{non-standard_inline}}</dt> + <dd>crée un nouvel objet <code>Document</code> .</dd> +</dl> + +<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2> + +<p><em>Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref("EventTarget")}} .</em></p> + +<dl> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>fournit un accès à tous les éléments du document. <span id="result_box" lang="fr"><span>C'est une interface héritée non standard qui ne doit pas être utilisée.</span></span></dd> +</dl> + +<dl> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>utilisé avec {{domxref("document.load")}} pour indiquer une requête asynchrone.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.characterSet")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>renvoie le jeu de caractères utilisé par le document.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>indique si le document est rendu en mode <em>Quirks</em> ou <em>Strict</em>.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Renvoie le type de contenu de l'en-tête MIME du document courant.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt> + <dd>Renvoie le DTD (Document Type Definition) du document courant.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt> + <dd>Renvoie l'{{domxref("Element")}} qui est l'enfant direct du document. Pour les documents HTML, il s'agit normalement de l'élément {{HTMLElement("HTML")}}.</dd> + <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt> + <dd>retroune l'emplacement du document sous la forme d'une chaîne de caractères.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>devrait retourner un objet {{domxref("DOMConfiguration")}} .</dd> + <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt> + <dd><code>true</code> <em>(vrai)</em> quand le document est en {{domxref("Using_full-screen_mode","mode plein écran")}}.</dd> + <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt> + <dd>...</dd> + <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt> + <dd>Renvoie l'implémentation DOM associée au document courant.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. <span id="result_box" lang="fr"><span>A la valeur <code>null</code> jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de </span></span> {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> + <dd>retourne un {{jsxref("Boolean")}} qui est <code>true</code> <em>(vrai)</em> seulement si le document est synthétique, <span id="result_box" lang="fr"><span>tel qu'une image autonome, une vidéo, un fichier audio ou similaire.</span></span></dd> + <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd>L'élément qui est actuellement affiché en mode plein écran pour ce document.</dd> + <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> <em>(vrai)</em> si l'appel {{domxref("Element.mozRequestFullscreen()")}} est réussi dans le document courant.</dd> + <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd><span id="result_box" lang="fr"><span>renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé.</span> <span><code>null</code> si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document.</span></span></dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>renvoie la page de style préférée spécifiée par l'auteur de la page.</dd> + <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>retourne une référence à l'{{domxref("Element")}} qui fait défiler le document.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>renvoie la feuille de style actuellement utilisée.</dd> + <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt> + <dd>Renvoie une liste de tous les objets {{domxref("stylesheet")}}<em> (feuilles de styles)</em> du document courant.</dd> + <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt> + <dd>...</dd> + <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>...</dd> + <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt> + <dd>renvoie une <code>string</code> <em>(chaîne de caractères)</em> <span id="result_box" lang="fr"><span>indiquant l'état de visibilité du document.</span> <span>Les valeurs possibles sont </span></span> <code>visible</code> <span lang="fr"><span>, </span></span> <code>hidden <em>(masqué)</em></code> <span lang="fr"><span>, prerender <em>(pré-rendu)</em> et </span></span> <code>unloaded</code> <em>(</em><span lang="fr"><span><em>déchargées</em>).</span></span></dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>retourne le codage déterminé par une déclaration XML.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>renvoie <code>true</code> si la déclaration XML précise que le document doit être autonome (par exemple, une partie externe de la DTD du contenu du document), sinon <code>false</code> <em>(faux)</em>.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>retourne le numéro de la version spécifié dans la déclaration XML ou <code>"1.0"</code> si la déclaration est absente.</dd> +</dl> + +<p>L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :</p> + +<p>{{page("/fr/docs/Web/API/ParentNode","Propriétés")}}</p> + +<h3 id="Extensions_du_document_HTML">Extensions du document HTML</h3> + +<p>L'interface Document, pour les documents HTML, hérite de l'interface <em>{{domxref("HTMLDocument")}}</em> ou depuis HTML5, est étendue pour eux.</p> + +<dl> + <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt> + <dd>Renvoie l'élément courant qui a la focus.</dd> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>Renvoie ou définit la couleur des liens actifs du corps du document.</dd> + <dt>{{domxref("Document.anchors")}}</dt> + <dd>Renvoie une liste de toutes les ancres du document.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> + <dd>Renvoie une liste ordonnée des "applets" du document.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd><strong>bgColor</strong> renvoie ou définit la couleur d'arrière-plan du document courant.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.body")}}</dt> + <dd><strong>body</strong> renvoie l'élément {{HTMLElement("body")}} du document en cours.</dd> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt> + <dd>Renvoie une référence à l'objet window.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>renvoie ou définit les capacités d'édition <span class="short_text" id="result_box" lang="fr"><span>du document entier.</span></span></dd> + <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt> + <dd>Assigne / renvoie le sens du texte (rtl/ltr) <em>(de gauche à droite / de droite à gauche)</em> du document.</dd> + <dt>{{domxref("Document.domain")}}</dt> + <dd>renvoie ou affecte le domaine de l'élément courant.</dd> + <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt> + <dd>renvoie une liste des objets {{HTMLElement('embed')}} inclus dans le document courant.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>renvoie ou définit la couleur du texte du document courant.</dd> + <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt> + <dd><strong>forms</strong> renvoie une liste des éléments {{HTMLElement("form")}} du document courant</dd> + <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt> + <dd>Renvoie l'élément {{HTMLElement("head")}} du document.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>renvoie ou définit la hauteur du document courant.</dd> + <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt> + <dd>renvoie une liste des images du document courant.</dd> + <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt> + <dd>Renvoie la date de dernière modification du document.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>Renvoie ou définit la couleur des liens du document.</dd> + <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt> + <dd>Renvoie un tableau de tous les liens du document.</dd> + <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt> + <dd>Renvoie l'URI (Uniform Ressource Identifier : <em>identifiant uniforme de ressource</em>) du document courant.</dd> + <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt> + <dd>Renvoie une liste des plugins disponibles.</dd> + <dt>{{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>retourne l'état du chargement du document.</dd> + <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt> + <dd>Renvoie l'URI de la page qui a amené à cette page.</dd> + <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt> + <dd>renvoie tous les éléments {{HTMLElement("script")}} sur le document.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>Renvoie le titre du document courant.</dd> + <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt> + <dd>Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", <em>repère uniforme de ressource</em>) du document courant.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>Renvoie ou définit la couleur des liens visités du document.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Renvoie la largeur du document courant.</dd> +</dl> + +<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3> + +<dl> + <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt> + <dd>représente le code de gestion d'évènements pour l'évènement {{event("afterscriptexecute")}}</dd> + <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt> + <dd>retourne le code de gestion d'évènements pour l'évènement {{event("beforescriptexecute")}} .</dd> + <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt> + <dd>représente le code de gestion d'évènements pour l'évènement {{event("copy")}} .</dd> + <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt> + <dd>représente le code de gestion d'évènements pour l'évènement {{event("cut")}} .</dd> + <dt>{{domxref("Document.onfullscreenchange")}}</dt> + <dd>est un {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé.</dd> + <dt>{{domxref("Document.onfullscreenerror")}}</dt> + <dt>{{domxref("Document.onfullscreenchange")}}</dt> + <dd>est un {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé.</dd> + <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt> + <dd>représente le code de gestion d'évènements pour l'évènement {{event("paste")}} .</dd> + <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>représente le code de gestion d'évènements pour l'évènement {{event("pointerlockchange")}} .</dd> + <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>représente le code de gestion d'évènements pour l'évènement {{event("pointerlockerror")}} .</dd> + <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} .</dd> + <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt> + <dd>est un {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé.</dd> + <dt>{{domxref("Document.onvisibilitychange")}}</dt> + <dd>est un {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé.</dd> + <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt> + <dd>représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} .</dd> +</dl> + +<p>L'interface <code>Document</code> est étendue avec l'interface {{domxref("GlobalEventHandlers")}} :</p> + +<p>{{Page("/fr/docs/Web/API/GlobalEventHandlers", "Propriétés")}}</p> + +<h2 id="Méthodes">Méthodes</h2> + +<p><em><span id="result_box" lang="fr"><span>Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.</span></span></em></p> + +<dl> + <dt>{{domxref("Document.adoptNode()")}}</dt> + <dd><span class="short_text" id="result_box" lang="fr"><span>adopte le noeud d'un document externe.</span></span></dd> + <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>voir {{domxref("Window.captureEvents")}}.</dd> + <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt> + <dd><span id="result_box" lang="fr"><span>obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées.</span></span></dd> + <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt> + <dd><span id="result_box" lang="fr"><span>Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées.</span></span></dd> + <dt>{{domxref("Document.createAttribute()")}}</dt> + <dd>Crée un nouvel objet {{domxref("Attr")}} et le renvoie.</dd> + <dt>{{domxref("Document.createAttributeNS()")}}</dt> + <dd>Crée un nouveau noeud dans l'espace nom donné et le renvoie.</dd> + <dt>{{domxref("Document.createCDATASection()")}}</dt> + <dd>Crée un nouveau nœud CDATA et le renvoie.</dd> + <dt>{{domxref("Document.createComment()")}}</dt> + <dd>Crée un nouveau nœud de commentaire et le renvoie.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>Crée un nouveau fragment de document.</dd> + <dt>{{domxref("Document.createElement()")}}</dt> + <dd>Crée un nouvel élément avec l'étiquette spécifiée.</dd> + <dt>{{domxref("Document.createElementNS()")}}</dt> + <dd>Crée un nouvel élément du type et avec l'URI d'espace de nom spécifiés.</dd> + <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt> + <dd>Crée un nouvel objet de référence à une entité et le renvoie.</dd> + <dt>{{domxref("Document.createEvent()")}}</dt> + <dd>Crée un nouvel évènement.</dd> + <dt>{{domxref("Document.createNodeIterator()")}}</dt> + <dd>crée un objet {{domxref("NodeIterator")}} .</dd> + <dt>{{domxref("Document.createProcessingInstruction()")}}</dt> + <dd>crée un nouvel objet {{domxref("ProcessingInstruction")}} .</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>Crée un objet {{domxref("Range")}} .</dd> + <dt>{{domxref("Document.createTextNode()")}}</dt> + <dd>Crée un nœud de texte.</dd> + <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt> + <dd>crée un objet {{domxref("Touch")}}</dd> + <dt>{{domxref("Document.createTouchList()")}}</dt> + <dd>crée un objet {{domxref("TouchList")}}</dd> + <dt>{{domxref("Document.createTreeWalker()")}}</dt> + <dd>Crée un objet {{domxref("TreeWalker")}} .</dd> + <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt> + <dd>Renvoie l'élément visible aux coordonnées spécifiées.</dd> + <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt> + <dd>Renvoie un tableau de tous les éléments aux coordonnées spécifiées.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt> + <dd>active les feuilles de style pour l'ensemble de feuilles de style spécifié.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>Supprime le verrou du pointeur.</dd> + <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt> + <dd>retourne un tableau de tous les objets {{domxref("Animation")}} actuels, dont les éléments cibles sont les descendants de ce <code>document</code>.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.getElementsByClassName()")}}</dt> + <dd>Renvoie une liste des éléments ayant le nom de classe donné.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.getElementsByTagName()")}}</dt> + <dd>Renvoie une liste des éléments ayant le nom de balise donné.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt> + <dd>Renvoie une liste des éléments du nom de balise et de l'espace de noms spécifiés.</dd> +</dl> + +<dl> + <dt>{{domxref("Document.importNode()")}}</dt> + <dd>Renvoie une copie (un clone) d'un élément provenant d'un document externe.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>remplace les entités, normalise les noeuds de texte, etc.</dd> + <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt> + <dd><span class="short_text" id="result_box" lang="fr"><span>Enregistre un composant Web.</span></span></dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd><span id="result_box" lang="fr"><span>Libère la capture de la souris en cours s'il s'agit d'un élément de ce document.</span></span></dd> + <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>voir {{domxref("Window.releaseEvents()")}}.</dd> + <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>Voir {{domxref("Window.routeEvent()")}}.</dd> + <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd><span id="result_box" lang="fr"><span>Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié.</span></span></dd> +</dl> + +<p>L'interface <code>Document</code> est étendue avec l'interface {{domxref("ParentNode")}} :</p> + +<dl> + <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt> + <dd>retourne une référence d'objet à l'élément identifié.</dd> + <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd><span id="result_box" lang="fr"><span>Renvoie le premier noeud <code>Element</code> dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés.</span></span></dd> + <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés.</dd> +</dl> + +<p>L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator")}} :</p> + +<dl> + <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> + <dd>compile une <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</dd> + <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt> + <dd>crée un objet {{domxref("XPathNSResolver")}} .</dd> + <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> + <dd>évalue l'expression XPath .</dd> +</dl> + +<h3 id="Extensions_pour_les_documents_HTML">Extensions pour les documents HTML</h3> + +<dl> + <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd><span id="result_box" lang="fr"><span>dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien.</span></span></dd> + <dt>{{domxref("document.close()")}}</dt> + <dd><span class="short_text" id="result_box" lang="fr"><span>ferme un flux de document pour l'écriture.</span></span></dd> + <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> + <dd>Sur un document modifiable, exécute une commande de formatage.</dd> + <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt> + <dd>retourne une liste d'éléments ayant le nom donné.</dd> + <dt>{{domxref("document.getSelection()")}}</dt> + <dd>retourne un objet {{domxref("Selection")}} relatif au texte sélectionné dans le document.</dd> + <dt>{{domxref("document.hasFocus()")}}</dt> + <dd>retourne <code>true</code> (vrai) si le focus est actuellement localisé n'importe où sur le document spécifié.</dd> + <dt>{{domxref("document.open()")}}</dt> + <dd>Ouvre un flux pour l'écriture dans le document.</dd> + <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt> + <dd>Renvoie <code>true</code> si la commande de formatage peut être exécutée sur la plage courante.</dd> + <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt> + <dd>Renvoie <code>true</code> si la commande de formatage est dans un état indéterminé sur la plage courante.</dd> + <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt> + <dd>Renvoie <code>true</code> si la commande de formatage a été exécutée sur la plage courante.</dd> + <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt> + <dd>retourne <code>true</code> <em>(vrai)</em> si la commande de formatage est supportée sur la plage courante.</dd> + <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt> + <dd>renvoie la valeur courante de la plage en cours pour une commande de formatage.</dd> + <dt>{{domxref("document.write","document.write(String text)")}}</dt> + <dd>Écrit du texte dans le document.</dd> + <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt> + <dd>Écrit une ligne de texte dans le document.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Ajoute <code>onvisibilitychange.</code></td> + </tr> + <tr> + <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Ajoute <code>onselectstart</code>et <code>onselectionchange</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1','#i-Document','Document')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Définition initiale pour l'interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Remplace DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>remplace DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>en vue de remplacer DOM 3</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Transforme l'interface {{domxref("HTMLDocument")}} en une extension de <code>Document</code></td> + </tr> + <tr> + <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> + <td>{{Spec2('DOM3 XPath')}}</td> + <td>Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document.</td> + </tr> + <tr> + <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Étend l'interface <code>Document</code> avec les attributs <code>visibilityState</code> et <code>hidden</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Étend l'interface <code>Document</code></td> + </tr> + <tr> + <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Étend l'interface <code>Document</code></td> + </tr> + <tr> + <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Étend l'interface <code>Document</code></td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Étend l'interface <code>Document</code></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs_notes">Compatibilité des navigateurs notes</h2> + +<h3 id="Notes_concernant_Firefox">Notes concernant Firefox :</h3> + +<p>Mozilla définit un ensemble de propriétés non-standard créées seulement pour le contenu XUL :</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution.</dd> + <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>(extensions Mozilla seulement) retourne l'objet {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété <span id="result_box" lang="fr"><span>a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect).</span></span></dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>retourne le noeud <span class="short_text" id="result_box" lang="fr"><span>qui est la cible de l'info-bulle actuelle.</span></span></dd> +</dl> + +<p>Mozilla a également défini quelques méthodes non standard :</p> + +<dl> + <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd><span id="result_box" lang="fr"><span>Cette méthode n'a jamais rien fait et a toujours lancé une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.</span></span></dd> + <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>Utiliser la méthode {{domxref("Element.getBoundingClientRect()")}} à la place.</dd> + <dt>{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt> + <dd>charge dynamiquement un <a href="https://developer.mozilla.org/fr/docs/Overlays_XUL" title="XUL_Overlays">XUL overlay</a> . Celui-ci fonctionne seulement dans les documents XUL.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd><span id="result_box" lang="fr"><span>Cette méthode n'a jamais rien fait d'autre que de lancer une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.</span></span></dd> +</dl> + +<h3 id="Notes_concernant_Internet_Explorer"><span lang="fr"><span>Notes concernant Internet Explorer</span></span></h3> + +<p><span lang="fr"><span>Microsoft a défini quelques propriétés non standard :</span></span></p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd><span id="result_box" lang="fr"><span>Retourne la taille en octets du document.</span> <span>À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge.</span> <span>Voir </span></span> <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> +</dl> + +<p><span id="result_box" lang="fr"><span>Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document :</span></span></p> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd><span id="result_box" lang="fr"><span>Pour contourner le problème, <code>document.body.contains ()</code> peut être utilisé.</span></span></dd> +</dl> diff --git a/files/fr/web/api/document/keypress_event/index.html b/files/fr/web/api/document/keypress_event/index.html new file mode 100644 index 0000000000..e0560ef1df --- /dev/null +++ b/files/fr/web/api/document/keypress_event/index.html @@ -0,0 +1,102 @@ +--- +title: keypress +slug: Web/API/Document/keypress_event +tags: + - DOM + - Déprécié + - Evènement + - KeyboardEvent + - Reference +translation_of: Web/API/Document/keypress_event +--- +<div>{{APIRef}} {{deprecated_header}}</div> + +<p><span class="seoSummary">L'évènement <strong><code>keypress</code></strong> est déclenché lorsqu'une touche produisant un caractère est pressée.</span> Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd> ou <kbd>Meta</kbd> ne sont pas concernées.</p> + +<div class="blockIndicator warning"> +<p><strong>Attention !</strong> Cet évènement est déprécié et il faudrait plutôt utiliser <code><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code> ou <code><a href="/fr/docs/Web/API/Document/keydown_event">keydown</a></code>.</p> +</div> + +<table class="properties"> + <thead> + </thead> + <tbody> + <tr> + <th>Interface</th> + <td>{{domxref("KeyboardEvent")}}</td> + </tr> + <tr> + <th>Remonte sur les parents (<em>bubbles</em>)</th> + <td>Oui</td> + </tr> + <tr> + <th>Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th>Action par défaut</th> + <td>Cela peut varier : évènement <code>keypress</code> ; ouverture du système de composition du texte ; évènements <code><a href="/fr/docs/Web/API/Element/blur_event">blur</a></code> et <code><a href="/fr/docs/Web/API/Element/focus_event">focus</a></code> ; évènement <a href="/fr/docs/Web/API/Element/DOMActivate_event"><code>DOMActivate</code> </a>{{deprecated_inline}}; autre évènement.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Ajout_d'un_addEventListener">Ajout d'un <code>addEventListener</code></h3> + +<p>Dans cet exemple, on affiche la valeur de {{domxref("KeyboardEvent.code")}} lorsqu'on appuie sur une touche :</p> + +<pre class="brush: html"><p> + Cliquez dans l'iframe pour lui passer le focus + puis appuyez sur des touches du clavier. +</p> +<p id="log"></p></pre> + +<pre class="brush: js">const log = document.getElementById('log'); + +document.addEventListener('keypress', logKey); + +function logKey(e) { + log.textContent += ` ${e.code}`; +}</pre> + +<p>{{EmbedLiveSample("addEventListener_keypress_example")}}</p> + +<h3 id="Équivalent_onkeypress">Équivalent <code>onkeypress</code></h3> + +<pre class="brush: js">document.onkeypress = logKey;</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-keypress')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Document.keypress_event")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li> + <li>L'interface {{domxref("Element")}} que cet évènement cible</li> + <li>Les évènements associés : + <ul> + <li><code><a href="/fr/docs/Web/API/Document/keydown_event">keydown</a></code></li> + <li><code><a href="/fr/docs/Web/API/Document/keyup_event">keyup</a></code></li> + <li><code><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code></li> + </ul> + </li> +</ul> diff --git a/files/fr/web/api/document/lastmodified/index.html b/files/fr/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..c9f26ad21b --- /dev/null +++ b/files/fr/web/api/document/lastmodified/index.html @@ -0,0 +1,67 @@ +--- +title: Document.lastModified +slug: Web/API/Document/lastModified +translation_of: Web/API/Document/lastModified +--- +<div>{{APIRef("DOM")}}</div> + +<p>Retourne une chaîne de caractère contenant la date et l'heure à laquelle le présent document a été modifié pour la dernière fois.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><var>string</var> = document.lastModified; +</pre> + +<h2 id="Example" name="Example">Exemples</h2> + +<h3 id="Exemple_1_Utilisation_simple">Exemple #1: Utilisation simple</h3> + +<pre class="brush:js">alert(document.lastModified); +// renvoie: 11/28/2015 16:11:15 +</pre> + +<h3 id="Exemple_2_Transformer_lastModified_en_un_objet_de_type_Date">Exemple #2: Transformer <code>lastModified</code> en un objet de type <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a></h3> + +<pre class="brush:js">var oLastModif = new Date(document.lastModified); +</pre> + +<h3 id="Exemple_3_Transformer_lastModified_en_un_nombre_de_millisecondes_passées_depuis_le_1_Janvier_1970_à_000000_heure_locale.">Exemple #3: Transformer <code>lastModified</code> en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale.</h3> + +<pre class="brush:js">var nLastModif = Date.parse(document.lastModified); +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Veuillez noter qu'en tant que chaîne de caractères, <code>lastModified </code>ne peut être <em>facilement </em>utilisé pour des comparaisons entre les dates modifées des documents. Voici un exemple possible qui montre comment afficher une alerte quand la page change (voir aussi: <a href="/en-US/docs/DOM/document.cookie" title="/en-US/docs/DOM/document.cookie">API des cookies en JavaScript</a>):</p> + +<pre class="brush: js">if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) { + document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; + alert("Cette page a changé !"); +}</pre> + +<p>… le même exemple, mais en ignorant la première visite:</p> + +<pre class="brush: js">var + + nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), + nLastModif = Date.parse(document.lastModified); + +if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; + if (isFinite(nLastVisit)) { + alert("Cette page a changé !"); + } +}</pre> + +<div class="note"><strong>Note:</strong> WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local.<br> +(Voir: <a href="https://bugs.webkit.org/show_bug.cgi?id=4363" title="Bug 4363 – document.lastModified returns date in UTC time, but should return it in local time">Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local</a>)</div> + +<p>Si vous voulez savoir <strong>si <em>une page externe</em> a changé, </strong>veuillez lire <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date" title="/en-US/docs/Web/API/document.lastModified">ce paragraphe à propos de l'API <code>XMLHttpRequest()</code></a>.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<p>HTML5</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Document.lastModified")}}</p> diff --git a/files/fr/web/api/document/laststylesheetset/index.html b/files/fr/web/api/document/laststylesheetset/index.html new file mode 100644 index 0000000000..2f24656c13 --- /dev/null +++ b/files/fr/web/api/document/laststylesheetset/index.html @@ -0,0 +1,46 @@ +--- +title: Document.lastStyleSheetSet +slug: Web/API/Document/lastStyleSheetSet +tags: + - API + - DOM + - Feuilles de styles + - Propriétés +translation_of: Web/API/Document/lastStyleSheetSet +--- +<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p> + +<p>Renvoie le dernier jeu de feuilles de styles activé ; cette valeur de la propriété change chaque fois que la propriété {{ domxref("document.selectedStyleSheetSet") }} est modifiée.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval"><em>lastStyleSheetSet</em> = document.lastStyleSheetSet +</pre> + +<p>En retour, <code>lastStyleSheetSet</code> indique le jeu de feuilles de styles qui a été défini le plus récemment. Si le jeu de feuilles de style en cours n'a pas été modifié en définissant {{ domxref("document.selectedStyleSheetSet") }}, la valeur retournée est <code>null</code>.</p> + +<div class="note"><strong>Note :</strong> Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.</div> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush: js">var lastSheetSet = document.lastStyleSheetSet; +if (!lastSheetSet) { + lastSheetSet = "Sheet not yet changed"; +} +console.log("The last sheet set is: " + lastSheetSet); +</pre> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{ domxref("document.preferredStyleSheetSet") }}</li> + <li>{{ domxref("document.selectedStyleSheetSet") }}</li> + <li>{{ domxref("document.styleSheetSets") }}</li> + <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li> +</ul> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> +</ul> diff --git a/files/fr/web/api/document/location/index.html b/files/fr/web/api/document/location/index.html new file mode 100644 index 0000000000..afd9341feb --- /dev/null +++ b/files/fr/web/api/document/location/index.html @@ -0,0 +1,111 @@ +--- +title: Document.location +slug: Web/API/Document/location +tags: + - API + - Document + - HTML DOM + - Propriété + - Reference + - lecture seule +translation_of: Web/API/Document/location +--- +<p><span style="font-size: 14px; line-height: 1.5;">La propriété en lecture seule </span><strong style="font-size: 14px; line-height: 1.5;"><code>Document.location</code></strong><code style="font-size: 14px;"> renvoie un objet</code><span style="font-size: 14px; line-height: 1.5;"> {{domxref("Location")}}, contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL.</span></p> + +<p><span style="font-size: 14px; line-height: 1.5;">Bien que </span><code style="font-size: 14px;">Document.location</code><span style="font-size: 14px; line-height: 1.5;"> soit un objet </span><span style="font-size: 14px; line-height: 1.5;"> </span><code style="font-size: 14px;">Location</code><span style="font-size: 14px; line-height: 1.5;"> en <em>lecture seule</em>, vous pouvez lui assigner un</span><span style="font-size: 14px; line-height: 1.5;"> {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: </span><code style="font-size: 14px;">document.location = 'http://www.example.com'</code><span style="font-size: 14px; line-height: 1.5;"> est un synonyme de </span><code style="font-size: 14px;">document.location.href = 'http://www.example.com'</code><span style="font-size: 14px; line-height: 1.5;">.</span></p> + +<p><span style="font-size: 14px; line-height: 1.5;">Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété </span><span style="font-size: 14px; line-height: 1.5;">{{domxref("document.URL")}} peut également être utilisée.</span></p> + +<p><span style="font-size: 14px; line-height: 1.5;">Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est <em>null</em>.</span></p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><em>locationObj</em> = document.location +document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org' +</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush: js notranslate">console.log(document.location); +// Affiche un string-like +// "http://www.example.com/juicybits.html" dans la console +</pre> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Pas de changement avec {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonction</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonction</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li>L'interface de la valeur renvoyée, {{domxref("Location")}}.</li> + <li>Une information similaire mais attachée au contexte de navigation, {{domxref("Window.location")}}</li> +</ul> diff --git a/files/fr/web/api/document/mozsetimageelement/index.html b/files/fr/web/api/document/mozsetimageelement/index.html new file mode 100644 index 0000000000..1c35bcbcc5 --- /dev/null +++ b/files/fr/web/api/document/mozsetimageelement/index.html @@ -0,0 +1,81 @@ +--- +title: Document.mozSetImageElement() +slug: Web/API/Document/mozSetImageElement +tags: + - API + - Arrière-plan + - CSS + - DOM + - Image + - Méthodes +translation_of: Web/API/Document/mozSetImageElement +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}</p> + +<p>Change l'élément utilisé comme arrière-plan CSS par un arrière-plan avec un ID d'élément d'arrière-plan donné.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval">document.mozSetImageElement(<em>imageElementId</em>, imageElement); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<ul> + <li><code>imageElementId</code> est une chaîne de caractères indiquant le nom d'un élément qui a été spécifié comme une image d'arrière-plan en utilisant la fonction CSS {{ cssxref("-moz-element") }}.</li> + <li><code>imageElement</code> est le nouvel élément à utiliser comme arrière-plan correspondant à cette chaîne d'élément image. Spécifiez <code>null</code> pour supprimer l'élément d'arrière-plan.</li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc.</p> + +<p><a href="/samples/domref/mozSetImageElement.html" title="https://developer.mozilla.org/samples/domref/mozSetImageElement.html">Vue de cet exemple en direct</a>.</p> + +<pre class="brush: html"><style type="text/css"> + #mybox { + background-image: -moz-element(#canvasbg); + text-align: center; + width: 400px; + height: 400px; + cursor: pointer; + } +</style> +</pre> + +<p>Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan.</p> + +<pre class="brush: js">var c = 0x00; +function clicked() { + var canvas = document.createElement("canvas"); + canvas.setAttribute("width", 100); + canvas.setAttribute("height", 100); + + var ctx = canvas.getContext('2d'); + ctx.fillStyle = "#" + c.toString(16) + "0000"; + ctx.fillRect(25, 25, 75, 75); + + c += 0x11; + if (c > 0xff) { + c = 0x00; + } + + document.mozSetImageElement("canvasbg", canvas); +} +</pre> + +<p>Le code ici est appelé chaque fois que l'utilisateur clique sur l'élément {{ HTMLElement("div") }}. Il crée un nouveau {{ HTMLElement("canvas") }} avec la largeur et la hauteur définies à 100 pixels et le dessine dans un carré de 50 par 50 pixels. Chaque fois que la fonction est appelée, le carré est d'une couleur différente (sa composante rouge est augmentée à chaque fois), donc chaque fois que l'utilisateur clique sur l'élément, le fond est plus lumineux et rempli d'un motif plus lumineux de carreaux rouges.</p> + +<p>Une fois le canvas dessiné, <code>document.mozSetImageElement()</code> est appelée pour définir l'arrière-plan de tout CSS en utilisant l'ID "canvasbg" comme ID d'élément d'arrière-plan pour être notre nouveau canvas.</p> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p>Ne fait partie d'aucune spécification.</p> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{ cssxref("-moz-element") }}</li> +</ul> diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.html b/files/fr/web/api/document/mozsyntheticdocument/index.html new file mode 100644 index 0000000000..443c3ca5e0 --- /dev/null +++ b/files/fr/web/api/document/mozsyntheticdocument/index.html @@ -0,0 +1,35 @@ +--- +title: Document.mozSyntheticDocument +slug: Web/API/Document/mozSyntheticDocument +tags: + - API + - DOM + - Document + - Propriétés +translation_of: Web/API/Document/mozSyntheticDocument +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Indique si le document est synthétique ou non ; c'est-à-dire un document représentant une image autonome, une vidéo, un son ou analogue.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval"><em>var isSynthetic</em> = <em>document</em>.mozSyntheticDocument; +</pre> + +<p>En retour, <code>isSynthetic</code> est <code>true</code> (<em>vrai</em>) si le document est synthétique ; sinon, <code>false</code> (<em>faux</em>).</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Il peut être utile, si vous avez un élément de menu contextuel que vous souhaitez uniquement afficher pour les documents synthétiques (ou, inversement, pour les documents qui ne sont pas synthétiques).</p> + +<pre class="eval">var isSynthetic = document.mozSyntheticDocument; + +if (isSynthetic) { + /* insert your menu item here */ +} +</pre> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p>Ne fait partie d'aucune spécification.</p> diff --git a/files/fr/web/api/document/onafterscriptexecute/index.html b/files/fr/web/api/document/onafterscriptexecute/index.html new file mode 100644 index 0000000000..52494ee50e --- /dev/null +++ b/files/fr/web/api/document/onafterscriptexecute/index.html @@ -0,0 +1,48 @@ +--- +title: Document.onafterscriptexecute +slug: Web/API/Document/onafterscriptexecute +tags: + - API + - DOM + - Propriétés + - scripts +translation_of: Web/API/Document/onafterscriptexecute +--- +<div>{{ ApiRef("DOM") }} {{non-standard_header}}</div> + +<div> </div> + +<h2 id="Résumé">Résumé</h2> + +<p>Lancé lorsqu'un élément {{HTMLElement("script")}} statique achève l'exécution de son script. N'est pas lancé si l'élément est ajouté dynamiquement, par exemple avec appendChild().</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>document.onafterscriptexecute = funcRef;</em> +</pre> + +<p><em>funcRef</em> est une référence de fonction appelée lorsqu'un évènement est lancé. L'attribut de la <code>target</code> (cible) d'évènement est défini sur l'{{domxref("Element")}} script dont l'exécution vient de s'achever.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush:js">function finished(e) { + logMessage("Finished script with ID: " + e.target.id); +} + +document.addEventListener("afterscriptexecute", finished, true); +</pre> + +<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p> + +<h2 id="Spécification">Spécification</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Document.onbeforescriptexecute")}}</li> + <li>{{domxref("Document.currentScript")}}</li> +</ul> diff --git a/files/fr/web/api/document/onbeforescriptexecute/index.html b/files/fr/web/api/document/onbeforescriptexecute/index.html new file mode 100644 index 0000000000..f0fc8ee381 --- /dev/null +++ b/files/fr/web/api/document/onbeforescriptexecute/index.html @@ -0,0 +1,46 @@ +--- +title: Document.onbeforescriptexecute +slug: Web/API/Document/onbeforescriptexecute +tags: + - API + - DOM + - Propriétés + - scripts +translation_of: Web/API/Document/onbeforescriptexecute +--- +<div>{{ApiRef("DOM")}} {{non-standard_header }}</div> + +<h2 id="Résumé">Résumé</h2> + +<p>Lancé lorsque le code dans un élément {{HTMLElement("script")}} déclaré dans un document HTML est sur le point de s'exécuter. N'est pas déclenché si l'élément est ajouté dynamiquement, par exemple avec appendChild().</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>document.onbeforescriptexecute = funcRef;</em> +</pre> + +<p><em>funcRef</em> est une référence de fonction appelée lorsque l'évènement est lancé. L'attribut de la <code>target</code> (<em>cible</em>) d'évènement est défini dans l'{{domxref("Element")}} script qui est sur le point d'être exécuté.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js">function starting(e) { + logMessage("Starting script with ID: " + e.target.id); +} + +document.addEventListener("beforescriptexecute", starting, true); +</pre> + +<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p> + +<h2 id="Spécification">Spécification</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Document.onafterscriptexecute")}}</li> + <li>{{domxref("Document.currentScript")}}</li> +</ul> diff --git a/files/fr/web/api/document/onfullscreenchange/index.html b/files/fr/web/api/document/onfullscreenchange/index.html new file mode 100644 index 0000000000..2736f848e7 --- /dev/null +++ b/files/fr/web/api/document/onfullscreenchange/index.html @@ -0,0 +1,106 @@ +--- +title: Document.onfullscreenchange +slug: Web/API/Document/onfullscreenchange +translation_of: Web/API/Document/onfullscreenchange +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p>La propriété <code><strong>Document</strong></code><strong><code>.onfullscreenchange</code> </strong>est un gestionnaire d'événement pour l'événement {{event("fullscreenchange")}} qui est lancé lorsque le document entre ou sort du mode plein écran.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>targetDocument</var>.onfullscreenchange = <var>fullscreenChangeHandler</var>; +</pre> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js">document.onfullscreenchange = function ( event ) { + console.log("FULL SCREEN CHANGE") +}; +document.documentElement.onclick = function () { + // requestFullscreen() doit être un gestionnaire d'événement, sinon ça échouera + document.documentElement.requestFullscreen(); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basic</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("47")}}<sup>[1] </sup> (behind <code>full-screen-api.unprefix.enabled</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("47")}}<sup> [1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Depuis Firefox 49, c'était techniquement sur {{domxref("GlobalEventHandlers")}}, mais certains gestionnaires d'événements n'étaient jamais appelés lorsqu'un {{domxref("Element")}} était défini.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{event("fullscreenchange")}}</li> + <li>{{domxref("Document.onfullscreenerror")}}</li> +</ul> diff --git a/files/fr/web/api/document/onoffline/index.html b/files/fr/web/api/document/onoffline/index.html new file mode 100644 index 0000000000..c8bfb9026a --- /dev/null +++ b/files/fr/web/api/document/onoffline/index.html @@ -0,0 +1,13 @@ +--- +title: Document.onoffline +slug: Web/API/Document/onoffline +tags: + - API + - DOM + - Document + - Propriétés +translation_of: Web/API/Document/onoffline +--- +<p>{{APIRef("DOM")}}</p> + +<p>Le gestionnaire d'évènements est appelé lorsqu'un évènement {{event("offline")}} est lancé sur le corps (<em>body</em>) et propagé, quand la propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/NavigatorOnLine/onLine">navigator.onLine</a> change et devient <code>false</code> (<em>fausse</em>).</p> diff --git a/files/fr/web/api/document/ononline/index.html b/files/fr/web/api/document/ononline/index.html new file mode 100644 index 0000000000..ba10ffd969 --- /dev/null +++ b/files/fr/web/api/document/ononline/index.html @@ -0,0 +1,39 @@ +--- +title: Document.ononline +slug: Web/API/Document/ononline +tags: + - API + - DOM + - Document + - En ligne + - Propriétés +translation_of: Web/API/Document/ononline +--- +<p>{{APIRef("DOM")}}</p> + +<p>Un évènement "<code>online</code>" est lancé sur le <code><body></code> (<em>corps</em>) de chaque page quand le navigateur bascule entre les modes online (<em>en ligne</em>) et offline (<em>hors ligne</em>). De plus les évènements se propagent de <code>document.body</code> vers <code>document</code> et finalement sur <code>window</code>. Les deux évènements ne sont pas annulables (vous ne pouvez pas empêcher l'utilisateur de se connecter ou de vous déconnecter).</p> + +<p>window.navigator.onLine renvoie un booléen <em>true</em> (<em>vrai</em>) si le navigateur est online et false s'il est définitivement offline (déconnecté du réseau). Les évènements online et offline sont lancés si la valeur de cet attribut change.</p> + +<div class="note"> +<p>Il est important de noter que cet événement et cet attribut sont intrinsèquement peu fiables. Un ordinateur peut être connecté à un réseau sans avoir accès à Internet.</p> +</div> + +<p>Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles :</p> + +<ul> + <li>en utilisant <code><a href="https://developer.mozilla.org/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a></code> sur <code>window</code>, <code>document</code> ou <code>document.body</code></li> + <li>en définissant les propriétés <code>.ononline</code> ou <code>.onoffline</code> sur <code>document</code> ou <code>document.body</code> sur un objet <code>Function</code> JavaScript. (<strong>Note :</strong> l'utilisation de <code>window.ononline</code> ou <code>window.onoffline</code> ne fonctionnera pas pour des raisons de compatibilité).</li> + <li>en spécifiant les attributs <code>ononline="..."</code> ou <code>onoffline="..."</code> sur la balise <code><body></code> dans le balisage HTML.</li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Il existe <a class="external link-https external-icon" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">un cas de test simple</a> que vous pouvez exécuter pour vérifier le fonctionnement des évènements.</p> + +<h2 id="Example" name="Example">Références</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/API/NavigatorOnLine/%C3%89v%C3%A8nements_online_et_offline">Évènements online et offline</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online">Spécification</a> <a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online">WHATWG Web App</a> (en)</li> +</ul> diff --git a/files/fr/web/api/document/open/index.html b/files/fr/web/api/document/open/index.html new file mode 100644 index 0000000000..a4b16f90e4 --- /dev/null +++ b/files/fr/web/api/document/open/index.html @@ -0,0 +1,118 @@ +--- +title: document.open +slug: Web/API/Document/open +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/open +--- +<div>{{APIRef("DOM")}}</div> + +<div> </div> + +<p>La méthode <strong><code>document.open()</code></strong> ouvre un document pour <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/write">l'écriture</a>.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval">document.open(); +</pre> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre>// Dans cet exemple, le contenu du document est +// écrasé au cours de la réinitialisation avec open() +document.write("<html><p>supprimez-moi</p></html>"); +document.open(); +// Le document est vide. +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Si un document existe dans la cible, cette méthode le supprime (voir l'exemple ci-dessus).</p> + +<p>Par ailleurs, un appel automatique à <code>document.open()</code> est réalisé lorsque <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/write">document.write()</a> est appelé après que la page ait été chargée, bien que ce ne soit pas défini dans la spécification du W3C. <span class="comment">documenter les paramètres à document.open ne figurant pas dans la spécification</span></p> + +<p>Cette méthode ne doit pas être confondue avec <a href="https://developer.mozilla.org/fr/docs/Web/API/Window/open">window.open()</a>. <code>document.open</code> permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que <code>window.open</code> fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme <code>window</code> est l'objet, si on appelle juste <code>open(...)</code>, il sera traité comme un appel à <code>window.open(...)</code>. Le document ouvert peut être fermé à l'aide de <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/close">document.close()</a>.</p> + +<p>Voir <a href="https://developer.mozilla.org/fr/docs/Mozilla/Gecko/Script_security#Security_checks" title="en/Security check basics">Security check basics</a> pour plus d'informations sur les principaux.</p> + +<p>Si vous ne voulez pas créer une entrée d'historique, remplacez <code>open()</code> par <code>open("text/html", "replace")</code>.</p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notes_propres_à_Gecko">Notes propres à Gecko</h2> + +<p><span id="result_box" lang="fr"><span>À partir de Gecko 1.9, cette méthode est soumise à la même règle d'origine que les autres propriétés et ne fonctionne pas si cela change l'origine du document.</span></span></p> + +<p><span id="result_box" lang="fr"><span>À partir de Gecko 1.9.2, <code>document.open()</code> utilise le <a href="https://developer.mozilla.org/fr/docs/Mozilla/Gecko/Script_security#Security_checks">principal</a> du document dont il utilise l'URI, au lieu de récupérer le principal hors de la pile.</span> <span>Par conséquent, vous ne pouvez plus appeler {{domxref ("document.write ()")}} dans un document non approuvé à partir de chrome, même en utilisant <code><a href="https://developer.mozilla.org/fr/docs/wrappedJSObject">wrappedJSObject</a></code>.</span></span></p> diff --git a/files/fr/web/api/document/origin/index.html b/files/fr/web/api/document/origin/index.html new file mode 100644 index 0000000000..54fed5b8e3 --- /dev/null +++ b/files/fr/web/api/document/origin/index.html @@ -0,0 +1,106 @@ +--- +title: Document.origin +slug: Web/API/Document/origin +tags: + - API + - DOM + - Document + - Propriétés + - origine +translation_of: Web/API/Document/origin +--- +<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>Document.origin</code></strong> renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à <code>document.defaultView.location.origin</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var origin = document.origin; +// Sur cette page, renvoie:'https://developer.mozilla.org' + +var origin = document.origin; +// Sur "about:blank", renvoie :'null' + +var origin = document.origin; +// Sur "data:text/html,<b>foo</b>", renvoie :'null' +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(41)}}</td> + <td>{{CompatNo}} {{bug(931884)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La propriété {{domxref("URLUtils.origin")}}.</li> +</ul> diff --git a/files/fr/web/api/document/popupnode/index.html b/files/fr/web/api/document/popupnode/index.html new file mode 100644 index 0000000000..8b6af6e137 --- /dev/null +++ b/files/fr/web/api/document/popupnode/index.html @@ -0,0 +1,43 @@ +--- +title: Document.popupNode +slug: Web/API/Document/popupNode +tags: + - API + - DOM + - Document + - Fenêtre contextuelle + - Propriétés + - XUL +translation_of: Web/API/Document/popupNode +--- +<div>{{ApiRef("DOM")}}{{deprecated_header}}</div> + +<div class="note"><strong>Note :</strong> À partir de {{Gecko("2.0")}}, les auteurs sont encouragés à utiliser la propriété <a href="/fr/docs/Mozilla/Tech/XUL/menupopup">menupopup </a>triggerNode à la place.</div> + +<p>Quand une fenêtre contextuelle attachée via les attributs <code>popup</code> ou <code>context</code> est ouverte, la propriété <code>popupNode</code> du document XUL est définie sur le noeud sur lequel vous avez cliqué. <span id="result_box" lang="fr"><span>Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle.</span> <span>Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null.</span> <span>En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte.</span></span></p> + +<p>Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs <code>popup</code> ou <code>context</code>. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode <a href="/fr/docs/Mozilla/Tech/XUL/M%C3%A9thodes/showPopup">showPopup</a> de la fenêtre contextuelle, vous pouvez définir la propriété <code>popupNode</code> directement au préalable.</p> + +<p>Cette propriété s'applique seulement aux documents XUL.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <var>node</var> = <var>document</var>.popupNode; +</pre> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: xml"><menupopup id="toolbarContextMenu"> + ... + <menuitem oncommand="mailNewsCore.deleteButton(document.popupNode)"> + ... +</menupopup> +</pre> + +<p>Voir <a class="external" href="http://www.mozilla.org/xpfe/xptoolkit/popups.html" rel="freelink">http://www.mozilla.org/xpfe/xptoolkit/popups.html</a></p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Défini dans {{Source("dom/public/idl/xul/nsIDOMXULDocument.idl#48", "nsIDOMXULDocument.idl")}}. méthode spécifique XUL. Ne fait partie d'aucune spécification.</li> +</ul> diff --git a/files/fr/web/api/document/preferredstylesheetset/index.html b/files/fr/web/api/document/preferredstylesheetset/index.html new file mode 100644 index 0000000000..969a9b39b0 --- /dev/null +++ b/files/fr/web/api/document/preferredstylesheetset/index.html @@ -0,0 +1,48 @@ +--- +title: Document.preferredStyleSheetSet +slug: Web/API/Document/preferredStyleSheetSet +tags: + - API + - CSSOM + - Document + - Feuilles de style + - Propriétés + - Reference +translation_of: Web/API/Document/preferredStyleSheetSet +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div> + +<p>Retourne la feuille de style préférée, telle que définie par l'auteur de la page.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><var>preferredStyleSheetSet</var> = document.preferredStyleSheetSet +</pre> + +<p>Au retour, <code>preferredStyleSheetSet</code> indique la feuille de style préférée par l'auteur. Ceci est déterminé par l'ordre des déclarations des feuilles de style et par l'entête HTTP intitulé <code>Default-Style</code>.</p> + +<p>En l'absence de feuille de style préférée, une chaine vide ("") est retournée.</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush: js">if (document.preferredStyleSheetSet) { + console.log("La feuille de style préférée est : " + document.preferredStyleSheetSet); +} else { + console.log("Il n'y a pas de feuille de style préférée."); +} +</pre> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> +</ul> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{domxref("document.lastStyleSheetSet")}}</li> + <li>{{domxref("document.selectedStyleSheetSet")}}</li> + <li>{{domxref("document.styleSheetSets")}}</li> + <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> +</ul> diff --git a/files/fr/web/api/document/querycommandstate/index.html b/files/fr/web/api/document/querycommandstate/index.html new file mode 100644 index 0000000000..7875db98fb --- /dev/null +++ b/files/fr/web/api/document/querycommandstate/index.html @@ -0,0 +1,101 @@ +--- +title: Document.queryCommandState() +slug: Web/API/Document/queryCommandState +tags: + - API + - DOM + - Document +translation_of: Web/API/Document/queryCommandState +--- +<div>{{ApiRef("DOM")}}</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">queryCommandState(String command) +</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>TBD</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#execcommand()','execCommand')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li>Les bogues du navigateur liés à <code>queryCommandState()</code>: <a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md#documentquerycommandstate">Scribe's "Browser Inconsistencies" documentation</a></li> +</ul> diff --git a/files/fr/web/api/document/querycommandsupported/index.html b/files/fr/web/api/document/querycommandsupported/index.html new file mode 100644 index 0000000000..a46e4374d5 --- /dev/null +++ b/files/fr/web/api/document/querycommandsupported/index.html @@ -0,0 +1,125 @@ +--- +title: Document.queryCommandSupported() +slug: Web/API/Document/queryCommandSupported +tags: + - API + - Commandes + - DOM + - Document + - Méthodes + - editeur +translation_of: Web/API/Document/queryCommandSupported +--- +<div>{{ApiRef("DOM")}}</div> + +<p>La méthode <code><strong>Document.queryCommandSupported()</strong></code> indique si la commande d'éditeur spécifiée est prise en charge par le navigateur.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>isSupported</var> = document.queryCommandSupported(<var>command</var>); +</pre> + +<dl> + <dt> + <h3 id="Paramètres">Paramètres</h3> + </dt> + <dt><code>command</code></dt> + <dd>La commande pour laquelle on veut déterminer si elle est prise en charge.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Renvoie un {{jsxref("Boolean")}} qui est <code>true</code> (<em>vrai</em>) si la commande est prise en charge et <code>false</code> (<em>faux</em>) sinon.</p> + +<h2 id="Notes">Notes</h2> + +<p>La commande <code>'paste'</code> (<em>coller</em>) renvoie <code>false</code> (<em>faux</em>), pas seulement si la fonctionnalité n'est pas disponible, mais également si le script l'appelant a des privilèges insuffisants pour réaliser l'action <a href="#note1">[1]</a>.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush:js">var flg = document.queryCommandSupported("SelectAll"); + +if(flg) { + // ...Faire quelque chose +} +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#querycommandsupported()','querycommandsupported')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>17</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}<sup>[1]</sup></td> + <td>4.0</td> + <td>{{CompatUnknown}}</td> + <td>6.1.6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Avant Firefox 41, pour la commande <code>'paste'</code> (<em>coller</em>), Firefox renvoyait incorrectement <code>true</code> (<em>vrai</em>) quand la fonctionnalité coller était disponible même si le script appelant avait des privilèges insuffisants pour réaliser l'action.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Document.execCommand()")}}</li> + <li>{{domxref("Document.queryCommandEnabled()")}}</li> +</ul> diff --git a/files/fr/web/api/document/queryselector/index.html b/files/fr/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..b466aaad25 --- /dev/null +++ b/files/fr/web/api/document/queryselector/index.html @@ -0,0 +1,178 @@ +--- +title: document.querySelector +slug: Web/API/Document/querySelector +tags: + - API + - CSS + - DOM + - Document + - JavaScript + - Méthodes + - Sélecteurs + - Échappement +translation_of: Web/API/Document/querySelector +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>La méthode <code><strong>querySelector()</strong></code> de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou <code>null</code> si aucune correspondance n'est trouvée.</p> + +<div class="note"> +<p><strong>Note :</strong> La correspondance <span id="result_box" lang="fr"><span>est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants.</span></span></p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="brush: js">element = document.querySelector(sélecteurs); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>selectors</code> (sélecteurs)</dt> + <dd>une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception <code>SYNTAX_ERR</code> est lancée. Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur les sélecteurs et leur gestion.</dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations.</p> +</div> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> spécifié, ou <code>null</code> s'il n'y a pas de correspondances.</p> + +<p>Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place.</p> + +<h3 id="Exception">Exception</h3> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>La syntaxe des sélecteurs spécifiés est invalide.</dd> +</dl> + +<h2 id="Notes" name="Notes">Notes d'utilisation</h2> + +<p>Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné.</p> + +<p>Les <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a> CSS ne retourneront jamais aucun élément, comme spécifié dans l'<a href="http://www.w3.org/TR/selectors-api/#grammar">API des sélecteurs</a> (en).</p> + +<h3 id="Caractère_spécial_d'échappement"><a id="Caractère spécial d'échappement" name="Caractère spécial d'échappement"></a>Caractère spécial d'échappement</h3> + +<p>Pour faire correspondre un ID (<em>identifiant</em>) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper <em>deux fois</em> (une pour la chaîne de caractères JavaScript et une autre fois pour <code>querySelector</code>) :</p> + +<pre class="brush: html"><div id="machin\bidule"></div> +<div id="machin:bidule"></div> + +<script> + console.log('#machin\bidule') // "#machinidule" <code>(\b est le caractère de contrôle retour arrière)</code> + document.querySelector('#machin\bidule') // ne correspond à rien + + console.log('#machin\\bidule') // "#machin\bidule" + console.log('#machin\\\\bidule') // "#machin\\bidule" + document.querySelector('#machin\\\\bidule') // correspond au premier div + + document.querySelector('#machin:bidule') // ne correspond à rien + document.querySelector('#machin\\:bidule') // correspond au second div +</script> +</pre> + +<h2 id="Exemple" name="Exemple">Exemples</h2> + +<h3 id="Trouver_le_premier_élément_correspondant_à_une_classe">Trouver le premier élément correspondant à une classe</h3> + +<p>Dans cet exemple, le premier élément dans le document qui contient la classe "<code>maclasse</code>" est retourné :</p> + +<pre class="brush: js">var el = document.querySelector(".maclasse");</pre> + +<h3 id="Notes" name="Notes">Un sélecteur plus complexe</h3> + +<p><span id="result_box" lang="fr"><span>Les <em>sélecteurs</em> peuvent également être réellement puissants comme le montre l'exemple suivant.</span> <span>Ici, le premier élément <code><input name="identifiant"/></code> dans un <code><div class="panneau-utilisateur principal"></code> dans le document est retourné :</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"div.panneau-utilisateur.principal input[name='</span></code><span id="result_box" lang="fr"><span><code>identifiant</code></span></span><code class="language-js"><span class="string token">']"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support de base</td> + <td>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>8</td> + <td>10</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>machin</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li> + <li>{{domxref("document.querySelectorAll()")}} ;</li> + <li>{{domxref("element.querySelector()")}} ;</li> + <li>{{domxref("element.querySelectorAll()")}} ;</li> + <li><a href="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li> +</ul> diff --git a/files/fr/web/api/document/queryselectorall/index.html b/files/fr/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..b9c36f07e7 --- /dev/null +++ b/files/fr/web/api/document/queryselectorall/index.html @@ -0,0 +1,232 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - DOM + - Document + - Méthodes + - Sélecteurs +translation_of: Web/API/Document/querySelectorAll +--- +<div>{{APIRef("DOM")}}</div> + +<p>La méthode <code><strong>querySelectorAll()</strong></code> de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.</p> + +<div class="note"> +<p><strong>Note :</strong> Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="brush: js">elements = document.querySelectorAll(selecteurs); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>selecteurs</code></dt> + <dd>une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> ; s'il n'y en a pas, une exception <code>SyntaxError</code> est lancée. Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.</dd> +</dl> + +<div class="note"> +<p><strong>Note : </strong>Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.</p> +</div> + +<h3 id="Valeur_renvoyée">Valeur renvoyée</h3> + +<p>Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .</p> + +<div class="note"> +<p><strong>Note : </strong> si les <code><em>selectors</em></code> spécifiés contiennent un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste retournée sera toujours vide.</p> +</div> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>la syntaxe des chaînes <code>selectors</code> spécifiés n'est pas valide.</dd> +</dl> + +<h2 id="Example" name="Example">Exemples</h2> + +<p>Pour obtenir une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de tous les éléments {{HTMLElement("p")}} dans le document :</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Cet exemple renvoie la liste de tous les éléments <code>div</code> du <code>document</code> dont l'attribut de classe a pour valeur "<code>note</code>" ou "<code>alert</code>" :</p> + +<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); +</pre> + +<p>Ici, nous obtenons une liste des éléments <code><p></code> dont l'élément parent immédiat est un {{domxref("div")}} avec la classe <code>"highlighted"</code> et qui sont situés dans un conteneur dont l'identifiant est <code>"test"</code>.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.highlighted > p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Cet exemple utilise un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> pour renvoyer une liste d'éléments {{domxref("iframe")}} dans le document qui contient un attribut nommé <code>"data-src"</code> :</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"iframe[data-src]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est <code>"userlist"</code> lequel a un attribut <code>"data-active"</code> dont la valeur est <code>"1"</code>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#userlist"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"li[data-active=1]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Accès_aux_correspondances">Accès aux correspondances</h3> + +<p>Une fois que la {{domxref("NodeList")}} des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (<em>array</em>). Si le tableau est vide (c'est quand sa propriété <code>length</code> est 0), alors aucune correspondance n'a été trouvée.</p> + +<p>Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> highlightedItems <span class="operator token">=</span> userList<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">".highlighted"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +highlightedItems<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">deleteUser</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Notes" name="Notes">Notes d'utilisation</h2> + +<p><code>querySelectorAll()</code> se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.</p> + +<h3 id="HTML">HTML</h3> + +<p>Considérez ce HTML, avec ses trois blocs {{HTMLElement("div")}} imbriqués.</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>outer<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>select<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>inner<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 1, pas 0!</span></code></pre> + +<p>Dans cet exemple, lors de la sélection de <code>".outer .inner"</code> dans le contexte, le <code><div></code> avec la classe <code>"select"</code>, l'élément avec la classe <code>".inner"</code> est toujours trouvé, même si <code>.outer</code> n'est pas un descendant de l'élément de base sur lequel la recherche <code>(".select")</code> est effectuée. Par défaut, <code>querySelectorAll()</code> vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.</p> + +<p>La pseudo-classe {{cssxref (":scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">':scope .outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 0</span></code></pre> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Norme actuelle</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Définition initiale</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Définition originale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<div id="compat-desktop"> +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8</td> + <td>10</td> + <td>3.2 (525.3)</td> + </tr> + <tr> + <td><code>:scope</code> pseudo-class</td> + <td>{{ CompatVersionUnknown }}</td> + <td>32</td> + <td>{{CompatNo}}</td> + <td>15<sup>[1]</sup></td> + <td>7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>:scope</code> pseudo-class</td> + <td>{{ CompatUnknown }}</td> + <td>32</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Pris en charge dans Opera 15+ en activant les marques "<strong>Enable <style scoped></strong>" ou "<strong>Enable experimental Web Platform features</strong>" dans <code>chrome://flags</code>.</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> +</div> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li> + <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage de MDN</li> + <li>{{domxref("Element.querySelectorAll")}} et {{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("document.querySelector")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li> +</ul> diff --git a/files/fr/web/api/document/readystate/index.html b/files/fr/web/api/document/readystate/index.html new file mode 100644 index 0000000000..57f7b28538 --- /dev/null +++ b/files/fr/web/api/document/readystate/index.html @@ -0,0 +1,131 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - DOM + - HTML + - Référence(2) +translation_of: Web/API/Document/readyState +--- +<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div> + +<p>La valeur <strong>Document.readyState</strong> est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document.</p> + +<p>À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate">var <var>string</var> = <var>document</var>.readyState; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<p>La variable <code>readyState</code><strong> </strong>peut valoir :</p> + +<dl> + <dt><code><strong>loading</strong></code></dt> + <dd>Le {{ domxref("document") }} est encore en chargement.</dd> + <dt><code><strong>interactive</strong></code></dt> + <dd>Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis.</dd> + <dt><code><strong>complete</strong></code></dt> + <dd>Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.</dd> +</dl> + +<h2 id="Exemples"><span>Exemples</span></h2> + +<h3 id="Différents_états_de_chargement">Différents états de chargement</h3> + +<pre class="brush: js notranslate"><span>switch (document.readyState) { + case "loading": + // Encore en chargement. + break; + case "interactive": + // Le DOM est construit, on peut y accéder. + var span = document.createElement("span"); + span.textContent = "A <span> element."; + document.body.appendChild(span); + break; + case "complete": + // La page est pleinement chargée. + console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText); + break; +}</span> +</pre> + +<h3 id="readystatechange_comme_alternative_à_DOMContentLoaded">readystatechange comme alternative à DOMContentLoaded</h3> + +<pre class="brush:js notranslate">// alternative à DOMContentLoaded +document.onreadystatechange = function () { + if (document.readyState == "interactive") { + initApplication(); + } +}</pre> + +<h3 id="readystatechange_comme_alternative_à_load">readystatechange comme alternative à load</h3> + +<pre class="brush: js notranslate">// alternative à load +document.onreadystatechange = function () { + if (document.readyState == "complete") { + initApplication(); + } +}</pre> + +<h3 id="readystatechange_comme_event_listener_pour_insérer_ou_modifier_le_DOM_avant_DOMContentLoaded">readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded</h3> + +<pre class="brush: js notranslate">// Modification du document <body> dès que possible en utilisant un script externe +var bootstrap = function(evt){ + if (evt.target.readyState === "interactive") { initLoader(); } + else if (evt.target.readyState === "complete") { initApp(); } +} +document.addEventListener('readystatechange', bootstrap, false); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spécifications</th> + <th scope="col">Status</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Spécification initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<div>{{Compat("api.Document.readyState")}}</div> + +<div id="compat-desktop"></div> + +<p>[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5).</p> + +<p>[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' <a href="https://bugs.jquery.com/ticket/12282">peut être notifié trop tôt</a> avant que le document soit entièrement analysé.</p> + +<p>[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'événement {{event("readystatechange")}}</li> + <li>L'événement {{event("DOMContentLoaded")}}</li> + <li>L'événement {{event("load")}}</li> +</ul> diff --git a/files/fr/web/api/document/referrer/index.html b/files/fr/web/api/document/referrer/index.html new file mode 100644 index 0000000000..d8699ada15 --- /dev/null +++ b/files/fr/web/api/document/referrer/index.html @@ -0,0 +1,23 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +tags: + - API + - HTML DOM + - Propriété + - Reference +translation_of: Web/API/Document/referrer +--- +<div> + {{APIRef}}</div> +<h2 id="Syntax" name="Syntax">Résumé</h2> +<p>Renvoie l'<a href="http://www.w3.org/Addressing/#background">URI</a> de la page de provenance.</p> +<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<pre class="syntaxbox"><var>string</var> = document.referrer; +</pre> +<h2 id="Notes" name="Notes">Notes</h2> +<p>La valeur est une chaîne de caractères vide si l'utilisateur est arrivé directement sur la page (pas grâce à un lien, mais, par exemple, via un marque-page). Étant donné que cette propriété ne retourne qu'une chaîne, elle ne vous donne pas un accès DOM à la page de provenance.</p> +<h2 id="Specification" name="Specification">Spécification</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></li> +</ul> diff --git a/files/fr/web/api/document/registerelement/index.html b/files/fr/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..8f937a8180 --- /dev/null +++ b/files/fr/web/api/document/registerelement/index.html @@ -0,0 +1,115 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +tags: + - API + - Composants Web + - DOM + - Expérimental(2) + - Méthode + - Référence(2) +translation_of: Web/API/Document/registerElement +--- +<p>{{APIRef("DOM")}} {{Deprecated_header}}</p> + +<div class="warning"> +<p><strong>Warning : </strong>document.registerElement() est déprécié en faveur de <a href="https://developer.mozilla.org/fr/docs/Web/API/CustomElementRegistry/define">customElements.define()</a>.</p> +</div> + +<p>{{draft}}</p> + +<p>La méthode <code><strong>Document.registerElement()</strong></code> permet d'enregistrer un nouvel <a href="https://developer.mozilla.org/fr/docs/Web/Web_Components/Custom_Elements">élément personnalisé</a> dans le navigateur, et retourne un constructeur pour ce nouvel élément.</p> + +<div class="note"> +<p><strong>Note:</strong> Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir <a href="https://developer.mozilla.org/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">Activer les Composants Web dans Firefox</a>.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>constructeur</em> = document.registerElement(<em>nom-tag</em>, <em>options</em>);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><em>nom-tag</em></dt> + <dd> + <div class="syntaxbox">Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple <code>mon-tag</code>.</div> + </dd> + <dt><em>options {{optional_inline}}</em></dt> + <dd>Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<p>Voici un exemple très simple :</p> + +<pre class="brush: js">var Montag = document.registerElement('mon-tag'); +</pre> + +<p>Le nouveau tag est désormais enregistré dans le navigateur. La variable <code>Montag</code> contient un constructeur que vous pouvez utiliser pour créer des éléments <code>mon-tag</code> dans le document de la façon suivante :</p> + +<pre class="brush: js">document.body.appendChild(new Montag());</pre> + +<p>Ceci insert un élément <code>mon-tag</code> vide qui sera visible si vous utilisez les outils de développement du navigateur. Il ne sera pas visible si vous utilisez la fonction de visualisation de la source du navigateur. Et il ne sera pas visible dans le navigateur tant que vous n'aurez pas ajouter du contenu au tag. Ce qui suit est un exemple d'ajout de contenu au nouveau tag :</p> + +<pre class="brush: js">var montag = document.getElementsByTagName("mon-tag")[0]; +montag.textContent = "Je suis un élément mon-tag."; +</pre> + +<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>35</td> + <td>31<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4.4</td> + <td>31<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Cette API est implantée mais doit être activée dans les préférences.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/docs/Web/Web_Components/Custom_Elements">Éléments personnalisés</a></li> +</ul> diff --git a/files/fr/web/api/document/releasecapture/index.html b/files/fr/web/api/document/releasecapture/index.html new file mode 100644 index 0000000000..8c2a9d5bc5 --- /dev/null +++ b/files/fr/web/api/document/releasecapture/index.html @@ -0,0 +1,38 @@ +--- +title: Document.releaseCapture() +slug: Web/API/Document/releaseCapture +tags: + - API + - Capture + - DOM + - Document + - Méthodes + - Souris +translation_of: Web/API/Document/releaseCapture +--- +<div>{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}</div> + +<div> </div> + +<p>Libère la capture de la souris si elle est actuellement activée (<em>bouton gauche enfoncé</em>) sur un élément de ce document. L'activation de la capture de la souris sur un élément se fait en appelant {{domxref("element.setCapture()")}}.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">document.releaseCapture() +</pre> + +<p>Une fois la capture de la souris relâchée, les événements de souris ne seront plus dirigés vers l'élément sur lequel la capture est activée.</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Voir l'<a href="/en-US/docs/Web/API/element.setCapture#Example">exemple</a> pour {{domxref("element.setCapture()")}}.</p> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p>Basé sur l'implémentation Internet Explorer.</p> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{domxref("element.setCapture()")}}</li> +</ul> diff --git a/files/fr/web/api/document/scripts/index.html b/files/fr/web/api/document/scripts/index.html new file mode 100644 index 0000000000..1e7fe75f40 --- /dev/null +++ b/files/fr/web/api/document/scripts/index.html @@ -0,0 +1,72 @@ +--- +title: Document.scripts +slug: Web/API/Document/scripts +translation_of: Web/API/Document/scripts +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary"> </h2> +<p>Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}.</p> +<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<pre class="syntaxbox"><code>var <em>scriptList</em></code> = document.scripts; +</pre> +<p>La liste <code>scriptList</code> est un objet {{domxref("HTMLCollection")}} qu'on peut utiliser comme un tableau pour accéder aux éléments qu'elle contient.</p> +<h2 id="Exemple">Exemple</h2> +<p>Cet exemple détecte la présence d'éléments {{HTMLElement("script")}} dans le document.</p> +<pre class="brush:js">var scripts = document.scripts; + +if (scripts.length) { + alert("This page has scripts!"); +} +</pre> +<h2 id="Specification" name="Specification">Browser compatibility</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Specification" name="Specification">Specification</h2> +<ul> + <li>{{spec("http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-scripts", "DOM: document scripts")}}</li> +</ul> diff --git a/files/fr/web/api/document/scroll_event/index.html b/files/fr/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..8e1a13b3db --- /dev/null +++ b/files/fr/web/api/document/scroll_event/index.html @@ -0,0 +1,147 @@ +--- +title: scroll +slug: Web/API/Document/scroll_event +tags: + - API + - Event Handler + - Reference + - events + - requestAnimationFrame +translation_of: Web/API/Document/scroll_event +--- +<p>{{APIRef}}<br> + <span class="seoSummary">L’évènement <strong><code>scroll</code></strong> (défilement) est émis lorsque l’on fait défiler le document ou un élément.</span></p> + +<h2 id="Informations_générales">Informations générales</h2> + +<table class="properties"> + <tbody> + <tr> + <th>Bouillonne</th> + <td>Pas sur les éléments, mais bouillonne vers la defaultView si émis sur le document</td> + </tr> + <tr> + <th>Annulable</th> + <td>Non</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("UIEvent")}}</td> + </tr> + <tr> + <th>Cible</th> + <td>DefaultView, {{domxref("Document")}}, {{domxref("Element")}}</td> + </tr> + <tr> + <th>Action par défaut</th> + <td>Aucune</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p>Note : Sur iOS UIWebViews, les évènements <code>scroll</code> ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>. Safari et WKWebViews ne sont pas affectés par ce bogue.</p> +</div> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Le type d’évènement.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{domxref("Boolean")}}</td> + <td>Si l’évènement bouillonne ou non.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{domxref("Boolean")}}</td> + <td>Si l’évènement est annulable ou non.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("Document.defaultView")}} (objet <code>window</code> du document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="Temporisation_des_évènements_scroll">Temporisation des évènements scroll</h3> + +<p>Comme les évènements <code>scroll</code> peuvent être émis à une fréquence élevée, le gestionnaire d’évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l’évènement en utilisant {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("window.setTimeout()", "setTimeout()")}} ou un {{domxref("CustomEvent")}}, comme suit.</p> + +<p>Notez, cependant, que les évènements d’interface utilisateur et les frames d’animation sont émises à peu près à la même fréquence, et ainsi l’optimisation qui suit est souvent superflue. Cet exemple optimise l’évènement <code>scroll</code> avec <code>requestAnimationFrame</code>.</p> + +<pre class="brush: js notranslate">// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/ + +var derniere_position_de_scroll_connue = 0; +var ticking = false; + +function faireQuelqueChose(position_scroll) { + // faire quelque chose avec la position du scroll +} + +window.addEventListener('scroll', function(e) { + derniere_position_de_scroll_connue = window.scrollY; + + if (!ticking) { + window.requestAnimationFrame(function() { + faireQuelqueChose(derniere_position_de_scroll_connue); + ticking = false; + }); + } + + ticking = true; +});</pre> + +<h3 id="Autres_exemples">Autres exemples</h3> + +<p>Pour plus d’exemples similaires, voir l’évènement <a href="/en-US/docs/Web/Events/resize#Example">resize</a>.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Spécification</td> + <td>État</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#scrolling-events')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Document.scroll_event")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.onscroll")}}</li> +</ul> diff --git a/files/fr/web/api/document/selectedstylesheetset/index.html b/files/fr/web/api/document/selectedstylesheetset/index.html new file mode 100644 index 0000000000..8c66beecb4 --- /dev/null +++ b/files/fr/web/api/document/selectedstylesheetset/index.html @@ -0,0 +1,51 @@ +--- +title: Document.selectedStyleSheetSet +slug: Web/API/Document/selectedStyleSheetSet +tags: + - API + - DOM + - Document + - Feuilles de styles + - Propriétés +translation_of: Web/API/Document/selectedStyleSheetSet +--- +<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p> + +<p>Indique le nom du jeu de feuilles de styles actuellement utilisé.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval"><em>currentStyleSheetSet</em> = document.selectedStyleSheetSet + +document.selectedStyleSheet = <em>newStyleSheetSet</em> +</pre> + +<p>En retour, <code>currentStyleSheetSet</code> indique le nom du jeu de feuilles de styles en cours d'utilisation. Vous pouvez aussi définir celui-ci en utilisant cette propriété.</p> + +<p><span id="result_box" lang="fr"><span>La définition de la valeur de cette propriété équivaut à appeler</span></span> {{ domxref("document.enableStyleSheetsForSet()") }} avec la valeur de <code>currentStyleSheetSet</code>, puis de définir la valeur de <code>lastStyleSheetSet</code> sur cette valeur.</p> + +<div class="note"><strong>Note :</strong> Cette valeur d'attribut est directe : <span id="result_box" lang="fr"><span>sa modification affectera la valeur de l'attribut.</span></span></div> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush: js">console.log("Current style sheet set: " + document.selectedStyleSheetSet); + +document.selectedStyleSheetSet = "Some other style sheet"; +</pre> + +<div class="note"><strong>Note :</strong> Cet exemple vous aidera à comprendre la différence de comportement entre la définition de la valeur de <code>selectedStyleSheetSet</code> et l'appel de {{ domxref("document.enableStyleSheetsForSet()") }}.</div> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{ domxref("document.lastStyleSheetSet") }}</li> + <li>{{ domxref("document.preferredStyleSheetSet") }}</li> + <li>{{ domxref("document.styleSheetSets") }}</li> + <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li> +</ul> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> +</ul> diff --git a/files/fr/web/api/document/stylesheets/index.html b/files/fr/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..71a48a5f68 --- /dev/null +++ b/files/fr/web/api/document/stylesheets/index.html @@ -0,0 +1,55 @@ +--- +title: Document.styleSheets +slug: Web/API/Document/styleSheets +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +<div>{{APIRef}}</div> + +<div>La propriété <strong><code>Document.styleSheets </code></strong>est en lecture seule et retourne une liste {{domxref("StyleSheetList")}} d'objets {{domxref("StyleSheet")}}, qui font référence à l'ensemble des feuilles de style contenues ou embarquées dans le document.</div> + +<div> </div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">var <var>styleSheetList</var> = <em>document</em>.styleSheets; +</pre> + +<p>L'objet retourné est une liste {{domxref("StyleSheetList")}}.</p> + +<p>Il s'agit d'une collection ordonnée d'objets {{domxref("StyleSheet")}}. <code><em>styleSheetList</em>.item(<em>index</em>)</code> ou <code><em>styleSheetList</em>{{ mediawiki.External('<em>index</em>') }}</code> retourne un seul objet stylesheet par son <code>index </code>(<code>index</code> débute par 0).</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + </tbody> + <tbody> + <tr> + <td>{{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}}</td> + <td>{{Spec2('DOM2 Style')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{Link("/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information")}}</li> +</ul> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></li> +</ul> diff --git a/files/fr/web/api/document/stylesheetsets/index.html b/files/fr/web/api/document/stylesheetsets/index.html new file mode 100644 index 0000000000..14adac7a18 --- /dev/null +++ b/files/fr/web/api/document/stylesheetsets/index.html @@ -0,0 +1,58 @@ +--- +title: Document.styleSheetSets +slug: Web/API/Document/styleSheetSets +tags: + - API + - DOM + - Document + - Feuilles de styles + - Propriétés +translation_of: Web/API/Document/styleSheetSets +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div> + +<p>Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>sets</em> = document.styleSheetSets +</pre> + +<p>En retour, <code>sets</code> est une liste de jeux de feuilles de styles disponibles.</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Étant donné un élément {{HTMLElement("ul")}} (liste) avec l'ID "sheetList", vous pouvez le remplir avec tous les noms de tous les jeux de feuilles de styles disponibles avec un code comme celui-ci :</p> + +<pre class="brush:js">var list = document.getElementById("sheetList"); +var sheets = document.styleSheetSets; + +list.innerHTML = ""; + +for (var i = 0; i < sheets.length; i++) { + var item = document.createElement("li"); + + item.innerHTML = sheets[i]; + list.appendChild(item); +}</pre> + +<h2 id="Notes">Notes</h2> + +<p>La liste des jeux de feuilles de styles disponibles est construite par énumération de toutes les feuilles de styles disponibles pour le document, dans l'ordre dans lequel elles sont répertoriées dans l'attribut {{domxref("document.styleSheets")}}, en ajoutant le <code>title</code> (<em>titre</em>) de chacune de celles en ayant un. Les doublons sont supprimés de la liste (en utilisant une comparaison sensible à la casse).</p> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li> +</ul> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{domxref("Stylesheet")}}</li> + <li>{{domxref("document.styleSheets")}}</li> + <li>{{domxref("document.lastStyleSheetSet")}}</li> + <li>{{domxref("document.preferredStyleSheetSet")}}</li> + <li>{{domxref("document.selectedStyleSheetSet")}}</li> + <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> +</ul> diff --git a/files/fr/web/api/document/title/index.html b/files/fr/web/api/document/title/index.html new file mode 100644 index 0000000000..98cb79bb34 --- /dev/null +++ b/files/fr/web/api/document/title/index.html @@ -0,0 +1,54 @@ +--- +title: Document.title +slug: Web/API/Document/title +translation_of: Web/API/Document/title +--- +<div>{{APIRef("DOM")}}</div> + +<p>Obtient ou défini le titre de la page.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>var docTitle</em> = <em>document</em>.title; +</pre> + +<p><code>title</code> est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par <code>document.title</code>, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous).</p> + +<pre class="syntaxbox"><em>document</em>.title = <em>newTitle</em>; +</pre> + +<p><code>newTitle</code> sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de <code>document.title</code>, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML <code><title></code>).</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> +<title>Hello World!</title> +</head> +<body> + +<script> +alert(document.title); // Affiche "Hello World!" +document.title = "Goodbye World!"; +alert(document.title); // Affiche "Goodbye World!" +</script> + +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko.</p> + +<p>Pour les documents HTML, la valeur initiale de <code>document.title</code> est le texte de la balise <code><title></code>. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL.</p> + +<p>En XUL, accéder à <code>document.title</code> avant que le document soit complètement chargé a des conséquences variables (<code>document.title</code> peut retourner une chaîne vide et définir <code>document.title</code> peut n'avoir aucun effet).</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827">DOM Level 2 HTML: document.title</a></li> + <li><a class="external" href="http://www.whatwg.org/html/#document.title" title="http://www.whatwg.org/html/#document.title">HTML5</a></li> +</ul> diff --git a/files/fr/web/api/document/tooltipnode/index.html b/files/fr/web/api/document/tooltipnode/index.html new file mode 100644 index 0000000000..681797c298 --- /dev/null +++ b/files/fr/web/api/document/tooltipnode/index.html @@ -0,0 +1,25 @@ +--- +title: Document.tooltipNode +slug: Web/API/Document/tooltipNode +tags: + - API + - DOM + - Document + - Propriétés + - XUL +translation_of: Web/API/Document/tooltipNode +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>{{draft}}</p> + +<p>Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}.</p> + +<h2 id="Usage" name="Usage">Syntaxe</h2> + +<pre class="eval">document.tooltipNode; +</pre> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<p>XUL-specific method. Not part of any specification. Defined in {{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}.</p> diff --git a/files/fr/web/api/document/touchend_event/index.html b/files/fr/web/api/document/touchend_event/index.html new file mode 100644 index 0000000000..f7067637ab --- /dev/null +++ b/files/fr/web/api/document/touchend_event/index.html @@ -0,0 +1,186 @@ +--- +title: touchend +slug: Web/API/Document/touchend_event +tags: + - Tactile + - TouchEvent + - events +translation_of: Web/API/Document/touchend_event +--- +<div>{{APIRef}}</div> + +<p>L'événement <code>touchend</code> est déclenché quand un point de contact est retiré de la surface.</p> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://w3c.github.io/touch-events/#event-touchend">Touch Events</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Oui</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">indéfinie</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>DOMString</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>WindowProxy</td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td>long (float)</td> + <td>0.</td> + </tr> + <tr> + <td><code>touches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td> + </tr> + <tr> + <td><code>targetTouches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td> + </tr> + <tr> + <td><code>changedTouches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br> + For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<p>Des exemples d'implémentation de cet événement sont disponibles : <a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events">Touch events</a>.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("22.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Les Touch events ont été implémentés dans Gecko 18.0, mais ont été supprimés dans la version 24.0 {{geckoRelease("24.0")}} dans la version bureau en raison de problèmes d'incompatibilités ({{bug(888304)}}).</p> + +<p>[2] Depuis 52.0, le support des Touch events a été réparé et réactivé dans les versions bureau de Windows.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{ domxref("GlobalEventHandlers.ontouchleave","ontouchleave")}}</li> + <li>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</li> + <li>{{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}</li> +</ul> diff --git a/files/fr/web/api/document/transitionend_event/index.html b/files/fr/web/api/document/transitionend_event/index.html new file mode 100644 index 0000000000..ab96cecb4e --- /dev/null +++ b/files/fr/web/api/document/transitionend_event/index.html @@ -0,0 +1,85 @@ +--- +title: 'Document: évènement transitionend' +slug: Web/API/Document/transitionend_event +translation_of: Web/API/Document/transitionend_event +--- +<div>{{APIRef}}</div> + +<p>L’évènement <strong><code>transitionend</code></strong> est émis quand une <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">transition CSS</a> a terminé. Dans le cas où une transition est supprimée avant d’avoir terminé, comme lorsqu’une {{cssxref("transition-property")}} est supprimée ou lorsque {{cssxref("display")}} reçoit la valeur <code>none</code>, l’évènement n’est pas généré.</p> + +<table class="properties"> + <tbody> + <tr> + <th>Bouillonne</th> + <td>Oui</td> + </tr> + <tr> + <th>Est annulable</th> + <td>Oui</td> + </tr> + <tr> + <th>Interface</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th>Propriété gestionnaire d’évènement</th> + <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code></td> + </tr> + </tbody> +</table> + +<p>L’évènement <code>transitionend</code> est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement <code>transitioncancel</code> est émis, l’évènement <code>transitionend</code> ne se produira pas.</p> + +<p>La cible originale pour cet évènement est l’<code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a></code> sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface <code>Window</code> pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page <a href="/fr/docs/Web/Events/transitionend">HTMLElement: transitionend</a>.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Le code suivant ajoute un gestionnaire sur l’évènement <code>transitionend</code> :</p> + +<pre class="brush: js">document.addEventListener('transitionend', () => { + console.log('Transition terminée'); +});</pre> + +<p>La même chose, mais en utilisant la propriété <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> au lieu de <code>addEventListener()</code> :</p> + +<pre class="brush: js">document.ontransitionend = () => { + console.log('Transition terminée'); +};</pre> + +<p><a href="/en-US/docs/Web/API/HTMLElement/transitionend_event#Live_example" lang="en-US">Voir un exemple en direct sur cet évènement.</a></p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("api.Document.transitionend_event")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Le gestionnaire d’évènement {{domxref("GlobalEventHandlers.ontransitionend")}}</li> + <li>L’interface {{domxref("TransitionEvent")}}</li> + <li>Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li> + <li>Des évènements associés : <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitionrun_event">transitionrun</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitionstart_event">transitionstart</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitioncancel_event">transitioncancel</a></code></li> + <li>Cet évènement sur les cibles <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</a></code> : <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event">transitionend</a></code></li> + <li>Cet évènement sur les cibles <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">Window</a></code> : <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/transitionend_event">transitionend</a></code></li> +</ul> diff --git a/files/fr/web/api/document/url/index.html b/files/fr/web/api/document/url/index.html new file mode 100644 index 0000000000..32b79c706d --- /dev/null +++ b/files/fr/web/api/document/url/index.html @@ -0,0 +1,24 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +<div>{{APIRef("DOM")}}</div> + +<p>Retourne l'<code><strong>URL</strong></code> du {{domxref("Document")}} sous forme de string (lecture seule).</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="brush: js">var <em>string</em> = document.URL +</pre> + +<h2 id="Specification" name="Specification">Exemple</h2> + +<pre><code>var currentURL = document.URL; +alert(currentURL);</code></pre> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></li> +</ul> diff --git a/files/fr/web/api/document/visibilitystate/index.html b/files/fr/web/api/document/visibilitystate/index.html new file mode 100644 index 0000000000..4f8c7ec071 --- /dev/null +++ b/files/fr/web/api/document/visibilitystate/index.html @@ -0,0 +1,123 @@ +--- +title: Document.visibilityState +slug: Web/API/Document/visibilityState +tags: + - API + - DOM + - Document + - Propriétés + - Visibilité +translation_of: Web/API/Document/visibilityState +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>La propriété en lecture seule <code><strong>Document.visibilityState</strong></code> renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont :</p> + +<ul> + <li><strong><code>'visible'</code></strong> : le contenu de la page peut être au-moins partiellement visible. Dans la pratique, cela signifie que la page est l'onglet de premier plan d'une fenêtre non réduite.</li> + <li><strong><code>'hidden</code>'</strong> (<em>caché</em>) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif.</li> + <li><strong><code>'prerender'</code></strong> (<em>prérendu</em>) : le contenu de la page est prérendu et n'est pas visible par l'utilisateur (considéré caché aux fins de <code><a href="/en-US/docs/Web/API/Document/hidden">document.hidden</a></code>). Le document peut démarrer dans cet état mais ne changera jamais à partir d'une autre valeur. Note : le support du navigateur est facultatif.</li> + <li><strong><code>'unloaded</code>'</strong> (<em>déchargé</em>) : la page est en train d'être déchargée de la mémoire. Remarque : le support du navigateur est facultatif.</li> +</ul> + +<p>Lorsque la valeur de cette propriété change, l'évènement {{event('visibilitychange')}} est envoyé au {{domxref("Document")}}.</p> + +<p>L'utilisation typique de ceci peut être d'empêcher le téléchargement de certains éléments actifs lorsque le document est uniquement prérendu, ou d'arrêter certaines activités lorsque le document est en arrière-plan ou réduit au minimum.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>string</em> = document.visibilityState</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush:js; line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"visibilitychange"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> document<span class="punctuation token">.</span>visibilityState <span class="punctuation token">)</span><span class="punctuation token">; + // Modifier le comportement...</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Spécification</th> + <th>Statut</th> + <th>Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>13 {{property_prefix("webkit")}}<br> + 33</td> + <td>{{CompatGeckoDesktop(18)}} [2]</td> + <td>10</td> + <td>12.10[1]</td> + <td>7</td> + </tr> + <tr> + <td><code>prerender</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4 {{property_prefix("webkit")}}</td> + <td>{{CompatGeckoMobile(18)}} [2]</td> + <td>{{CompatUnknown}}</td> + <td>12.10[1]</td> + <td>7</td> + </tr> + <tr> + <td><code>prerender</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Ne lance pas l'évènement {{event('visibilitychange')}} lorsque la fenêtre du navigateur est réduite, ni si <code>hidden</code> est défini à <code>true</code>.</p> + +<p>[2] De Firefox 10 à Firefox 51 inclus, cette propriété peut être utilisée avec le préfixe <code>-moz-</code>.</p> diff --git a/files/fr/web/api/document/width/index.html b/files/fr/web/api/document/width/index.html new file mode 100644 index 0000000000..94c91d793d --- /dev/null +++ b/files/fr/web/api/document/width/index.html @@ -0,0 +1,45 @@ +--- +title: Document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> + +<div class="note"> +<p><strong>Remarque:</strong> À partir de {{Gecko("6.0")}},<code> document.width </code>n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}.</p> +</div> + +<p>Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels.</p> + +<p>Non pris en charge par Internet Explorer.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>pixels</em> = document.width; +</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:js">function init() { + alert("La largeur du document est " + document.width + " pixels."); +} +</pre> + +<h2 id="Alternatives" name="Alternatives">Alternatives</h2> + +<pre class="syntaxbox">document.body.clientWidth /* largeur de <body> */ +document.documentElement.clientWidth /* largeur de <html> */ +window.innerWidth /* largeur de la fenêtre */ +</pre> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<p>HTML5</p> + +<h2 id="See_also" name="See_also">Voir également</h2> + +<ul> + <li>{{domxref("document.height")}}</li> + <li>{{domxref("Element.clientWidth")}}</li> + <li>{{domxref("Element.scrollWidth")}}</li> +</ul> diff --git a/files/fr/web/api/document/write/index.html b/files/fr/web/api/document/write/index.html new file mode 100644 index 0000000000..e0aec07be3 --- /dev/null +++ b/files/fr/web/api/document/write/index.html @@ -0,0 +1,96 @@ +--- +title: document.write +slug: Web/API/Document/write +tags: + - API + - DOM + - Document + - Méthodes + - Rérérence +translation_of: Web/API/Document/write +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Écrit une chaîne de texte dans un document ouvert par <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/open">document.open()</a>.</p> + +<div class="note"> +<p><strong>Note :</strong> comme <code>document.write</code> écrit <span class="short_text" id="result_box" lang="fr"><span>dans le flux de documents,</span></span> appeler <code>document.write</code> <span id="result_box" lang="fr"><span>sur un document fermé (chargé) appelle automatiquement <code>document.open</code>, ce qui efface le document.</span></span></p> +</div> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval">document.write(<em>balisage</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>markup</code></dt> + <dd>est une chaîne de caractères contenant le texte à écrire dans le document.</dd> +</dl> + +<h3 id="Exemple" name="Exemple">Exemple</h3> + +<pre><html> + +<head> +<title>Exemple de document.write</title> + +<script type="text/javascript"> + +function nouveauContenu() +{ +alert("chargement du nouveau contenu"); +document.open(); +document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>"); +document.close(); +} + +</script> +</head> + +<body onload="nouveauContenu();"> +<p>Ceci est le contenu original du document.</p> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Écrire dans un document qui a déjà été chargé sans appeler <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/open">document.open()</a> provoquera un appel automatique à <code>document.open</code>. Une fois l'écriture terminée, il est recommandé d'appeler <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/close">document.close()</a> pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément <code>h1</code> devient un nœud dans le document.</p> + +<p>Si l'appel à <code>document.write()</code> est intégré directement dans le code HTML, il n'appellera pas <code>document.open()</code>. Par exemple :</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><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"> + document<span class="punctuation token">.</span><span class="function token">write</span><span class="punctuation token">(</span><span class="string token">"<h1>Main title</h1>"</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></code></pre> + +<div class="note"> +<p><strong>Note :</strong> <code>document.write</code> et <code>document.writeln <a href="https://developer.mozilla.org/fr/docs/Archive/Web/Writing_JavaScript_for_HTML">ne fonctionnent pas dans les documents XHTML</a> (vous obtiendrez une erreur </code> "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier .xhtm ou pour tout document servi avec une <code>application/xhtml+xml</code> de <a href="https://developer.mozilla.org/fr/docs/Glossaire/Type_MIME">type MIME</a>. Plus d'informations disponibles dans la <a class="external external-icon" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">foire aux questions W3C XHTML (en)</a>.</p> +</div> + +<div class="note"> +<p><strong>Note :</strong> <code>document.write</code> dans les scripts <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">deferred (<em>différé</em>)</a> ou <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asynchronous (<em>asynchrone</em>)</a> sera ignoré et vous recevrez un message comme "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored" dans la console d'erreurs.</p> +</div> + +<div class="note"> +<p><strong>Note :</strong> Dans Edge seulement, appeler plusieurs fois <code>document.write</code> dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." <em>(autorisation refusée)</em>.</p> +</div> + +<div class="note"> +<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>À partir de la version 55, Chrome n'exécute pas les éléments <code><script></code> injectés via <code>document.write()</code> en cas d'échec de cache HTTP pour les utilisateurs sur une connexion 2G.</span></span></p> +</div> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> + +<ul> + <li><a class="external external-icon" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li> + <li><a class="external external-icon" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{ domxref("element.innerHTML") }}</li> + <li>{{ domxref("document.createElement()") }}</li> +</ul> diff --git a/files/fr/web/api/document/writeln/index.html b/files/fr/web/api/document/writeln/index.html new file mode 100644 index 0000000000..046c069cbc --- /dev/null +++ b/files/fr/web/api/document/writeln/index.html @@ -0,0 +1,58 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/writeln +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>Écrit une chaine de caractères suivie d'un retour de ligne.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval notranslate">document.writeln(<em>ligne</em>); +</pre> + +<h3 id="Parameters" name="Parameters">Paramètres</h3> + +<ul> + <li><code>ligne</code> est la chaine de caractère contenant le texte.</li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="notranslate">document.writeln("<p>Entrez votre mot de passe :</p>"); +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p><strong>document.writeln </strong>est identique à <a href="/en-US/docs/Web/API/Document/write">{{domxref("document.write")}}</a>, mais ajoute une nouvelle ligne.</p> + +<div class="note"><strong>Note :</strong> <strong>document.writeln</strong> (comme <strong>document.write</strong>) n'a aucun effet en XHTML documents (vous obtiendrez une erreur "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) dans la console). Ceci est le cas si un fichier est ouvert en local avec l'extension .xhtml ou pour tous documents utilisant le type MIME application/xhtml+xml. Pour plus d'informations, visitez <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Spécification</strong></td> + <td><strong>État</strong></td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Document.writeln")}}</p> diff --git a/files/fr/web/api/document/xmlencoding/index.html b/files/fr/web/api/document/xmlencoding/index.html new file mode 100644 index 0000000000..e3b98135f1 --- /dev/null +++ b/files/fr/web/api/document/xmlencoding/index.html @@ -0,0 +1,35 @@ +--- +title: Document.xmlEncoding +slug: Web/API/Document/xmlEncoding +tags: + - API + - DOM + - Document + - Encodage + - Propriétés + - XML +translation_of: Web/API/Document/xmlEncoding +--- +<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p> + +<p>Renvoie le codage déterminé par la déclaration XML. Devrait être <code>null</code> si non précisé ou inconnu.</p> + +<div class="warning"><strong>Warning :</strong> N'utilisez pas cet attribut ; il a été supprimé de la spécification DOM Niveau 4 et n'est plus pris en charge dans Gecko 10.0 {{ geckoRelease("10.0") }}.</div> + +<p>Si la déclaration XML indique :</p> + +<pre><?xml version="1.0" encoding="UTF-16"?> +</pre> + +<p>... le résultat doit être "UTF-16".</p> + +<p>Cependant, Firefox 3.0 inclut des informations sur l'"endianness" (par exemple, UTF-16BE pour le codage "big endian") et, tandis que cette information supplémentaire est supprimée à partir de Firefox 3.1b3, Firefox 3.1b3 consulte toujours l'encodage du fichier plutôt que la déclaration XML, comme la spécification le prévoit ("Un attribut spécifiant, <u><em>dans le cadre de la déclaration XML</em></u>, l'encodage de ce document.").</p> + +<p> </p> + +<h3 id="Spécification">Spécification</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-encoding" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...ment3-encoding</a></li> + <li>A été supprimé de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li> +</ul> diff --git a/files/fr/web/api/document/xmlversion/index.html b/files/fr/web/api/document/xmlversion/index.html new file mode 100644 index 0000000000..ce2a197b51 --- /dev/null +++ b/files/fr/web/api/document/xmlversion/index.html @@ -0,0 +1,29 @@ +--- +title: Document.xmlVersion +slug: Web/API/Document/xmlVersion +tags: + - API + - DOM + - Document + - Propriétés + - XML + - version +translation_of: Web/API/Document/xmlVersion +--- +<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p> + +<p>Renvoie le numéro de version comme spécifié dans la déclaration XML (par exemple, <code><?xml version="1.0"?></code>) ou "1.0" si la déclaration est absente.</p> + +<p>Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) :</p> + +<pre>if (document.createElement("foo").tagName == "FOO") { + /* le document n'est pas XML */ +} +</pre> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-version" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...ument3-version</a></li> + <li>A été supprimée de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li> +</ul> |