From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- files/fr/web/api/element/animate/index.md | 134 ++-- files/fr/web/api/element/attachshadow/index.md | 81 +- files/fr/web/api/element/attributes/index.md | 137 ++-- .../fr/web/api/element/childelementcount/index.md | 102 +-- files/fr/web/api/element/classlist/index.md | 173 ++--- files/fr/web/api/element/classname/index.md | 94 +-- files/fr/web/api/element/click_event/index.md | 210 +++--- files/fr/web/api/element/clientheight/index.md | 46 +- files/fr/web/api/element/clientleft/index.md | 66 +- files/fr/web/api/element/clientwidth/index.md | 61 +- files/fr/web/api/element/closest/index.md | 135 ++-- .../web/api/element/compositionend_event/index.md | 122 ++- .../api/element/compositionstart_event/index.md | 87 +-- .../api/element/compositionupdate_event/index.md | 99 +-- .../fr/web/api/element/contextmenu_event/index.md | 140 ++-- files/fr/web/api/element/copy_event/index.md | 127 ++-- files/fr/web/api/element/dblclick_event/index.md | 150 ++-- files/fr/web/api/element/error_event/index.md | 121 ++- files/fr/web/api/element/focusin_event/index.md | 107 +-- files/fr/web/api/element/focusout_event/index.md | 107 +-- files/fr/web/api/element/getattribute/index.md | 92 +-- .../fr/web/api/element/getattributenames/index.md | 51 +- files/fr/web/api/element/getattributenode/index.md | 47 +- .../fr/web/api/element/getattributenodens/index.md | 41 +- files/fr/web/api/element/getattributens/index.md | 155 ++-- .../web/api/element/getboundingclientrect/index.md | 124 ++- .../api/element/getelementsbyclassname/index.md | 77 +- .../web/api/element/getelementsbytagname/index.md | 73 +- .../api/element/getelementsbytagnamens/index.md | 68 +- files/fr/web/api/element/hasattribute/index.md | 76 +- files/fr/web/api/element/hasattributens/index.md | 71 +- files/fr/web/api/element/hasattributes/index.md | 79 +- files/fr/web/api/element/id/index.md | 63 +- files/fr/web/api/element/index.md | 832 ++++++++++----------- files/fr/web/api/element/innerhtml/index.md | 226 +++--- .../web/api/element/insertadjacentelement/index.md | 171 ++--- .../fr/web/api/element/insertadjacenthtml/index.md | 110 ++- .../fr/web/api/element/insertadjacenttext/index.md | 191 ++--- files/fr/web/api/element/localname/index.md | 134 ++-- files/fr/web/api/element/matches/index.md | 122 ++- files/fr/web/api/element/mousedown_event/index.md | 108 ++- files/fr/web/api/element/mouseenter_event/index.md | 179 +++-- files/fr/web/api/element/mouseleave_event/index.md | 170 ++--- files/fr/web/api/element/mousemove_event/index.md | 161 ++-- files/fr/web/api/element/mouseout_event/index.md | 149 ++-- files/fr/web/api/element/mouseover_event/index.md | 143 ++-- files/fr/web/api/element/mouseup_event/index.md | 104 ++- files/fr/web/api/element/namespaceuri/index.md | 69 +- files/fr/web/api/element/outerhtml/index.md | 122 ++- files/fr/web/api/element/prefix/index.md | 63 +- files/fr/web/api/element/queryselector/index.md | 169 ++--- files/fr/web/api/element/queryselectorall/index.md | 203 +++-- .../web/api/element/releasepointercapture/index.md | 91 +-- files/fr/web/api/element/removeattribute/index.md | 38 +- .../web/api/element/removeattributenode/index.md | 37 +- .../fr/web/api/element/removeattributens/index.md | 40 +- .../fr/web/api/element/requestfullscreen/index.md | 66 +- files/fr/web/api/element/scrollheight/index.md | 169 ++--- files/fr/web/api/element/scrollintoview/index.md | 87 +-- .../api/element/scrollintoviewifneeded/index.md | 43 +- files/fr/web/api/element/scrollleft/index.md | 69 +- files/fr/web/api/element/scrollleftmax/index.md | 22 +- files/fr/web/api/element/scrollto/index.md | 87 +-- files/fr/web/api/element/scrolltop/index.md | 108 ++- files/fr/web/api/element/scrollwidth/index.md | 56 +- files/fr/web/api/element/select_event/index.md | 91 +-- files/fr/web/api/element/setattribute/index.md | 83 +- files/fr/web/api/element/setattributenode/index.md | 49 +- .../fr/web/api/element/setattributenodens/index.md | 52 +- files/fr/web/api/element/setattributens/index.md | 41 +- files/fr/web/api/element/setcapture/index.md | 66 +- .../fr/web/api/element/setpointercapture/index.md | 97 +-- files/fr/web/api/element/tagname/index.md | 67 +- 73 files changed, 3571 insertions(+), 4630 deletions(-) (limited to 'files/fr/web/api/element') diff --git a/files/fr/web/api/element/animate/index.md b/files/fr/web/api/element/animate/index.md index acdf64b4b6..3dd6bd44b9 100644 --- a/files/fr/web/api/element/animate/index.md +++ b/files/fr/web/api/element/animate/index.md @@ -5,67 +5,62 @@ tags: - API translation_of: Web/API/Element/animate --- -

{{APIRef('Web Animations')}} {{SeeCompatTable}}

+{{APIRef('Web Animations')}} {{SeeCompatTable}} -

La méthode Element.animate() est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée.

+La méthode **`Element.animate()`** est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée. -
-

Note : Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.

-
+> **Note :** Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}. -

Syntaxe

+## Syntaxe -
element.animate(keyframes, options); 
+```js +element.animate(keyframes, options);  +``` -

Paramèters

+### Paramèters -
-
keyframes
-

Un objet formatté représentant un ensemble de keyframes.

-
options
-

Un nombre entier (Integer) représentant la durée de l'animation (en millisecondes), ou un objet (Object) contenant une ou plusieurs propriétés de timing:

-
-
id {{optional_inline}}
-
Une propriété unique pour animate(): une DOMString qui permet de référencer l'animation.
-
-
-
+- `keyframes` + - : Un [objet formatté représentant un ensemble de keyframes](/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats). +- `options` -
{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
+ - : Un nombre entier (_Integer_) **représentant la durée de l'animation** (en millisecondes), ou un objet (_Object_) **contenant une ou plusieurs propriétés de timing**: -

Options à venir

+ - `id {{optional_inline}}` + - : Une propriété unique pour `animate()`: une [`DOMString`](/en-US/docs/Web/API/DOMString) qui permet de référencer l'animation. -

Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche.

+{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}} -
-
composite {{optional_inline}}
-
Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est replace. -
    -
  • add induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour transform, une valeur translateX(-200px) n'annulerait pas une précédente valeur rotate(20deg) mais s'y ajouterait, pour donner translateX(-200px) rotate(20deg).
  • -
  • accumulate est similaire mais un peu plus intéressant: blur(2) et blur(5) deviennent blur(7) et non blur(2) blur(5).
  • -
  • replace, quand à elle, remplace la précédente valeur par la nouvelle. 
  • -
-
-
iterationComposite {{optional_inline}}
-
Détermine comment les valeurs se construisent, d'itération en itération, dans une même animation. Peut être définie par accumulate ou replace (voir ci-dessus). La valeur par défaut est replace.
-
spacing {{optional_inline}}
-

Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est distribute.

-
    -
  • distribute positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation.
  • -
  • paced positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres.
  • -
-
-
+#### Options à venir -

Valeur de retour

+Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche. -

Retourne un objet de type {{domxref("Animation")}}.

+- `composite {{optional_inline}}` -

Exemple

+ - : Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est `replace`. -

Dans la démo Down the Rabbit Hole (with the Web Animation API), la méthode animate() est utilisée pour immédiatement créer et jouer une animation sur l'élément #tunnel, pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation.

+ - `add` induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour `transform`, une valeur `translateX(-200px)` n'annulerait pas une précédente valeur `rotate(20deg)` mais s'y ajouterait, pour donner `translateX(-200px) rotate(20deg)`. + - `accumulate` est similaire mais un peu plus intéressant: `blur(2)` et `blur(5)` deviennent `blur(7) et non` `blur(2) blur(5)`. + - `replace`, quand à elle, remplace la précédente valeur par la nouvelle. -
document.getElementById("tunnel").animate([
+- `iterationComposite {{optional_inline}}`
+  - : Détermine comment les valeurs se construisent, d'itération en itération, **dans une même animation**. Peut être définie par `accumulate` ou `replace` (voir ci-dessus). La valeur par défaut est `replace`.
+- `spacing {{optional_inline}}`
+
+  - : Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est `distribute`.
+
+    - `distribute` positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation.
+    - `paced` positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres.
+
+### Valeur de retour
+
+Retourne un objet de type {{domxref("Animation")}}.
+
+## Exemple
+
+Dans la démo [Down the Rabbit Hole (with the Web Animation API)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010), la méthode `animate()` est utilisée pour immédiatement créer et jouer une animation sur l'élément `#tunnel,` pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation.
+
+```js
+document.getElementById("tunnel").animate([
   // keyframes
   { transform: 'translateY(0px)' },
   { transform: 'translateY(-300px)' }
@@ -74,33 +69,20 @@ translation_of: Web/API/Element/animate
   duration: 1000,
   iterations: Infinity
 });
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Initial definition
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.animate")}}

- -

Voir aussi

- - +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------ | +| {{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}} | {{Spec2('Web Animations')}} | Initial definition | + +## Compatibilité des navigateurs + +{{Compat("api.Element.animate")}} + +## Voir aussi + +- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) +- {{domxref("Element.getAnimations()")}} +- {{domxref("Animation")}} diff --git a/files/fr/web/api/element/attachshadow/index.md b/files/fr/web/api/element/attachshadow/index.md index cde6764b54..8d99934703 100644 --- a/files/fr/web/api/element/attachshadow/index.md +++ b/files/fr/web/api/element/attachshadow/index.md @@ -3,52 +3,35 @@ title: Element.attachShadow() slug: Web/API/Element/attachShadow translation_of: Web/API/Element/attachShadow --- -

{{APIRef('Shadow DOM')}} {{SeeCompatTable}}

- -

La méthode Element.attachShadow() attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son ShadowRoot.

- -

Syntaxe

- -
var shadowroot = element.attachShadow(shadowRootInit);
-
- -

Paramètres

- -
-
shadowRootInit
-
Un dictionnaire ShadowRootInit, avec les propriétés suivantes : -
    -
  • mode : une chaîne de caractères spécifiant le mode d'encapsulation de l'arbre du Shadow DOM, parmi les options suivantes : -
      -
    • open : spécifie une encapsulation ouverte.
    • -
    • closed : spécifie une encapsulation fermée.
    • -
    -
  • -
-
-
- -

Retour

- -

Retourne un {{domxref("ShadowRoot")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}}{{Spec2('Shadow DOM')}}Définition initiale.
- -

Browser compatibility

- -

{{Compat("api.Element.attachShadow")}}

+{{APIRef('Shadow DOM')}} {{SeeCompatTable}} + +La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot). + +## Syntaxe + + var shadowroot = element.attachShadow(shadowRootInit); + +### Paramètres + +- `shadowRootInit` + + - : Un dictionnaire `ShadowRootInit`, avec les propriétés suivantes : + + - `mode `: une chaîne de caractères spécifiant le *mode d'encapsulation* de l'arbre du Shadow DOM, parmi les options suivantes : + + - `open : `spécifie une encapsulation ouverte. + - `closed` : spécifie une encapsulation fermée. + +### Retour + +Retourne un {{domxref("ShadowRoot")}}. + +## Spécifications + +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}} | {{Spec2('Shadow DOM')}} | Définition initiale. | + +## Browser compatibility + +{{Compat("api.Element.attachShadow")}} diff --git a/files/fr/web/api/element/attributes/index.md b/files/fr/web/api/element/attributes/index.md index 14c104bcfa..bca756ce34 100644 --- a/files/fr/web/api/element/attributes/index.md +++ b/files/fr/web/api/element/attributes/index.md @@ -9,108 +9,83 @@ tags: - Reference translation_of: Web/API/Element/attributes --- -

{{ APIRef("DOM") }}

+{{ APIRef("DOM") }} -

La propriété Element.attributes renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (Array), aussi il n'a pas de méthodes  {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les attributs sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.

+La propriété **`Element.attributes`** renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (_Array_), aussi il n'a pas de méthodes  {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les `attributs` sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut. -

Syntaxe

+## Syntaxe -
var attr = element.attributes;
-
+ var attr = element.attributes; -

Exemple

+## Exemple -

Exemples basiques

+### Exemples basiques -
// récupère le premier élément <p> du document
-var para = document.getElementsByTagName("p")[0];
-var attr = para.attributes;
-
+ // récupère le premier élément

du document + var para = document.getElementsByTagName("p")[0]; + var attr = para.attributes; -

Énumération des attributs d'éléments

+### Énumération des attributs d'éléments -

L'indexation numérique est utile pour parcourir tous les attributs d'un élément.
- L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.

+L'indexation numérique est utile pour parcourir tous les attributs d'un élément. +L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut. -
<!DOCTYPE html>
+```html
+
 
-<html>
+
 
- <head>
-  <title>Exemple d'attributs</title>
-  <script type="text/javascript">
+ 
+  Exemple d'attributs
+  
+ 
+
+
+ 

Sample Paragraph

+
+

+ + +

+
+ + +``` + + + +## Spécifications + +| Spécification | Status | Comment | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}} | {{Spec2('DOM WHATWG')}} | De {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}} | +| {{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}} | {{Spec2('DOM3 Core')}} | Pas de changement de {{SpecName('DOM2 Core')}} | +| {{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}} | {{Spec2('DOM2 Core')}} | Pas de changement de {{SpecName('DOM1')}} | +| {{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}} | {{Spec2('DOM1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Element.attributes")}} + +## Voir aussi + +- {{domxref("NamedNodeMap")}}, l'interface de l'objet retourné +- Considérations de compatibilité entre navigateurs : sur [quirksmode](http://www.quirksmode.org/dom/w3c_core.html#attributes) (en) diff --git a/files/fr/web/api/element/childelementcount/index.md b/files/fr/web/api/element/childelementcount/index.md index a23de9fbaa..93395d4adc 100644 --- a/files/fr/web/api/element/childelementcount/index.md +++ b/files/fr/web/api/element/childelementcount/index.md @@ -11,43 +11,39 @@ tags: translation_of: Web/API/ParentNode/childElementCount original_slug: Web/API/ParentNode/childElementCount --- -
-

{{APIRef("DOM") }}

-
+{{APIRef("DOM") }} -

La propriété ParentNode.childElementCount en lecture seule renvoie un unsigned long (long non signé) représentant le nombre d'élèments fils de l'élément donné.

+La propriété **`ParentNode.childElementCount`** en lecture seule renvoie un `unsigned long` (_long non signé_) représentant le nombre d'élèments fils de l'élément donné. -
-

Note : Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.
- Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (noeuds) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, childElementCount a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.

-
+> **Note :** Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}. +> Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (_noeuds_) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, `childElementCount` a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité. -

Syntaxe

+## Syntaxe -
var count = node.childElementCount;
-
+ var count = node.childElementCount; -
-
count
-
détient la valeur de retour, un type unsigned long (long non signé) (simplement un nombre entier)
-
node
-
est un objet représentant un Document, un DocumentFragment ou un Element.
-
+- count + - : détient la valeur de retour, un type `unsigned long` (_long non signé_) (simplement un nombre entier) +- node + - : est un objet représentant un `Document`, un `DocumentFragment` ou un `Element`. -

Exemple

+## Exemple -
var foo = document.getElementById("foo");
-if (foo.childElementCount > 0) {
+```js
+var foo = document.getElementById("foo");
+if (foo.childElementCount > 0) {
     // faire quelque chose
-}
+} +``` -

Polyfill pour IE8 & IE9 & Safari

+## Polyfill pour IE8 & IE9 & Safari -

Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.

+Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas. -
;(function(constructor) {
-    if (constructor &&
-        constructor.prototype &&
+```js
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
         constructor.prototype.childElementCount == null) {
         Object.defineProperty(constructor.prototype, 'childElementCount', {
             get: function() {
@@ -59,39 +55,21 @@ if (foo.childElementCount > 0) {
             }
         });
     }
-})(window.Node || window.Element);
- -

Spécification

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}Divise l'interface ElementTraversal en {{domxref("ChildNode")}} et ParentNode. La propriété est maintenant définie sur cette dernière.
- Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}}Ajout de sa définition initiale à la pure interface ElementTraversal et de son utilisation sur {{domxref("Element")}}.
- -

Compatibilité des navigateurs

- - -

{{Compat("api.ParentNode.childElementCount")}}

- -

Voir aussi

- - +})(window.Node || window.Element); +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}} | {{Spec2('DOM WHATWG')}} | Divise l'interface `ElementTraversal` en {{domxref("ChildNode")}} et `ParentNode`. La propriété est maintenant définie sur cette dernière. Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface. | +| {{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}} | {{Spec2('Element Traversal')}} | Ajout de sa définition initiale à la pure interface `ElementTraversal` et de son utilisation sur {{domxref("Element")}}. | + +## Compatibilité des navigateurs + +{{Compat("api.ParentNode.childElementCount")}} + +## Voir aussi + +- Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. +- Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}. diff --git a/files/fr/web/api/element/classlist/index.md b/files/fr/web/api/element/classlist/index.md index 62a8048b85..0ee519f720 100644 --- a/files/fr/web/api/element/classlist/index.md +++ b/files/fr/web/api/element/classlist/index.md @@ -10,58 +10,56 @@ tags: - Propriétés translation_of: Web/API/Element/classList --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

La propriété en lecture seule Element.classList retourne une collection directe  {{domxref("DOMTokenList")}} des attributs de classe de l'élément.

+La propriété en lecture seule** \*\***`Element.classList`\*\* retourne une collection directe  {{domxref("DOMTokenList")}} des attributs de classe de l'élément. -

L'utilisation de classList est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.

+L'utilisation de `classList` est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces. -

Syntaxe

+## Syntaxe -
const elementClasses = elementNodeReference.classList;
-
+ const elementClasses = elementNodeReference.classList; -

elementClasses est une DOMTokenList représentant l'attribut class de elementNodeReference. Si l'attribut class n'a pas été défini ou est vide elementClasses.length retourne 0. element.classList est en lecture seule. Pour la modifier il convient d'utiliser les méthodes add() et remove().

+_elementClasses_ est une [DOMTokenList](/en-US/docs/DOM/DOMTokenList) représentant l'attribut class de _elementNodeReference_. Si l'attribut class n'a pas été défini ou est vide _elementClasses.length_ retourne 0. `element.classList` est en lecture seule. Pour la modifier il convient d'utiliser les méthodes `add()` et `remove()`. -

Méthodes

+## Méthodes -
-
add( String [, String] )
-
Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.
-
remove( String [, String] )
-
Supprime les classes spécifiées.
- Note: Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.
-
item( Number )
-
Renvoie la position d'une classe dans une collection.
-
toggle( String [, force] )
-
Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie false, dans le cas inverse, ajoute cette classe et retourne true.
- Si le second argument est présent : Si l'argument force est à true, ajoute cette classe, si l'argument est à false, la supprime.
-
contains( String )
-
Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.
-
replace( oldClass, newClass )
-
Remplace une classe par une autre.
-
+- add( String \[, String] ) + - : Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée. +- remove( String \[, String] ) + - : Supprime les classes spécifiées. + **Note:** Supprimer une classe qui n'existe pas NE génère PAS d'erreurs. +- **item**( Number ) + - : Renvoie la position d'une classe dans une collection. +- **toggle**( String \[, force] ) + - : Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie `false`, dans le cas inverse, ajoute cette classe et retourne `true`. + Si le second argument est présent : Si l'argument `force` est à `true`, ajoute cette classe, si l'argument est à `false`, la supprime. +- contains( String ) + - : Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément. +- replace( oldClass, newClass ) + - : Remplace une classe par une autre. -

Exemples

+## Exemples -
const div = document.createElement('div');
+```js
+const div = document.createElement('div');
 div.className = 'foo';
 
-// notre point de départ: <div class="foo"></div>
+// notre point de départ: 
console.log(div.outerHTML); // utiliser l'API classList pour supprimer et ajouter des classes div.classList.remove("foo"); div.classList.add("anotherclass"); -// <div class="anotherclass"></div> +//
console.log(div.outerHTML); // si "visible" est défini, le supprimer, sinon, l'ajouter div.classList.toggle("visible"); // ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10 -div.classList.toggle("visible", i < 10 ); +div.classList.toggle("visible", i < 10 ); console.log(div.classList.contains("foo")); @@ -75,19 +73,19 @@ div.classList.add(...cls); div.classList.remove(...cls); // remplacer la classe "foo" par la classe "bar" -div.classList.replace("foo", "bar");
+div.classList.replace("foo", "bar"); +``` -
-

Note : Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir https://bugzilla.mozilla.org/show_bug.cgi?id=814014

-
+> **Note :** Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir -

Prothèse d'émulation

+## Prothèse d'émulation -

L'ancien événement onpropertychange peut être utilisé pour créer une maquette classList vivante grâce à une propriété Element.prototype.className qui déclenche l'événement spécifié une fois qu'il est modifié.

+L'ancien événement [`onpropertychange`]() peut être utilisé pour créer une maquette `classList` vivante grâce à une propriété `Element.prototype.className` qui déclenche l'événement spécifié une fois qu'il est modifié. -

La polyfill suivante pour classList et DOMTokenList garantit une conformité totale (couverture) pour toutes les méthodes et propriétés standard de Element.prototype.classList pour les navigateurs IE10-IE11 ainsi qu'un comportement quasi conforme pour IE 6-9. Consultez ce qui suit :

+La polyfill suivante pour `classList` et `DOMTokenList` garantit une conformité **totale** (couverture) pour toutes les méthodes et propriétés standard de `Element.prototype.classList` pour les navigateurs **IE10-IE11** ainsi qu'un comportement quasi conforme pour **IE 6-9**. Consultez ce qui suit : -
// 1. String.prototype.trim polyfill
+```js
+// 1. String.prototype.trim polyfill
 if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
 (function(window){"use strict"; // prevent global namespace pollution
 if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
@@ -127,7 +125,7 @@ if (typeof DOMTokenList !== "function") (function(window){
     window.DOMTokenList = DOMTokenList;
     function whenPropChanges(){
         var evt = window.event, prop = evt.propertyName;
-        if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) {
+        if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) {
             var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
             var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
             var oldLen = protoObjProto.length;
@@ -135,7 +133,7 @@ if (typeof DOMTokenList !== "function") (function(window){
                 for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
                 resTokenList[cI-sub] = tokens[cI];
             }
-            for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
             if(prop !== "classList") return;
             skipPropChange = 1, target.classList = resTokenList, target.className = strval;
             skipPropChange = 0, resTokenList.length = tokens.length - sub;
@@ -153,7 +151,7 @@ if (typeof DOMTokenList !== "function") (function(window){
             this[cI-sub] = toks[cI];
         }
         protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
-        if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM
             enumerable:   1, get: function(){return resTokenList},
             configurable: 0, set: function(newVal){
                 skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
@@ -162,7 +160,7 @@ if (typeof DOMTokenList !== "function") (function(window){
                     for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
                     resTokenList[cI-sub] = toks[cI];
                 }
-                for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+                for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
             }
         }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
             enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
@@ -171,7 +169,7 @@ if (typeof DOMTokenList !== "function") (function(window){
         }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
         ele.attachEvent( "onpropertychange", whenPropChanges );
     }
-    try { // Much faster & cleaner version for IE8 & IE9:
+    try { // Much faster & cleaner version for IE8 & IE9:
         // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
         window.Object.defineProperty(window.Element.prototype, "classList", {
             enumerable: 1,   get: function(val){
@@ -184,8 +182,8 @@ if (typeof DOMTokenList !== "function") (function(window){
         window[" uCL"] = polyfillClassList;
         // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
         document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
-            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + //  IE6
-            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8
         );
     }
 })(window);
@@ -195,15 +193,15 @@ if (typeof DOMTokenList !== "function") (function(window){
         function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
     };
     if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
-        if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
         var oldValue = this.value;
-        return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/);
+        return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/);
     };
     if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
         DOMTokenListProto.replace = function(oldToken, newToken){
             checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
             var oldValue = this.value;
-            return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true));
+            return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true));
         };
     if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
         for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
@@ -216,69 +214,46 @@ if (typeof DOMTokenList !== "function") (function(window){
     if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
         var nextIndex = 0, that = this;
         return {next: function() {
-            return nextIndex<that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true};
+            return nextIndex
-
-

Mise en garde

- -

La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par document.createElement avant d'être ajoutés à un nœud parent) dans IE6-7.

- -

Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de classList et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation.

- -

Une note mineure est que dans IE6-7, cette prothèse utilise la propriété window[" uCL"] de l'objet window pour communiquer avec les expressions CSS, la propriété css x-uCLp sur tous les éléments, et la propriété element[" uCL"] sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété element[" uCLp"] supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété DOMTokenList[" uCL"] est ajoutée à chaque objet element["classList"] pour garantir que la DOMTokenList est liée à son propre élément.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Définition initiale.
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.classList")}}

- -

Voir aussi

- -
    -
  • {{domxref("element.className")}}
  • -
  • {{domxref("DOMTokenList")}}
  • -
+``` + +### Mise en garde + +La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par `document.createElement` avant d'être ajoutés à un nœud parent) dans IE6-7. + +Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de `classList` et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation. + +Une note mineure est que dans IE6-7, cette prothèse utilise la propriété `window[" uCL"]` de l'objet window pour communiquer avec les expressions CSS, la propriété css `x-uCLp` sur tous les éléments, et la propriété `element[" uCL"]` sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété `element[" uCLp"]` supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété `DOMTokenList[" uCL"]` est ajoutée à chaque objet `element["classList"]` pour garantir que la `DOMTokenList` est liée à son propre élément. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------- | +| {{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}} | {{Spec2("HTML WHATWG")}} | Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}. | +| {{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}} | {{Spec2("DOM WHATWG")}} | Définition initiale. | +| {{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}} | {{Spec2("DOM4")}} | | + +## Compatibilité des navigateurs + +{{Compat("api.Element.classList")}} + +## Voir aussi + +- {{domxref("element.className")}} +- {{domxref("DOMTokenList")}} diff --git a/files/fr/web/api/element/classname/index.md b/files/fr/web/api/element/classname/index.md index 125374a9db..c2c36c38ea 100644 --- a/files/fr/web/api/element/classname/index.md +++ b/files/fr/web/api/element/classname/index.md @@ -9,71 +9,51 @@ tags: - Propriétés translation_of: Web/API/Element/className --- -

{{APIRef("DOM")}}

+{{APIRef("DOM")}} -

La propriété className de l'interface {{domxref("Element")}} récupère et définit la valeur de l'attribut class de l'élément spécifié.

+La propriété **className** de l'interface {{domxref("Element")}} récupère et définit la valeur de l'[attribut `class`](/fr/docs/Web/HTML/Attributs_universels/class) de l'élément spécifié. -

Syntaxe

+## Syntaxe -
var cName = elementNodeReference.className;
-elementNodeReference.className = cName;
+ var cName = elementNodeReference.className; + elementNodeReference.className = cName; -
    -
  • cName est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.
  • -
+- \*_cName_ est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.\* -

Exemple

+## Exemple -
let elm = document.getElementById('item');
+```js
+let elm = document.getElementById('item');
 
 if(elm.className === 'active'){
     elm.className = 'inactive';
 } else {
     elm.className = 'active';
-}
- -

Notes

- -

Le nom className est utilisé pour cette propriété au lieu de class à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.

- -

className peut être une instance de {{domxref("SVGAnimatedString")}} si l'element est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de className ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. 

- -
elm.setAttribute('class', elm.getAttribute('class'))
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.className")}}

- -

Voir aussi

- -
    -
  • {{domxref("element.classList")}}
  • -
+} +``` + +## Notes + +Le nom `className` est utilisé pour cette propriété au lieu de `class` à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM. + +`className` peut être une instance de {{domxref("SVGAnimatedString")}} si l'`element` est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de `className` ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. + +```js +elm.setAttribute('class', elm.getAttribute('class')) +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-element-classname", "element.className")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}} | {{Spec2("DOM2 HTML")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Element.className")}} + +## Voir aussi + +- {{domxref("element.classList")}} diff --git a/files/fr/web/api/element/click_event/index.md b/files/fr/web/api/element/click_event/index.md index 8e18c242d9..3e56af91cd 100644 --- a/files/fr/web/api/element/click_event/index.md +++ b/files/fr/web/api/element/click_event/index.md @@ -9,145 +9,125 @@ tags: - click translation_of: Web/API/Element/click_event --- -
{{APIRef}}
+{{APIRef}} -

L'évènement click est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.

+L'évènement **`click`** est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément. - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onclick", "onclick")}}
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement + {{domxref("GlobalEventHandlers.onclick", "onclick")}} +
-

Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments.

+Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments. -

click est déclenché après que les évènements {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés.

+`click` est déclenché après que les évènements {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés. -

Notes d'utilisation

+## Notes d'utilisation -

L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est click) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "target")}}) a été cliquée. Autrement dit, detail vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité).

+L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est `click`) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "target")}}) a été cliquée. Autrement dit, `detail` vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité). -

Internet Explorer

+### Internet Explorer -

Internet Explorer 8 & 9 souffrent d'un bug où les élméents avec une {{cssxref("background-color")}} calculée qui vaut transparent qui recouvrent d'autres éléments ne recevront pas d'évènements click. Les évènements click toucheront les éléments en dessous à la place.

+Internet Explorer 8 & 9 souffrent d'un bug où les élméents avec une {{cssxref("background-color")}} calculée qui vaut [`transparent`](/fr/docs/Web/CSS/color_value#transparent_keyword) qui recouvrent d'autres éléments ne recevront pas d'évènements `click`. Les évènements `click` toucheront les éléments en dessous à la place. -

Quelques méthodes de contournement pour ce bug :

+Quelques méthodes de contournement pour ce bug : -
    -
  • Pour IE9 : -
      -
    • Utiliser {{cssxref("background-color")}}: rgba(0,0,0,0)
    • -
    • Appliquer {{cssxref("opacity")}}: 0 et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas transparent
    • -
    -
  • -
  • Pour IE8 et IE9 : appliquer filter: alpha(opacity=0); et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas transparent
  • -
+- Pour IE9 : -

Safari Mobile

+ - Utiliser {{cssxref("background-color")}}`: rgba(0,0,0,0)` + - Appliquer {{cssxref("opacity")}}`: 0` et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas [`transparent`](/fr/docs/Web/CSS/color_value#transparent_keyword) -

Safari Mobile 7.0+ (et antérieures) souffre d'un bug indiquant que les évènements click ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. {{HTMLElement("div")}}) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir la documentation de Safari sur le fait de rendre les éléments cliquables et la définition d'un élément cliquable.

+- Pour IE8 et IE9 : appliquer `filter: alpha(opacity=0);` et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas [`transparent`](/fr/docs/Web/CSS/color_value#transparent_keyword) -

Méthodes de contournement connues :

+### Safari Mobile -
    -
  • Ajouter {{cssxref("cursor")}}: pointer; sur l'élément ou l'un des ancêtres.
  • -
  • Ajouter un attribut onclick="void(0)" à l'élément ou à l'un des ancêtres (tant que ce n'est pas {{HTMLElement("body")}}).
  • -
  • Utiliser un élément interactif (ex. {{HTMLElement("a")}}) plutôt qu'un élément généralement non-interactif (ex. {{HTMLElement("div")}}).
  • -
  • Ne pas utiliser la délégation d'évènement pour click.
  • -
+Safari Mobile 7.0+ (et antérieures) [souffre d'un bug](https://bugs.webkit.org/show_bug.cgi?id=153887) indiquant que les évènements `click` ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. {{HTMLElement("div")}}) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir [la documentation de Safari sur le fait de rendre les éléments cliquables](https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6) et [la définition d'un élément cliquable](https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7). -

Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) :

+Méthodes de contournement connues : -
    -
  • {{HTMLElement("a")}} (tant qu'il a un attribut href)
  • -
  • {{HTMLElement("area")}} (tant qu'il a un attribut href)
  • -
  • {{HTMLElement("button")}}
  • -
  • {{HTMLElement("img")}}
  • -
  • {{HTMLElement("input")}}
  • -
  • {{HTMLElement("label")}} (tant qu'il est associé à un formulaire)
  • -
  • {{HTMLElement("textarea")}}
  • -
  • Liste à compléter.
  • -
+- Ajouter {{cssxref("cursor")}}`: pointer;` sur l'élément ou l'un des ancêtres. +- Ajouter un attribut `onclick="void(0)"` à l'élément ou à l'un des ancêtres (tant que ce n'est pas {{HTMLElement("body")}}). +- Utiliser un élément interactif (ex. {{HTMLElement("a")}}) plutôt qu'un élément généralement non-interactif (ex. {{HTMLElement("div")}}). +- Ne pas utiliser la délégation d'évènement pour `click`. -

Exemples

+Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) : -

Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML ({{HTMLElement("button")}}).

+- {{HTMLElement("a")}} (tant qu'il a un attribut `href`) +- {{HTMLElement("area")}} (tant qu'il a un attribut `href`) +- {{HTMLElement("button")}} +- {{HTMLElement("img")}} +- {{HTMLElement("input")}} +- {{HTMLElement("label")}} (tant qu'il est associé à un formulaire) +- {{HTMLElement("textarea")}} +- _Liste à compléter._ -

HTML

+## Exemples -
<button>Cliquer ici</button>
+Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML ({{HTMLElement("button")}}). -

JavaScript

+### HTML -
const button = document.querySelector('button');
+```html
+
+```
 
-button.addEventListener('click', event => {
+### JavaScript
+
+```js
+const button = document.querySelector('button');
+
+button.addEventListener('click', event => {
   button.innerHTML = `Nombre de clics : ${event.detail}`;
-});
- -

Résultat

- -

Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro.

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-click')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-click', 'click')}}{{Spec2('DOM3 Events')}}
{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}{{Spec2('DOM2 Events')}}
+}); +``` + +### Résultat + +Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro. + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('UI Events', '#event-type-click')}} | {{Spec2('UI Events')}} | +| {{SpecName('DOM3 Events', '#event-type-click', 'click')}} | {{Spec2('DOM3 Events')}} | +| {{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}} | {{Spec2('DOM2 Events')}} | + +## Compatibilité des navigateurs + +{{Compat("api.Element.click_event")}} + +## Voir aussi + +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -

Compatibilité des navigateurs

- -

{{Compat("api.Element.click_event")}}

- -

Voir aussi

- - + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) + - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) diff --git a/files/fr/web/api/element/clientheight/index.md b/files/fr/web/api/element/clientheight/index.md index 3e88e1a801..ff97dd6ae1 100644 --- a/files/fr/web/api/element/clientheight/index.md +++ b/files/fr/web/api/element/clientheight/index.md @@ -4,46 +4,42 @@ slug: Web/API/Element/clientHeight translation_of: Web/API/Element/clientHeight browser-compat: api.Element.clientHeight --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

La propriété en lecture seule Element.clientHeight vaut zéro pour les éléments sans CSS ou sans boîte de disposition en ligne/incise ; sinon elle vaut la hauteur interne d'un élément, exprimée en pixels. Cette hauteur inclut le remplissage (padding) mais exclut les bordures, les marges et les éventuelles barres de défilement horizontales.

+La propriété en lecture seule **`Element.clientHeight`** vaut zéro pour les éléments sans CSS ou sans boîte de disposition en ligne/incise ; sinon elle vaut la hauteur interne d'un élément, exprimée en pixels. Cette hauteur inclut le remplissage (padding) mais exclut les bordures, les marges et les éventuelles barres de défilement horizontales. -

clientHeight peut être calculée comme : hauteur CSS + remplissage CSS - hauteur des barres de défilement horizontales s'il y en a.

+`clientHeight` peut être calculée comme : _hauteur CSS_ + _remplissage CSS_ - _hauteur des barres de défilement horizontales_ s'il y en a. -

Lorsque clientHeight est utilisée sur l'élément racine (l'élément <html>), (ou sur <body> si le document est en mode de compatibilité (quirks mode)), c'est la hauteur de la zone d'affichage (viewport) (sans tenir compte des barres de défilement) qui est renvoyée. Il s'agit ici d'un cas aux limites pour clientHeight.

+Lorsque `clientHeight` est utilisée sur l'élément racine (l'élément ``), (ou sur `` si le document est en mode de compatibilité (quirks mode)), c'est la hauteur de la zone d'affichage (viewport) (sans tenir compte des barres de défilement) qui est renvoyée. [Il s'agit ici d'un cas aux limites pour `clientHeight`](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight). -
-

Note : Cette propriété sera arrondie en un entier. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser element.getBoundingClientRect().

-
+> **Note :** Cette propriété sera arrondie en un entier. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser [`element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect). -

Syntaxe

+## Syntaxe -
+```js
 var intElemClientHeight = element.clientHeight;
-
+``` -

intElemClientHeight est un entier correspondant à la valeur de clientHeight pour l'élément représenté par element, exprimée en pixels. La propriété clientHeight est uniquement accessible en lecture-seule.

+`intElemClientHeight` est un entier correspondant à la valeur de `clientHeight` pour l'élément représenté par `element`, exprimée en pixels. La propriété `clientHeight` est uniquement accessible en lecture-seule. -

Exemples

+## Exemples -

+![](dimensions-client.png) -

Spécifications

+## Spécifications -

{{Specifications}}

+{{Specifications}} -

Notes

+### Notes -

clientHeight est une propriété introduite par le modèle objet d'Internet Explorer.

+`clientHeight` est une propriété introduite par le modèle objet d'Internet Explorer. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat}}

+{{Compat}} -

Voir aussi

+## Voir aussi - +- [`HTMLElement.offsetHeight`](/fr/docs/Web/API/HTMLElement/offsetHeight) +- [`Element.scrollHeight`](/fr/docs/Web/API/Element/scrollHeight) +- [Déterminer les dimensions des éléments](/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) diff --git a/files/fr/web/api/element/clientleft/index.md b/files/fr/web/api/element/clientleft/index.md index 72f3d71689..2183d340f9 100644 --- a/files/fr/web/api/element/clientleft/index.md +++ b/files/fr/web/api/element/clientleft/index.md @@ -4,45 +4,41 @@ slug: Web/API/Element/clientLeft translation_of: Web/API/Element/clientLeft browser-compat: api.Element.clientLeft --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

La propriété en lecture seule Element.clientLeft représente la largeur de la bordure gauche d'un élément, exprimée en pixels. Cette largeur inclut l'éventuelle largeur de la barre de défilement verticale si le texte se lit de droite à gauche et s'il y a un dépassement entraînant l'apparition d'une barre de défilement à gauche. clientLeft n'inclut pas la marge gauche ou le remplissage (padding) à gauche.

+La propriété en lecture seule **`Element.clientLeft`** représente la largeur de la bordure gauche d'un élément, exprimée en pixels. Cette largeur inclut l'éventuelle largeur de la barre de défilement verticale si le texte se lit de droite à gauche et s'il y a un dépassement entraînant l'apparition d'une barre de défilement à gauche. `clientLeft` n'inclut pas la marge gauche ou le remplissage (padding) à gauche. -

Lorsque la préférence layout.scrollbar.side est paramétrée à 1 ou à 3 et que la direction du texte est de droite à gauche, alors la barre de défilement verticale est placée à gauche et ce placement aura donc un impact sur la valeur de clientLeft.

+Lorsque la préférence [`layout.scrollbar.side`](http://kb.mozillazine.org/Layout.scrollbar.side) est paramétrée à 1 ou à 3 et que la direction du texte est de droite à gauche, **alors la barre de défilement verticale est placée à gauche** et ce placement aura donc un impact sur la valeur de `clientLeft`. -
-

Note : Cette propriété sera arrondie en une valeur entière. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser element.getBoundingClientRect().

-
+> **Note :** Cette propriété sera arrondie en une valeur entière. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser [`element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect). -
-

Note : Lorsqu'un élément se voit appliquer display: inline, clientLeft renvoie 0, quelle que soit la bordure de l'élément.

-
+> **Note :** Lorsqu'un élément se voit appliquer `display: inline`, `clientLeft` renvoie `0`, quelle que soit la bordure de l'élément. -

Syntaxe

+## Syntaxe -
+```js
 var left = element.clientLeft;
-
+``` -

Exemple

+## Exemple -

Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure border-left noire de 24px. La valeur de clientLeft correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px.

+Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure `border-left` noire de 24px. La valeur de `clientLeft` correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px. -

HTML

+### HTML -
-<div id="container">
-  <div id="contained">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+```html
+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis - nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> - </div> -</div> -

+ nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ + +``` -

CSS

+### CSS -
+```css
 
 #container {
 	margin: 3rem;
@@ -57,24 +53,24 @@ var left = element.clientLeft;
 	overflow: auto;
 	background-color: white;
 }
-
+``` -

Résultat

+### Résultat {{EmbedLiveSample("Exemple", 400, 350)}} -

Spécifications

+## Spécifications -

{{Specifications}}

+{{Specifications}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat}}

+{{Compat}} -

Notes

+## Notes -

clientLeft fut introduit avec le modèle d'objet DHTML d'Internet Explorer.

+`clientLeft` fut introduit avec le modèle d'objet DHTML d'Internet Explorer. -

La position de la barre de défilement verticale pour les textes écrits de droite à gauche dépend de la préférence layout.scrollbar.side.

+La position de la barre de défilement verticale pour les textes écrits de droite à gauche dépend de la préférence [`layout.scrollbar.side`](http://kb.mozillazine.org/Layout.scrollbar.side). -

Les applications utilisant le moteur Gecko prennent en charge clientLeft depuis Gecko 1.9 (Firefox 3 l'implémente avec le bug 111207). Cette propriété n'est pas prise en charge pour Firefox 2 et les versions antérieures.

+Les applications utilisant le moteur Gecko prennent en charge `clientLeft` depuis Gecko 1.9 (Firefox 3 l'implémente avec [le bug 111207](https://bugzilla.mozilla.org/show_bug.cgi?id=111207)). Cette propriété n'est pas prise en charge pour Firefox 2 et les versions antérieures. diff --git a/files/fr/web/api/element/clientwidth/index.md b/files/fr/web/api/element/clientwidth/index.md index 9a3bd1012c..229934df6d 100644 --- a/files/fr/web/api/element/clientwidth/index.md +++ b/files/fr/web/api/element/clientwidth/index.md @@ -8,59 +8,40 @@ tags: - Reference translation_of: Web/API/Element/clientWidth --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

La propriété Element.clientWidth vaut zéro pour les éléments en ligne (inline) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (padding) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales.

+La propriété **`Element.clientWidth`** vaut zéro pour les éléments en ligne (_inline_) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (_padding_) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales. -

Lorsque clientWidth est utilisée sur l'élément racine (l'élément <html> par défaut ou <body> si le document utilise le mode quirks), c'est la largeur de la zone d'affichage (viewport) à l'exception des barres de défilement qui est renvoyée. Il s'agit d'un cas au limite pour clientWidth.

+Lorsque `clientWidth` est utilisée sur l'élément racine (l'élément `` par défaut ou `` si le document utilise le mode _quirks_), c'est la largeur de la zone d'affichage (_viewport_) à l'exception des barres de défilement qui est renvoyée. [Il s'agit d'un cas au limite pour `clientWidth`](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth). -
-

Note : La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez {{domxref("element.getBoundingClientRect()")}}.

-
+> **Note :** La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez {{domxref("element.getBoundingClientRect()")}}. -

Syntaxe

+## Syntaxe -
var intElemClientWidth = element.clientWidth;
+ var intElemClientWidth = element.clientWidth; -

intElemClientWidth est un entier correspondant à la largeur d'element, en pixels. La propriété clientWidth est uniquement accessible en lecture-seule.

+`intElemClientWidth` est un entier correspondant à la largeur d'`element`, en pixels. La propriété `clientWidth` est uniquement accessible en lecture-seule. -

Exemple

+## Exemple -

+![](dimensions-client.png) -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}{{Spec2("CSSOM View")}}
+| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}} | {{Spec2("CSSOM View")}} | | -

Notes

+### Notes -

clientWidth fut d'abord introduit avec le modèle objet DHTML de Microsoft Internet Explorer.

+`clientWidth` fut d'abord introduit avec le modèle objet DHTML de Microsoft Internet Explorer. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs +{{Compat("api.Element.clientWidth")}} +## Voir aussi -

{{Compat("api.Element.clientWidth")}}

- -

Voir aussi

- - +- {{domxref("HTMLElement.offsetWidth")}} +- {{domxref("Element.scrollWidth")}} +- [Déterminer les dimensions des éléments](/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) diff --git a/files/fr/web/api/element/closest/index.md b/files/fr/web/api/element/closest/index.md index 61a0e9f93f..a805089953 100644 --- a/files/fr/web/api/element/closest/index.md +++ b/files/fr/web/api/element/closest/index.md @@ -8,47 +8,45 @@ tags: - Méthodes translation_of: Web/API/Element/closest --- -

{{APIRef('Shadow DOM')}}

+{{APIRef('Shadow DOM')}} -

La méthode Element.closest() renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie null.

+La méthode **`Element.closest()`** renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie `null`. -

Syntaxe

+## Syntaxe -
var elt = element.closest(selecteurs);
-
+ var elt = element.closest(selecteurs); -

Paramètres

+### Paramètres -
-
selecteurs
-
Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que "p:hover, .toto + q"
-
+- `selecteurs` + - : Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que `"p:hover, .toto + q"` -

Valeur de retour

+### Valeur de retour -

L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun.

+L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun. -

Exceptions

+### Exceptions -
    -
  • {{exception("SyntaxError")}} sera levée si selecteurs n'est pas une liste de sélecteurs valide.
  • -
+- {{exception("SyntaxError")}} sera levée si `selecteurs` n'est pas une liste de sélecteurs valide. -

Exemples

+## Exemples -

HTML

+### HTML -
<article>
-  <div id="div-01">Here is div-01
-    <div id="div-02">Here is div-02
-      <div id="div-03">Here is div-03</div>
-    </div>
-  </div>
-</article>
+```html +
+
Here is div-01 +
Here is div-02 +
Here is div-03
+
+
+
+``` -

JavaScript

+### JavaScript -
var el = document.getElementById('div-03');
+```js
+var el = document.getElementById('div-03');
 
 var r1 = el.closest("#div-02");
 // Renvoie l'élément avec l'identifiant id=div-02
@@ -57,20 +55,22 @@ var r2 = el.closest("div div");
 // Renvoie le plus proche ancêtre qui est un div
 // dans un div. Ici, c'est div-03 lui-même.
 
-var r3 = el.closest("article > div");
+var r3 = el.closest("article > div");
 // Renvoie le plus proche ancêtre qui est un div
 // et dont l'élément parent est article. Ici c'est
 // div-01.
 
 var r4 = el.closest(":not(div)");
 // Renvoie le plus proche ancêtre qui n'est pas un
-// div. Dans ce cas, c'est l'élément article.
+// div. Dans ce cas, c'est l'élément article. +``` -

Polyfill

+## Polyfill -

Pour les navigateurs qui ne prennent pas en charge Element.closest() mais qui permettent d'utiliser element.matches() (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :

+Pour les navigateurs qui ne prennent pas en charge `Element.closest()` mais qui permettent d'utiliser `element.matches()` (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant : -
if (!Element.prototype.matches)
+```js
+if (!Element.prototype.matches)
     Element.prototype.matches = Element.prototype.msMatchesSelector ||
                                 Element.prototype.webkitMatchesSelector;
 
@@ -81,13 +81,15 @@ if (!Element.prototype.closest)
         do {
             if (el.matches(s)) return el;
             el = el.parentElement || el.parentNode;
-        } while (el !== null && el.nodeType == 1);
+        } while (el !== null && el.nodeType == 1);
         return null;
-    };
+ }; +``` -

Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web :

+Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web : -
if (window.Element && !Element.prototype.closest) {
+```js
+if (window.Element && !Element.prototype.closest) {
   Element.prototype.closest =
   function(s) {
     var matches = (this.document || this.ownerDocument).querySelectorAll(s),
@@ -95,44 +97,29 @@ if (!Element.prototype.closest)
         el = this;
     do {
       i = matches.length;
-      while (--i >= 0 && matches.item(i) !== el) {};
-    } while ((i < 0) && (el = el.parentElement));
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
     return el;
   };
 }
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.closest")}}

- -

Notes de compatibilité

- -
    -
  • Dans Edge document.createElement(tagName).closest(tagName) retournera null si l'élément n'est pas attaché au DOM au préalable.
  • -
- -

Voir aussi

- -
    -
  • L'interface {{domxref("Element")}}
  • -
  • La syntaxe pour les sélecteurs
  • -
  • Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.
  • -
+``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Element.closest")}} + +### Notes de compatibilité + +- Dans Edge `document.createElement(tagName).closest(tagName)` retournera `null` si l'élément n'est pas attaché au DOM au préalable. + +## Voir aussi + +- L'interface {{domxref("Element")}} +- [La syntaxe pour les sélecteurs](/fr/Apprendre/CSS/Les_bases/Les_sélecteurs) +- Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}. diff --git a/files/fr/web/api/element/compositionend_event/index.md b/files/fr/web/api/element/compositionend_event/index.md index 546f6b3c5f..3032e6c928 100644 --- a/files/fr/web/api/element/compositionend_event/index.md +++ b/files/fr/web/api/element/compositionend_event/index.md @@ -4,47 +4,50 @@ slug: Web/API/Element/compositionend_event translation_of: Web/API/Element/compositionend_event original_slug: Web/Events/compositionend --- -

L'événement compositionend est déclenché lorsque la composition d'un texte via {{glossary("input method editor", "méthode de saisie")}} est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile).

+L'événement **`compositionend`** est déclenché lorsque la composition d'un texte via {{glossary("input method editor", "méthode de saisie")}} est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile). -

Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie Pinyin.

+Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie [Pinyin](https://en.wikipedia.org/wiki/Pinyin). - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("CompositionEvent")}}
Propriété pour la gestion d'évènementAucune
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("CompositionEvent")}}
Propriété pour la gestion d'évènementAucune
-

Exemple

+## Exemple -

Html

+### Html -
<div class="control">
-  <label for="name">Sur macOS, cliquez sur la boîte de texte,<br> puis appuyez sur <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd>:</label>
-  <input type="text" id="example" name="example">
-</div>
+```html
+
+ + +
-<div class="event-log"> - <label>Log d'événement:</label> - <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> - <button class="clear-log">Effacer</button> -</div>
+
+ + + +
+``` - +``` -

JS

+### JS -
const inputElement = document.querySelector('input[type="text"]');
+```js
+const inputElement = document.querySelector('input[type="text"]');
 const log = document.querySelector('.event-log-contents');
 const clearLog = document.querySelector('.clear-log');
 
-clearLog.addEventListener('click', () => {
+clearLog.addEventListener('click', () => {
     log.textContent = '';
 });
 
@@ -93,36 +97,24 @@ function handleEvent(event) {
 
 inputElement.addEventListener('compositionstart', handleEvent);
 inputElement.addEventListener('compositionupdate', handleEvent);
-inputElement.addEventListener('compositionend', handleEvent);
- -

Resultat

- -

{{ EmbedLiveSample('Exemple', '100%', '180px') }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatus
{{SpecName('UI Events', '#event-type-compositionend')}}{{Spec2('UI Events')}}
+inputElement.addEventListener('compositionend', handleEvent); +``` + +### Resultat + +{{ EmbedLiveSample('Exemple', '100%', '180px') }} + +## Spécifications + +| Spécification | Status | +| ------------------------------------------------------------------------ | ---------------------------- | +| {{SpecName('UI Events', '#event-type-compositionend')}} | {{Spec2('UI Events')}} | -

Compatibilités navigateurs

+## Compatibilités navigateurs -

{{Compat("api.Element.compositionend_event")}}

+{{Compat("api.Element.compositionend_event")}} -

Evénements liés

+## Evénements liés -
    -
  • {{Event("compositionstart")}}
  • -
  • {{Event("compositionupdate")}}
  • -
+- {{Event("compositionstart")}} +- {{Event("compositionupdate")}} diff --git a/files/fr/web/api/element/compositionstart_event/index.md b/files/fr/web/api/element/compositionstart_event/index.md index 4de27018bc..b1370d4893 100644 --- a/files/fr/web/api/element/compositionstart_event/index.md +++ b/files/fr/web/api/element/compositionstart_event/index.md @@ -10,11 +10,11 @@ tags: translation_of: Web/API/Element/compositionstart_event original_slug: Web/Events/compositionstart --- -
{{APIRef}}
+{{APIRef}} -

L'événement compositionstart est déclenché lorsqu'un système de composition de texte tel qu'une {{glossary("input method editor","méthode de saisie")}} démarre une nouvelle session de composition.

+L'événement **`compositionstart`** est déclenché lorsqu'un système de composition de texte tel qu'une {{glossary("input method editor","méthode de saisie")}} démarre une nouvelle session de composition. -

Par exemple, cet événement pourrait être déclenché après qu'un utilisateur a commencé à saisir un caractère chinois en utilisant un Pinyin IME.

+Par exemple, cet événement pourrait être déclenché après qu'un utilisateur a commencé à saisir un caractère chinois en utilisant un [Pinyin](https://en.wikipedia.org/wiki/Pinyin) IME. @@ -37,30 +37,35 @@ original_slug: Web/Events/compositionstart
-

Exemples

+## Exemples -
const inputElement = document.querySelector('input[type="text"]');
+```js
+const inputElement = document.querySelector('input[type="text"]');
 
-inputElement.addEventListener('compositionstart', (event) => {
+inputElement.addEventListener('compositionstart', (event) => {
   console.log(`generated characters were: ${event.data}`);
-});
+}); +``` -

Exemple concret

+### Exemple concret -

HTML

+#### HTML -
<div class="control">
-  <label for="name">Sur macOS, cliquez dans la zone de texte ci-dessous,<br> puis tapez <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd> :</label>
-  <input type="text" id="example" name="example">
-</div>
+```html
+
+ + +
-<div class="event-log"> - <label>Event log:</label> - <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> - <button class="clear-log">Clear</button> -</div>
+
+ + + +
+``` - +``` -

JS

+#### JS -
const inputElement = document.querySelector('input[type="text"]');
+```js
+const inputElement = document.querySelector('input[type="text"]');
 const log = document.querySelector('.event-log-contents');
 const clearLog = document.querySelector('.clear-log');
 
-clearLog.addEventListener('click', () => {
+clearLog.addEventListener('click', () => {
   log.textContent = '';
 });
 
@@ -110,35 +116,22 @@ function handleEvent(event) {
 inputElement.addEventListener('compositionstart', handleEvent);
 inputElement.addEventListener('compositionupdate', handleEvent);
 inputElement.addEventListener('compositionend', handleEvent);
-
+``` -

Résultat

+#### Résultat -

{{ EmbedLiveSample('Live_example', '100%', '180px') }}

+{{ EmbedLiveSample('Live_example', '100%', '180px') }} -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('UI Events', '#event-type-compositionstart')}}{{Spec2('UI Events')}}
+| Spécification | Statut | +| ---------------------------------------------------------------------------- | ---------------------------- | +| {{SpecName('UI Events', '#event-type-compositionstart')}} | {{Spec2('UI Events')}} | -

Compatibilités navigateur

+## Compatibilités navigateur -

{{Compat("api.Element.compositionstart_event")}}

+{{Compat("api.Element.compositionstart_event")}} -

Voir aussi

+## Voir aussi -
    -
  • Événements liés : {{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}.
  • -
+- Événements liés : {{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}. diff --git a/files/fr/web/api/element/compositionupdate_event/index.md b/files/fr/web/api/element/compositionupdate_event/index.md index f0ae9bc134..06c5973e57 100644 --- a/files/fr/web/api/element/compositionupdate_event/index.md +++ b/files/fr/web/api/element/compositionupdate_event/index.md @@ -4,83 +4,38 @@ slug: Web/API/Element/compositionupdate_event translation_of: Web/API/Element/compositionupdate_event original_slug: Web/Events/compositionupdate --- -

L'événement compositionupdate est déclenché lorsqu'un caractère est ajouté à un passage de texte en train d'être composé (démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).

+L'événement **compositionupdate** est déclenché lorsqu'un caractère est ajouté à un passage de texte en train d'être composé (`démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).` -

Informations générales

+## Informations générales -
-
Interface
-
{{domxref("TouchEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
{{domxref("Element")}}
-
+- Interface + - : {{domxref("TouchEvent")}} +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : {{domxref("Element")}} -

Propriétés

+## Propriétés - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}Elément ayant le focus qui traite la composition. Nul si non-accessible.
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce qu'il se propage?
cancelable {{ReadOnlyInline}}booleanPeut-il être annulé?
view {{ReadOnlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (fenêtre du document).
detail {{ReadOnlyInline}}long (float)0.
data {{ReadOnlyInline}}{{domxref("DOMString")}} (string)La chaîne de caractères originale éditée ou une chaîne vide.
locale {{ReadOnlyInline}}{{domxref("DOMString")}} (string)Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.
+| Property | Type | Description | +| ------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------ | +| `target` {{ReadOnlyInline}} | {{domxref("EventTarget")}} | Elément ayant le focus qui traite la composition. Nul si non-accessible. | +| `type` {{ReadOnlyInline}} | {{domxref("DOMString")}} | Le type de l'événement. | +| `bubbles` {{ReadOnlyInline}} | `boolean` | Est-ce qu'il se propage? | +| `cancelable` {{ReadOnlyInline}} | `boolean` | Peut-il être annulé? | +| `view` {{ReadOnlyInline}} | {{domxref("WindowProxy")}} | {{domxref("Document.defaultView")}} (fenêtre du document). | +| `detail` {{ReadOnlyInline}} | `long` (`float`) | 0. | +| `data `{{ReadOnlyInline}} | {{domxref("DOMString")}} (string) | La chaîne de caractères originale éditée ou une chaîne vide. | +| `locale `{{ReadOnlyInline}} | {{domxref("DOMString")}} (string) | Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide. | -

Compatibilités navigateur

+## Compatibilités navigateur -

{{Compat("api.Element.compositionupdate_event")}}

+{{Compat("api.Element.compositionupdate_event")}} -

Voir aussi

+## Voir aussi -
    -
  • {{Event("compositionstart")}}
  • -
  • {{Event("compositionupdate")}}
  • -
  • {{Event("compositionend")}}
  • -
+- {{Event("compositionstart")}} +- {{Event("compositionupdate")}} +- {{Event("compositionend")}} diff --git a/files/fr/web/api/element/contextmenu_event/index.md b/files/fr/web/api/element/contextmenu_event/index.md index 28b416e62e..96d593fcfb 100644 --- a/files/fr/web/api/element/contextmenu_event/index.md +++ b/files/fr/web/api/element/contextmenu_event/index.md @@ -10,95 +10,83 @@ tags: - contextemenu translation_of: Web/API/Element/contextmenu_event --- -
{{APIRef}}
+{{APIRef}} -

L'évènement contextmenu est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.

+L'évènement **`contextmenu`** est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel. -

Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.

+Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante. -

Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement contextmenu sur l'élément cible.

+Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement `contextmenu` sur l'élément cible. - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{DOMxRef("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{DOMxRef("MouseEvent")}}
Propriété pour la gestion d'évènement + {{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}} +
-

Exemples

+## Exemples -

Dans cet exemple, on annule l'action par défaut de l'évènement contextmenu avec preventDefault() lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe.

+Dans cet exemple, on annule l'action par défaut de l'évènement `contextmenu` avec `preventDefault()` lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe. -

HTML

+### HTML -
<p id="noContextMenu">Le menu contextuel a été désactivé sur ce paragraphe.</p>
-<p>Mais pas sur celui-ci.</p>
+```html +

Le menu contextuel a été désactivé sur ce paragraphe.

+

Mais pas sur celui-ci.

+``` -

JavaScript

+### JavaScript -
noContext = document.getElementById('noContextMenu');
+```js
+noContext = document.getElementById('noContextMenu');
 
-noContext.addEventListener('contextmenu', e => {
+noContext.addEventListener('contextmenu', e => {
   e.preventDefault();
 });
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{ SpecName('HTML WHATWG', 'indices.html#event-contextmenu', 'contextmenu')}}{{Spec2('HTML WHATWG')}}
+``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{ SpecName('HTML WHATWG', 'indices.html#event-contextmenu', 'contextmenu')}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.Element.contextmenu_event")}} + +## Voir aussi + +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -

Compatibilité des navigateurs

- -

{{Compat("api.Element.contextmenu_event")}}

- -

Voir aussi

- - + - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`click`](/fr/docs/Web/API/Element/click_event) + - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) diff --git a/files/fr/web/api/element/copy_event/index.md b/files/fr/web/api/element/copy_event/index.md index d4b370823a..042a046235 100644 --- a/files/fr/web/api/element/copy_event/index.md +++ b/files/fr/web/api/element/copy_event/index.md @@ -4,104 +4,63 @@ slug: Web/API/Element/copy_event translation_of: Web/API/Element/copy_event original_slug: Web/Events/copy --- -

L'événement copy est déclenché lorsque l'utilisateur initie une copie par le biais de l'interface du navigateur (par exemple, Ctrl/Cmd+C ou "copier" du menu contextuel) et en réponse d'un appel de {{domxref("Document.execCommand", "document.execCommand('copy')")}} autorisé.

+L'événement **copy** est déclenché lorsque l'utilisateur initie une copie par le biais de l'interface du navigateur (par exemple, Ctrl/Cmd+C ou "copier" du menu contextuel) et en réponse d'un appel de {{domxref("Document.execCommand", "document.execCommand('copy')")}} autorisé. -

Informations générales

+## Informations générales -
-
Spécification
-
Clipboard
-
Interface
-
{{domxref("ClipboardEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Oui
-
Cible
-
{{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}
-
Action par défaut
-
Voir ce-dessous
-
+- Spécification + - : [Clipboard](https://www.w3.org/TR/clipboard-apis/#the-copy-action) +- Interface + - : {{domxref("ClipboardEvent")}} +- Propagation + - : Oui +- Annulable + - : Oui +- Cible + - : {{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}} +- Action par défaut + - : Voir ce-dessous -

Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}:

+Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}: -
document.addEventListener('copy', function(e){
+```js
+document.addEventListener('copy', function(e){
     e.clipboardData.setData('text/plain', 'Hello, world!');
-    e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
+    e.clipboardData.setData('text/html', 'Hello, world!');
     e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
-});
+}); +``` -

Un gestionnaire de cet événement ne peut pas lire les données du presse-papiers en utilisant {{domxref("DataTransfer.getData", "clipboardData.getData()")}}.

+Un gestionnaire de cet événement ne peut pas lire les données du presse-papiers en utilisant {{domxref("DataTransfer.getData", "clipboardData.getData()")}}. -

L'action par défaut de l'événement dépend de la source de celui-ci et du comportement du gestionnaire:

+L'action par défaut de l'événement dépend de la source de celui-ci et du comportement du gestionnaire: -
    -
  • Un événement de copie synthétique n'a pas d'action par défaut;
  • -
  • Si l'événement n'a pas été annulé: Copie de la sélection (s'il y a) dans le presse-papiers;
  • -
  • Si le gestionnaire a annulé l'événement et appelé setData(): Copie le contenu de clipboardData de {{domxref("ClipboardEvent")}};
  • -
  • Si le gestionnaire a annulé l'événement sans appelé setData(): Aucune action.
  • -
+- Un événement de copie [synthétique](/fr/docs/Web/Guide/Events/Creating_and_triggering_events) n'a pas d'action par défaut; +- Si l'événement n'a pas été annulé: Copie de la sélection (s'il y a) dans le presse-papiers; +- Si le gestionnaire a annulé l'événement et appelé setData(): Copie le contenu de _clipboardData_ de {{domxref("ClipboardEvent")}}; +- Si le gestionnaire a annulé l'événement sans appelé setData(): Aucune action. -

Propriétés

+## Propriétés - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+| Property | Type | Description | +| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('Clipboard API', '#clipboard-event-copy')}}{{Spec2('Clipboard API')}}
+| Spécification | Statut | +| ------------------------------------------------------------------------ | ------------------------------------ | +| {{SpecName('Clipboard API', '#clipboard-event-copy')}} | {{Spec2('Clipboard API')}} | -

Compatibilités navigateur

+## Compatibilités navigateur -

{{Compat("api.Element.copy_event")}}

+{{Compat("api.Element.copy_event")}} -

Voir aussi

+## Voir aussi -
    -
  • Événements relatifs : {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/paste_event", "paste")}}
  • -
  • Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/copy_event", "copy")}}
  • -
  • Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/copy_event", "copy")}}
  • -
- \ No newline at end of file +- Événements relatifs : {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/paste_event", "paste")}} +- Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/copy_event", "copy")}} +- Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/copy_event", "copy")}} diff --git a/files/fr/web/api/element/dblclick_event/index.md b/files/fr/web/api/element/dblclick_event/index.md index 9f82b49bd9..7c17db5238 100644 --- a/files/fr/web/api/element/dblclick_event/index.md +++ b/files/fr/web/api/element/dblclick_event/index.md @@ -10,55 +10,62 @@ tags: - dblclick translation_of: Web/API/Element/dblclick_event --- -
{{APIRef}}
+{{APIRef}} -

L'évènement dblclick se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).

+L'évènement **`dblclick`** se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court). -

dblclick se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).

+`dblclick` se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}). - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènements{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènements + {{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}} +
-

Exemples

+## Exemples -

Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.

+Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus. -

JavaScript

+### JavaScript -
const card = document.querySelector('aside');
+```js
+const card = document.querySelector('aside');
 
 card.addEventListener('dblclick', function (e) {
   card.classList.toggle('large');
-});
+}); +``` -

HTML

+### HTML -
<aside>
-  <h3>Une tuile</h3>
-  <p>Double-cliquer pour redimensionner cet objet.</p>
-</aside>
+```html + +``` -

CSS

+### CSS -
aside {
+```css
+aside {
   background: #fe9;
   border-radius: 1em;
   display: inline-block;
@@ -70,50 +77,35 @@ card.addEventListener('dblclick', function (e) {
 
 .large {
   transform: scale(1.3);
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 700, 200)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('DOM3 Events')}}
+} +``` + +### Résultat + +{{EmbedLiveSample("Exemples", 700, 200)}} + +## Spécifications + +| Spécification | État | +| ------------------------------------------------------------------------------------ | -------------------------------- | +| {{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}} | {{Spec2('UI Events')}} | +| {{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}} | {{Spec2('DOM3 Events')}} | + +## Compatibilité des navigateurs + +{{Compat("api.Element.dblclick_event")}} + +## Voir aussi + +- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) +- D'autres évènements connexes -

Compatibilité des navigateurs

- -

{{Compat("api.Element.dblclick_event")}}

- -

Voir aussi

- - + - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - [mouseover](/fr/docs/Web/API/Element/mouseover_event) + - [`click`](/fr/docs/Web/API/Element/click_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) + - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) diff --git a/files/fr/web/api/element/error_event/index.md b/files/fr/web/api/element/error_event/index.md index 8c17b86401..1f0a577102 100644 --- a/files/fr/web/api/element/error_event/index.md +++ b/files/fr/web/api/element/error_event/index.md @@ -10,82 +10,45 @@ tags: translation_of: Web/API/Element/error_event original_slug: Web/Events/error --- -

L'événement error (erreur) est déclenché lorsqu'une ressource n'a pas pu être chargée ; les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.

- -

Informations générales

- -
-
Spécification
-
DOM L3
-
Interface
-
{{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par MediaStream Recording API  et sinon {{domxref("Event")}}.
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
{{domxref("Element")}}
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
- -

Pour des évènements MediaStream Recording

- -

Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}.

- -

{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}}

- -

Voir aussi

- -
-
{{domxref("GlobalEventHandlers.onerror")}}
-
Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}}
-
{{domxref("HTMLMediaElement.onerror")}}
-
Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}}   et {{HTMLElement("video")}} .
-
{{domxref("MediaRecorder.onerror")}}
-
Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}}
-
+L'événement **error** _(erreur)_ est déclenché lorsqu'une ressource n'a pas pu être chargée ; les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API. + +## Informations générales + +- Spécification + - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error) +- Interface + - : {{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API)  et sinon {{domxref("Event")}}. +- Propagation + - : Non +- Annulable + - : Non +- Cible + - : {{domxref("Element")}} +- Action par défaut + - : Aucune + +## Propriétés + +| Property | Type | Description | +| ------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------- | +| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The event target (the topmost target in the DOM tree). | +| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | The type of event. | +| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event is cancellable or not. | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) | +| `detail` {{readonlyInline}} | `long` (`float`) | 0. | + +### Pour des évènements MediaStream Recording + +Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}. + +{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}} + +## Voir aussi + +- {{domxref("GlobalEventHandlers.onerror")}} + - : Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}} +- {{domxref("HTMLMediaElement.onerror")}} + - : Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}}   et {{HTMLElement("video")}} . +- {{domxref("MediaRecorder.onerror")}} + - : Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}} diff --git a/files/fr/web/api/element/focusin_event/index.md b/files/fr/web/api/element/focusin_event/index.md index 4930d87a2e..6a6a6f66de 100644 --- a/files/fr/web/api/element/focusin_event/index.md +++ b/files/fr/web/api/element/focusin_event/index.md @@ -4,73 +4,40 @@ slug: Web/API/Element/focusin_event translation_of: Web/API/Element/focusin_event original_slug: Web/Events/focusin --- -

L'événement focusin est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec focus est que focusin se propage.

- -

Informations générales

- -
-
Spécification
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
{{domxref("Element")}}
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
- -

Compatibilité navigateur

- -

{{Compat("api.Element.focusin_event")}}

- -

Evénements liés

- -
    -
  • {{event("focus")}}
  • -
  • {{event("blur")}}
  • -
  • {{event("focusin")}}
  • -
  • {{event("focusout")}}
  • -
+L'événement **focusin** est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec [`focus`](/fr/docs/Mozilla_event_reference/focus_%28event%29) est que **focusin** se propage. + +## Informations générales + +- Spécification + - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn) +- Interface + - : {{domxref("FocusEvent")}} +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : {{domxref("Element")}} +- Action par défaut + - : Aucune + +## Propriétés + +| Property | Type | Description | +| ---------------------------------------- | -------------------------------------------------- | ------------------------------------------ | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | Event target losing focus. | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | +| `relatedTarget` {{readonlyInline}} | {{domxref("EventTarget")}} (DOM element) | Event target receiving focus. | + +## Compatibilité navigateur + +{{Compat("api.Element.focusin_event")}} + +## Evénements liés + +- {{event("focus")}} +- {{event("blur")}} +- {{event("focusin")}} +- {{event("focusout")}} diff --git a/files/fr/web/api/element/focusout_event/index.md b/files/fr/web/api/element/focusout_event/index.md index 382060c404..366b9dbfbf 100644 --- a/files/fr/web/api/element/focusout_event/index.md +++ b/files/fr/web/api/element/focusout_event/index.md @@ -4,73 +4,40 @@ slug: Web/API/Element/focusout_event translation_of: Web/API/Element/focusout_event original_slug: Web/Events/focusout --- -

L'évènement focusout est déclenché lorsqu'un élément du DOM est sur le point de perdre le focus. La différence principale entre cet événement et blur est que ce dernier ne se propage pas.

- -

Informations générales

- -
-
Spécification
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
{{domxref("Element")}}
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.focusout_event")}}

- -

Evénements liés

- -
    -
  • {{event("focus")}}
  • -
  • {{event("blur")}}
  • -
  • {{event("focusin")}}
  • -
  • {{event("focusout")}}
  • -
+L'évènement `focusout `est déclenché lorsqu'un élément du DOM est sur le point de perdre le focus. La différence principale entre cet événement et [blur]() est que ce dernier ne se propage pas. + +## Informations générales + +- Spécification + - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout) +- Interface + - : {{domxref("FocusEvent")}} +- Propagation + - : Oui +- Annulable + - : Non +- Cible + - : {{domxref("Element")}} +- Action par défaut + - : Aucune + +## Propriétés + +| Property | Type | Description | +| ---------------------------------------- | -------------------------------------------------- | ------------------------------------------ | +| `target` {{readonlyInline}} | {{domxref("EventTarget")}} | Event target losing focus. | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | The type of event. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event normally bubbles or not. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Whether the event is cancellable or not. | +| `relatedTarget` {{readonlyInline}} | {{domxref("EventTarget")}} (DOM element) | Event target receiving focus. | + +## Compatibilité des navigateurs + +{{Compat("api.Element.focusout_event")}} + +## Evénements liés + +- {{event("focus")}} +- {{event("blur")}} +- {{event("focusin")}} +- {{event("focusout")}} diff --git a/files/fr/web/api/element/getattribute/index.md b/files/fr/web/api/element/getattribute/index.md index e0aa50f459..410b54fe7a 100644 --- a/files/fr/web/api/element/getattribute/index.md +++ b/files/fr/web/api/element/getattribute/index.md @@ -10,76 +10,78 @@ tags: - Reference translation_of: Web/API/Element/getAttribute --- -

{{APIRef("DOM")}}

+{{APIRef("DOM")}} -

getAttribute renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit null soit "" (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails.

+`getAttribute` renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit `null` soit `""` (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails. -

Syntaxe

+## Syntaxe -
let attribut = element.getAttribute(nom_attribut)
-
+ let attribut = element.getAttribute(nom_attribut) -

+où -
    -
  • attribut est une chaine contenant la valeur de l'attribut nom_attribut.
  • -
  • nom_attribut est le nom de l'attribut dont on désire connaitre la valeur.
  • -
+- `attribut` est une chaine contenant la valeur de l'attribut `nom_attribut`. +- `nom_attribut` est le nom de l'attribut dont on désire connaitre la valeur. -

Exemple

+## Exemple -

Soit l'HTML :

+Soit l'HTML : -
const div1 = document.getElementById("div1");
+ const div1 = document.getElementById("div1"); -

Exemple de JavaScript :

+Exemple de JavaScript : -
const div1 = document.getElementById("div1");
-//=> <div id="div1">Hi Champ!</div>
+    const div1 = document.getElementById("div1");
+    //=> 
Hi Champ!
-const attributID = div1.getAttribute("id"); -//=> "div1" + const attributID = div1.getAttribute("id"); + //=> "div1" -cont alignement = div1.getAttribute("align"); -//=> null -
+ cont alignement = div1.getAttribute("align"); + //=> null -

Description

+## Description -

Sensibilité à la casse

+### Sensibilité à la casse -

Le paramètre nom_attribut est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML.

+Le paramètre `nom_attribut` est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML. -

Attributs inexistants

+### Attributs inexistants -

À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient null lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide "", et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler getAttribute() s'il est possible que l'attribut n'existe pas sur l'élément spécifié.

+À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient `null` lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide `""`, et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler `getAttribute()` s'il est possible que l'attribut n'existe pas sur l'élément spécifié. -

Récupération de nonces

+### Récupération de nonces -

Pour des raisons de sécurité, les nonces CSP des sources autres que des scripts, telles que les feuilles de style CSS, et les appels .getAttribute("nonce") sont interdits.

+Pour des raisons de sécurité, les _nonces_ [CSP](/fr/docs/Web/HTTP/CSP) des sources autres que des scripts, telles que les feuilles de style CSS, et les appels `.getAttribute("nonce")` sont interdits. -
let nonce = script.getAttribute("nonce");
-// renvoie une chaine vide
+```js example-bad +let nonce = script.getAttribute("nonce"); +// renvoie une chaine vide +``` -

Plutôt que de tenter de lire le nonce via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :

+Plutôt que de tenter de lire le _nonce_ via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} : -
let nonce = script.nonce;
+```js +let nonce = script.nonce; +``` -

Spécifications

+## Spécifications - - - - - - - - - - + + + + + + + + + +
SpécificationÉtat
{{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}}{{Spec2('DOM WHATWG')}}
SpécificationÉtat
+ {{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}} + {{Spec2('DOM WHATWG')}}
-

Compatibilité des navigateurs

+## Compatibilité des navigateurs -
{{Compat("api.Element.getAttribute")}}
+{{Compat("api.Element.getAttribute")}} diff --git a/files/fr/web/api/element/getattributenames/index.md b/files/fr/web/api/element/getattributenames/index.md index d99f4465fe..87f96635a6 100644 --- a/files/fr/web/api/element/getattributenames/index.md +++ b/files/fr/web/api/element/getattributenames/index.md @@ -9,58 +9,49 @@ tags: - Méthodes translation_of: Web/API/Element/getAttributeNames --- -

{{APIRef("DOM")}}

+{{APIRef("DOM")}} -

Element.getAttributeNames() renvoie les noms des attributs de l'élément sous la forme d'un {{jsxref("Array")}} (tableau) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide.

+`Element.getAttributeNames()` renvoie les noms des attributs de l'élément sous la forme d'un {{jsxref("Array")}} (_tableau_) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide. -

L'utilisation de getAttributeNames() complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}.

+L'utilisation de `getAttributeNames()` complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}. -

Syntaxe

+## Syntaxe -
let attributeNames = element.getAttributeNames();
-
+ let attributeNames = element.getAttributeNames(); -

Exemple

+## Exemple -
// Itérer sur les attributs de l'élément
+```js
+// Itérer sur les attributs de l'élément
 for(let name of element.getAttributeNames())
 {
 	let value = element.getAttribute(name);
 	console.log(name, value);
 }
-
+``` -

Polyfill

+## Polyfill -
if (Element.prototype.getAttributeNames == undefined) {
+```html
+if (Element.prototype.getAttributeNames == undefined) {
   Element.prototype.getAttributeNames = function () {
     var attributes = this.attributes;
     var length = attributes.length;
     var result = new Array(length);
-    for (var i = 0; i < length; i++) {
+    for (var i = 0; i < length; i++) {
       result[i] = attributes[i].name;
     }
     return result;
   };
-}
+} +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}{{Spec2("DOM WHATWG")}}Définition initiale.
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}} | {{Spec2("DOM WHATWG")}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Element.getAttributeNames")}}

+{{Compat("api.Element.getAttributeNames")}} diff --git a/files/fr/web/api/element/getattributenode/index.md b/files/fr/web/api/element/getattributenode/index.md index 3fd3fd508d..f805ace861 100644 --- a/files/fr/web/api/element/getattributenode/index.md +++ b/files/fr/web/api/element/getattributenode/index.md @@ -10,42 +10,39 @@ tags: - Noeud translation_of: Web/API/Element/getAttributeNode --- -

{{ APIRef("DOM") }}

+{{ APIRef("DOM") }} -

Résumé

+## Résumé -

Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud Attr.

+Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud `Attr`. -

Syntaxe

+## Syntaxe -
var attrNode = element.getAttributeNode(attrName);
+```js +var attrNode = element.getAttributeNode(attrName); +``` -
    -
  • attrNode est un nœud Attr pour l'attribut demandé.
  • -
  • attrName est une chaîne de caractères qui contient le nom de l'attribut.
  • -
+- `attrNode` est un nœud `Attr` pour l'attribut demandé. +- `attrName` est une chaîne de caractères qui contient le nom de l'attribut. -

Exemple

+## Exemple -
// html: <div id="top" />
-var t = document.getElementById("top");
-var idAttr = t.getAttributeNode("id");
-alert(idAttr.value == "top")
-
+ // html:
+ var t = document.getElementById("top"); + var idAttr = t.getAttributeNode("id"); + alert(idAttr.value == "top") -

Notes

+## Notes -

Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, getAttributeNode passe en minuscules son argument avant de continuer.

+Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, `getAttributeNode` passe en minuscules son argument avant de continuer. -

Les nœuds Attr héritent de Node, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme parentNode, previousSibling, et nextSibling sont null pour un nœud Attr. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété ownerElement.

+Les nœuds `Attr` héritent de `Node`, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme [parentNode](fr/DOM/element.parentNode), [previousSibling](fr/DOM/element.previousSibling), et [nextSibling](fr/DOM/element.nextSibling) sont `null` pour un nœud `Attr`. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété `ownerElement`. -

getAttribute est habituellement utilisé à la place de getAttributeNode pour obtenir la valeur d'un attribut d'un élément.

+[getAttribute](fr/DOM/element.getAttribute) est habituellement utilisé à la place de `getAttributeNode` pour obtenir la valeur d'un attribut d'un élément. -

{{ DOMAttributeMethods() }}

+{{ DOMAttributeMethods() }} -

Spécification

+## Spécification - \ No newline at end of file +- [DOM Level 2 Core : getAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8) (non normative) +- [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents) diff --git a/files/fr/web/api/element/getattributenodens/index.md b/files/fr/web/api/element/getattributenodens/index.md index a9a9a56f60..0a4b46bb5b 100644 --- a/files/fr/web/api/element/getattributenodens/index.md +++ b/files/fr/web/api/element/getattributenodens/index.md @@ -3,38 +3,33 @@ title: element.getAttributeNodeNS slug: Web/API/Element/getAttributeNodeNS translation_of: Web/API/Element/getAttributeNodeNS --- -

{{ ApiRef() }}

+{{ ApiRef() }} -

Résumé

+### Résumé -

Renvoie le nœud Attr pour l'attribut avec l'espace de noms et le nom donnés.

+Renvoie le nœud `Attr` pour l'attribut avec l'espace de noms et le nom donnés. -

Syntaxe

+### Syntaxe -
attributeNode = element.getAttributeNodeNS(namespace,nodeName)
-
+ attributeNode = element.getAttributeNodeNS(namespace,nodeName) -

Paramètres

+### Paramètres -
-
attributeNode
-
Le nœud pour l'attribut spécifié.
-
namespace
-
Une chaîne spécifiant l'espace de noms de l'attribut.
-
nodeName
-
Une chaîne spécifiant le nom de l'attribut.
-
+- `attributeNode` + - : Le nœud pour l'attribut spécifié. +- `namespace` + - : Une chaîne spécifiant l'espace de noms de l'attribut. +- `nodeName` + - : Une chaîne spécifiant le nom de l'attribut. -

== Example == TBD The example needs to be fixed // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top"

+\== Example == TBD The example needs to be fixed // html: \
t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "", "id"); // iNode.value = "full-top" -

Notes

+### Notes -

getAttributeNodeNS est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}.

+`getAttributeNodeNS` est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}. -

{{ DOMAttributeMethods() }}

+{{ DOMAttributeMethods() }} -

Spécification

+### Spécification - \ No newline at end of file +- [DOM Level 2 Core: getAttributeNodeNS (en)](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElGetAtNodeNS) (non normative) diff --git a/files/fr/web/api/element/getattributens/index.md b/files/fr/web/api/element/getattributens/index.md index 6a5d33ddb7..39c6079fbe 100644 --- a/files/fr/web/api/element/getattributens/index.md +++ b/files/fr/web/api/element/getattributens/index.md @@ -8,117 +8,92 @@ tags: - Reference translation_of: Web/API/Element/getAttributeNS --- -

{{APIRef("DOM")}}

+{{APIRef("DOM")}} -

getAttributeNS() est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit null, soit "" (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails.

+**`getAttributeNS()`** est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit `null`, soit `""` (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails. -

Syntaxe

+## Syntaxe -
attrVal =element.getAttributeNS(namespace,name)
-
+ attrVal =element.getAttributeNS(namespace,name) -

Paramètres

+### Paramètres -
-
namespace
-
L'espace de noms dans lequel rechercher l'attribut spécifié.
-
name
-
Le nom de l'attribut à chercher.
-
+- `namespace` + - : L'espace de noms dans lequel rechercher l'attribut spécifié. +- `name` + - : Le nom de l'attribut à chercher. -

Valeur de retour

+### Valeur de retour -

La valeur de chaîne de caractères de l'attribut spécifié. Si  l'attribut n'existe pas, le résultat est null.

+La valeur de chaîne de caractères de l'attribut spécifié. Si  l'attribut n'existe pas, le résultat est `null`. -
-

Note : Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.

-
+> **Note :** Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants. -

Exemples

+## Exemples -

Le document SVG suivant utilise une valeur d'attribut foo d'un espace de nom spécifique :

+Le document SVG suivant utilise une valeur d'attribut `foo` d'un espace de nom spécifique : -
<svg xmlns="http://www.w3.org/2000/svg"
-    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
+```xml
+
 
-  <circle id="target" cx="12" cy="12" r="10" stroke="#444"
-      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/>
+  
 
-  <script type="text/javascript">
+  
+ + +``` -

Dans un document HTML5, il faut utiliser test:foo pour accéder à l'attribut car les espaces de noms ne sont pas pris en charge.

+Dans un document HTML5, il faut utiliser `test:foo` pour accéder à l'attribut car les espaces de noms ne sont pas pris en charge. -
<!DOCTYPE html>
-<html>
-<body>
+```html
+
+
+
 
-<svg xmlns="http://www.w3.org/2000/svg"
-    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
-  <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2"
-      fill="none" test:foo="Foo value"/>
-</svg>
+
+  
+
 
-<script type="text/javascript">
+
+
+
+
+```
+
+## Notes
+
+Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place `getAttribute()` .
+
+La méthode `getAttributeNS` diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla.
+
+Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler `getAttributeNS()` s'il est possible que l'attribut demandé n'existe pas sur l'élément spécifié.
+
+{{ DOMAttributeMethods() }}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaire                                                                                                                                                                                                 |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}} | {{Spec2("DOM WHATWG")}} |                                                                                                                                                                                                             |
+| {{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}                 | {{Spec2("DOM3 Core")}}     | Specifie qu'une exception `NOT_SUPPORTED_ERR`  est levée si l'agent utilisateur ne supporte pas la fonctionnalité `"XML"`. Spécifie également que `null` doit être passé pour n'avoir aucun espace de noms. |
+| {{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}                 | {{Spec2("DOM2 Core")}}     | Définition initiale                                                                                                                                                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.getAttributeNS")}}
+
+## Voir aussi
+
+- [Code snippets:getAttributeNS](/fr/Add-ons/Code_snippets/getAttributeNS)
diff --git a/files/fr/web/api/element/getboundingclientrect/index.md b/files/fr/web/api/element/getboundingclientrect/index.md
index 7fef648005..5e64f11e08 100644
--- a/files/fr/web/api/element/getboundingclientrect/index.md
+++ b/files/fr/web/api/element/getboundingclientrect/index.md
@@ -25,115 +25,111 @@ tags:
   - scrollHeight
 translation_of: Web/API/Element/getBoundingClientRect
 ---
-
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

La méthode Element.getBoundingClientRect() retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la zone d'affichage.

+La méthode **`Element.getBoundingClientRect()`** retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la [zone d'affichage](/fr/docs/Glossary/Viewport). -

Syntaxe

+## Syntaxe -
objetRect = object.getBoundingClientRect();
+```js +objetRect = object.getBoundingClientRect(); +``` -

Valeur de retour

+### Valeur de retour -

La valeur de retour est un objet {{domxref("DOMRect")}} qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés left, top, right, bottom, x, y, width, et height, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que width et height sont relatives au coin en haut à gauche de la zone d'affichage.Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode.

+La valeur de retour est un objet {{domxref("DOMRect")}} qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés `left`, `top`, `right`, `bottom`, `x`, `y`, `width`, et `height`, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que `width` et `height` sont relatives au coin en haut à gauche de la zone d'affichage.![Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode.](element-box-diagram.png) -

Les propriétés width et height de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le padding et border-width, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété width ou height de l'élément + padding + border-width. Mais si box-sizing: border-box est défini pour l'élément, cela correpondrait seulement width ou height.

+Les propriétés `width` et `height` de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le `padding` et `border-width`, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété `width` ou `height` de l'élément + `padding` + `border-width`. Mais si [`box-sizing: border-box`](/fr/docs/Web/CSS/box-sizing) est défini pour l'élément, cela correpondrait seulement `width` ou `height`. -

La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément.

+La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément. -

Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie alors un rectangle pour lequel width et height valent 0 et où top et left correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément.

+Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie alors un rectangle pour lequel `width` et `height` valent 0 et où `top` et `left` correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément. -

La distance de défilement qui a été parcourue dans la zone d'affichage (ou n'importe quel élément que l'on peut faire défiler) est prise en compte pour calculer le rectangle de délimitation. Cela signifie que les côtés du rectangle de délimitation (top, right, bottom, left) change ses valeurs à chaque fois que la position de défilement change (parce que les valeurs sont relatives à la zone d'affichage et ne sont pas absolues).

+La distance de défilement qui a été parcourue dans la zone d'affichage (ou n'importe quel élément que l'on peut faire défiler) est prise en compte pour calculer le rectangle de délimitation. Cela signifie que les côtés du rectangle de délimitation (`top`, `right`, `bottom`, `left`) change ses valeurs à chaque fois que la position de défilement change (parce que les valeurs sont relatives à la zone d'affichage et ne sont pas absolues). -

Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés top et left (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle.

+Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés `top` et `left` (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle. -

Solution de prise en charge multi-navigateurs

+### Solution de prise en charge multi-navigateurs -

Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser window.pageXOffset et window.pageYOffset plutôt que window.scrollX et window.scrollY. Les scripts qui ne peuvent pas utiliser window.pageXOffset, window.pageYOffset, window.scrollX ou window.scrollY pourront utiliser cette méthode :

+Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser `window.pageXOffset` et `window.pageYOffset` plutôt que `window.scrollX` et `window.scrollY.` Les scripts qui ne peuvent pas utiliser `window.pageXOffset`, `window.pageYOffset`, `window.scrollX` ou `window.scrollY` pourront utiliser cette méthode : -
// Pour scrollX
+```js
+// Pour scrollX
 (((t = document.documentElement) || (t = document.body.parentNode))
-  && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
+  && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
 // Pour scrollY
 (((t = document.documentElement) || (t = document.body.parentNode))
-  && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
-
+ && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop +``` -

Exemple

+## Exemple -

Ce simple exemple récupère l'objet DOMRect représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous.

+Ce simple exemple récupère l'objet `DOMRect` représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous. -
<div></div>
+```html +
+``` -
div {
+```css
+div {
   width: 400px;
   height: 200px;
   padding: 20px;
   margin: 50px auto;
   background: purple;
-}
+} +``` -
let elem = document.querySelector('div');
-let rect = elem.getBoundingClientRect();
-for (let key in rect) {
+```js
+let elem = document.querySelector('div');
+let rect = elem.getBoundingClientRect();
+for (let key in rect) {
   if(typeof rect[key] !== 'function') {
-    let para = document.createElement('p');
+    let para = document.createElement('p');
     para.textContent  = `${ key } : ${ rect[key] }`;
     document.body.appendChild(para);
   }
-}
+} +``` -

{{EmbedLiveSample('Example', '100%', 640)}}

+{{EmbedLiveSample('Example', '100%', 640)}} -

Remarquez comme les width/height sont égales à - width/height + padding.

+Remarquez comme les `width`/`height` sont égales à +`width`/`height` + `padding`. -

Remarquez aussi que les valeurs de x/left, - y/top, right, et bottom sont égales à la distance absolue depuis le bord de la zone d'affichage jusqu'au coté de l'element dans chaque cas.

+Remarquez aussi que les valeurs de `x`/`left`, +`y`/`top`, `right`, et `bottom` sont égales à la distance absolue depuis le bord de la zone d'affichage jusqu'au coté de l'element dans chaque cas. -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}Définition initiale.
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}} | {{Spec2("CSSOM View")}} | Définition initiale. | -

Notes

+### Notes -

L'objet DOMRect retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement DOMRectReadOnly. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet ClientRect qu'ils retournent empêche d'ajouter le support de x et y.

+L'objet `DOMRect` retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement `DOMRectReadOnly`. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet [ClientRect ]()qu'ils retournent empêche d'ajouter le support de `x` et `y`. -

En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés topleft, right, et bottom.

+En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés `top`, `left`, `right`, et `bottom`. -

Les propriétés dans l'objet DOMRect retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs in et for...in vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que Object.assign() et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées.

+Les propriétés dans l'objet `DOMRect` retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs `in` et `for...in` vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que `Object.assign()` et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées. -
rect = elt.getBoundingClientRect()
+```js
+rect = elt.getBoundingClientRect()
 // The result in emptyObj is {}
 emptyObj = Object.assign({}, rect)
 emptyObj = { ...rect }
-{ width, ...emptyObj } = rect
+{ width, ...emptyObj } = rect +``` -

Les propriétés top, left, right, et bottom de DOMRect sont calculées en utilisant les valeurs des autres propriétés de l'objet.

+Les propriétés `top`, `left`, `right`, et `bottom` de `DOMRect` sont calculées en utilisant les valeurs des autres propriétés de l'objet. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -
{{Compat("api.Element.getBoundingClientRect")}}
+{{Compat("api.Element.getBoundingClientRect")}} -

Voir aussi

+## Voir aussi - +- {{domxref("Element.getClientRects", "getClientRects()")}} +- [MSDN: `getBoundingClientRect`]() +- [MSDN: `ClientRect`](), une version plus ancienne de `DOMRect` diff --git a/files/fr/web/api/element/getelementsbyclassname/index.md b/files/fr/web/api/element/getelementsbyclassname/index.md index 016d94535a..1f729a405b 100644 --- a/files/fr/web/api/element/getelementsbyclassname/index.md +++ b/files/fr/web/api/element/getelementsbyclassname/index.md @@ -10,60 +10,55 @@ tags: - getElementByClassName translation_of: Web/API/Element/getElementsByClassName --- -

{{APIRef("DOM")}}

+{{APIRef("DOM")}} -

La méthode Element.getElementsByClassName() retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris.

+La méthode **`Element.getElementsByClassName()`** retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris. -

À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre.

+À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre. -

Syntaxe

+## Syntaxe -
var elements = element.getElementsByClassName(names);
+ var elements = element.getElementsByClassName(names); -
    -
  • elements est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés.
  • -
  • names est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace.
  • -
  • element est n'importe quel {{domxref("Element")}} du document.
  • -
+- **elements** est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés. +- **names** est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace. +- *element* est n'importe quel {{domxref("Element")}} du document. -

Exemples

+## Exemples -

Obtient tous les élements ayant une classe test:

+Obtient tous les élements ayant une classe `test`: -
element.getElementsByClassName('test');
+```js +element.getElementsByClassName('test'); +``` -

Obtient tous les élements ayant à la fois la classe red et la classe test:

+Obtient tous les élements ayant à la fois la classe `red` et la classe `test`: -
element.getElementsByClassName('red test');
+```js +element.getElementsByClassName('red test'); +``` -

Obtient tous les élements qui ont une classe test, à l'intérieur d'un élement qui a pour id main:

+Obtient tous les élements qui ont une classe `test`, à l'intérieur d'un élement qui a pour id `main`: -
document.getElementById('main').getElementsByClassName('test');
+```js +document.getElementById('main').getElementsByClassName('test'); +``` -

On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la HTMLCollection comme valeur this de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe test:

+On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la `HTMLCollection` comme valeur *this* de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe `test`: -
var testElements = document.getElementsByClassName('test');
+```js
+var testElements = document.getElementsByClassName('test');
 var testDivs = Array.prototype.filter.call(testElements, function(testElement){
     return testElement.nodeName === 'div';
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.getElementsByClassName")}}

+}); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Element.getElementsByClassName")}} diff --git a/files/fr/web/api/element/getelementsbytagname/index.md b/files/fr/web/api/element/getelementsbytagname/index.md index 8cbef3215e..19c9d3772a 100644 --- a/files/fr/web/api/element/getelementsbytagname/index.md +++ b/files/fr/web/api/element/getelementsbytagname/index.md @@ -9,68 +9,45 @@ tags: - Reference translation_of: Web/API/Element/getElementsByTagName --- -

{{APIRef("DOM")}}

+{{APIRef("DOM")}} -

La méthode Element.getElementsByTagName() retourne une liste des éléments portant le nom de balise donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est live, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois Element.getElementsByTagName() avec le même élément et les mêmes arguments.

+La méthode **`Element.getElementsByTagName()`** retourne une liste des éléments portant le [nom de balise](/fr/docs/Web/API/Element/tagName) donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est _live_, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois `Element.getElementsByTagName()` avec le même élément et les mêmes arguments. -

Quand elle est appelée sur un élément HTML dans un document HTML, getElementsByTagName place son argument en minuscule avant de continuer. Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG " camel-cased" dans une sous-arborescence dans un document HTML. {{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.

+Quand elle est appelée sur un élément HTML dans un document HTML, `getElementsByTagName `place son argument en minuscule avant de continuer. Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG " camel-cased" dans une sous-arborescence dans un document HTML. {{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas. -

Element.getElementsByTagName est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.

+`Element.getElementsByTagName` est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié. -

Syntaxe

+## Syntaxe -
elements = element.getElementsByTagName(tagName)
+ elements = element.getElementsByTagName(tagName) -
    -
  • elements est une {{domxref("HTMLCollection")}} contenant les éléments trouvés, dans l'ordre dans lequel ils apparaissent dans le sous-arbre. Si aucun élément n'a été trouvé, la HTMLCollection est vide.
  • -
  • element est l'élément depuis lequel la recherche doit commencer. Notez que seuls les descendants de cet élément feront partie des résultats, mais pas l'élément lui-même.
  • -
  • tagName est le nom qualifié à rechercher. La chaîne spéciale "*" représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées.
  • -
+- `elements` est une {{domxref("HTMLCollection")}} contenant les éléments trouvés, dans l'ordre dans lequel ils apparaissent dans le sous-arbre. Si aucun élément n'a été trouvé, la `HTMLCollection` est vide. +- `element` est l'élément depuis lequel la recherche doit commencer. Notez que seuls les descendants de cet élément feront partie des résultats, mais pas l'élément lui-même. +- `tagName` est le nom qualifié à rechercher. La chaîne spéciale `"*"` représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées. -

Exemple

+## Exemple -
// vérifie l'alignement sur un nombre de cellules dans un tableau. 
+```js
+// vérifie l'alignement sur un nombre de cellules dans un tableau.
 var table = document.getElementById("forecast-table");
 var cells = table.getElementsByTagName("td");
-for (var i = 0; i < cells.length; i++) {
+for (var i = 0; i < cells.length; i++) {
     var status = cells[i].getAttribute("data-status");
     if ( status == "open" ) {
-        // saisit les données 
+        // saisit les données
     }
-}
+} +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}{{Spec2('DOM WHATWG')}}Change la valeur de retour de {{domxref("NodeList")}} à{{domxref("HTMLCollection")}}
{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM3 Core')}}Pas de changement par rapport à {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM2 Core')}}Pas de changement par rapport à {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM1')}}Définition initiale
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}} | {{Spec2('DOM WHATWG')}} | Change la valeur de retour de {{domxref("NodeList")}} à{{domxref("HTMLCollection")}} | +| {{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}} | {{Spec2('DOM3 Core')}} | Pas de changement par rapport à {{SpecName('DOM2 Core')}} | +| {{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}} | {{Spec2('DOM2 Core')}} | Pas de changement par rapport à {{SpecName('DOM1')}} | +| {{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}} | {{Spec2('DOM1')}} | Définition initiale | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Element.getElementsByTagName")}}

+{{Compat("api.Element.getElementsByTagName")}} diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.md b/files/fr/web/api/element/getelementsbytagnamens/index.md index 3bb1bbba96..0e7d0cb5e5 100644 --- a/files/fr/web/api/element/getelementsbytagnamens/index.md +++ b/files/fr/web/api/element/getelementsbytagnamens/index.md @@ -9,67 +9,47 @@ tags: - Reference translation_of: Web/API/Element/getElementsByTagNameNS --- -

{{APIRef("DOM")}}

+{{APIRef("DOM")}} -

La méthode Element.getElementsByTagNameNS() renvoie un objet {{domxref("HTMLCollection")}} avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que getElementsByTagNameNS() recherche parmi les descendants de l'élément courant.

+La méthode **`Element.getElementsByTagNameNS()`** renvoie un objet {{domxref("HTMLCollection")}} avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que `getElementsByTagNameNS()` recherche parmi les descendants de l'élément courant. -

Syntaxe

+## Syntaxe -
elements = element.getElementsByTagNameNS(namespaceURI,localName);
+ elements = element.getElementsByTagNameNS(namespaceURI,localName); -

Paramètres

+### Paramètres -
-
namespaceURI
-
L'URI de l'espace de noms des éléments à rechercher (cf. namespaceURI). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, http://www.w3.org/1999/xhtml.
-
localName
-
Le nom local des éléments à rechercher ou la valeur spéciale "*" (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}.
-
+- `namespaceURI` + - : L'URI de l'espace de noms des éléments à rechercher (cf. [`namespaceURI`](/fr/docs/Web/API/Element/namespaceURI)). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, `http://www.w3.org/1999/xhtml`. +- `localName` + - : Le nom local des éléments à rechercher ou la valeur spéciale `"*"` (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}. -

Valeur de retour

+### Valeur de retour -

Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.

+Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM. -

Exemples

+## Exemples -
// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML.
+```js
+// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML.
 var table = document.getElementById("forecast-table");
 var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
-for (var i = 0; i < cells.length; i++) {
+for (var i = 0; i < cells.length; i++) {
   var axis = cells[i].getAttribute("axis");
   if (axis == "year") {
     // saisit les données
   }
 }
-
+``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM WHATWG')}}Modification du type de la valeur de retour : passage de {{domxref("NodeList")}} à {{domxref("HTMLCollection")}}.
{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM3 Core')}}Aucune modification depuis {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM2 Core')}}Définition initiale.
+| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}} | {{Spec2('DOM WHATWG')}} | Modification du type de la valeur de retour : passage de {{domxref("NodeList")}} à {{domxref("HTMLCollection")}}. | +| {{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}} | {{Spec2('DOM3 Core')}} | Aucune modification depuis {{SpecName('DOM2 Core')}}. | +| {{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}} | {{Spec2('DOM2 Core')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Element.getElementsByTagNameNS")}}

+{{Compat("api.Element.getElementsByTagNameNS")}} diff --git a/files/fr/web/api/element/hasattribute/index.md b/files/fr/web/api/element/hasattribute/index.md index 5c90c03771..6d2f356ed6 100644 --- a/files/fr/web/api/element/hasattribute/index.md +++ b/files/fr/web/api/element/hasattribute/index.md @@ -9,69 +9,51 @@ tags: - Reference translation_of: Web/API/Element/hasAttribute --- -

{{APIRef("DOM")}}

+{{APIRef("DOM")}} -

La méthode Element.hasAttribute() renvoie une valeur booléenne indiquant si l'élément courant possède l'attribut spécifié ou non.

+La méthode **`Element.hasAttribute()`** renvoie une **valeur booléenne** indiquant si l'élément courant possède l'attribut spécifié ou non. -

Syntaxe

+## Syntaxe -
var result = element.hasAttribute(name);
-
+ var result = element.hasAttribute(name); -
-
result
-
récupère la valeur de retour true ou false.
-
name
-
est une chaine de caractères représentant le nom de l'attribut.
-
+- `result` + - : récupère la valeur de retour `true` ou `false`. +- `name` + - : est une chaine de caractères représentant le nom de l'attribut. -

Exemple

+## Exemple -
var foo = document.getElementById("foo");
+```js
+var foo = document.getElementById("foo");
 if (foo.hasAttribute("bar")) {
     // faire quelque chose
-}
+} +``` -

Polyfill

+## Polyfill -
;(function(prototype) {
+```js
+;(function(prototype) {
     prototype.hasAttribute = prototype.hasAttribute || function(name) {
-        return !!(this.attributes[name] &&
+        return !!(this.attributes[name] &&
                   this.attributes[name].specified);
     }
-})(Element.prototype);
+})(Element.prototype); +``` -

Notes

+## Notes -

{{DOMAttributeMethods}}

+{{DOMAttributeMethods}} -

Spécification

+## Spécification - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}Dans {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Pas de changement par rapport à {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Définition initiale.
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}} | {{Spec2('DOM WHATWG')}} | Dans {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}} | +| {{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}} | {{Spec2('DOM3 Core')}} | Pas de changement par rapport à {{SpecName('DOM2 Core')}} | +| {{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}} | {{Spec2('DOM2 Core')}} | Définition initiale. | -

Browser compatibility

+## Browser compatibility -

{{Compat("api.Element.hasAttribute")}}

+{{Compat("api.Element.hasAttribute")}} diff --git a/files/fr/web/api/element/hasattributens/index.md b/files/fr/web/api/element/hasattributens/index.md index d30aca00e1..5f4de8ace0 100644 --- a/files/fr/web/api/element/hasattributens/index.md +++ b/files/fr/web/api/element/hasattributens/index.md @@ -9,46 +9,43 @@ tags: - Méthodes translation_of: Web/API/Element/hasAttributeNS --- -

{{ APIRef("DOM") }}

+{{ APIRef("DOM") }} -

Résumé

+## Résumé -

hasAttributeNS renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.

+`hasAttributeNS` renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié. -

Syntaxe

+## Syntaxe -
result =
+```js
+result =
 element.hasAttributeNS(
 namespace,
-localName)
- -
-
result
-
Une valeur booléenne true ou false.
-
namespace
-
Une chaîne spécifiant l'espace de noms de l'attribut.
-
localName
-
Le nom de l'attribut.
-
- -

Exemple

- -
// Vérifie que l'attribut existe
-// avant de définir une valeur
-var d = document.getElementById("div1");
-if (d.hasAttributeNS(
-        "http://www.mozilla.org/ns/specialspace/",
-        "special-align")) {
-   d.setAttribute("align", "center");
-}
-
- -

Notes

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - +localName) +``` + +- `result` + - : Une valeur booléenne `true` ou `false`. +- `namespace` + - : Une chaîne spécifiant l'espace de noms de l'attribut. +- `localName` + - : Le nom de l'attribut. + +## Exemple + + // Vérifie que l'attribut existe + // avant de définir une valeur + var d = document.getElementById("div1"); + if (d.hasAttributeNS( + "http://www.mozilla.org/ns/specialspace/", + "special-align")) { + d.setAttribute("align", "center"); + } + +## Notes + +{{ DOMAttributeMethods() }} + +## Spécification + +- [DOM Level 2 Core: hasAttributeNS (en)](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElHasAttrNS) (non normative) diff --git a/files/fr/web/api/element/hasattributes/index.md b/files/fr/web/api/element/hasattributes/index.md index ec7c62931f..abd5571777 100644 --- a/files/fr/web/api/element/hasattributes/index.md +++ b/files/fr/web/api/element/hasattributes/index.md @@ -10,70 +10,53 @@ tags: - polyfill translation_of: Web/API/Element/hasAttributes --- -
{{ApiRef("DOM")}}
+{{ApiRef("DOM")}} -

La méthode hasAttributes(), rattachée à l'interface {{domxref("Element")}}, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non.

+La méthode **`hasAttributes()`**, rattachée à l'interface {{domxref("Element")}}, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non. -

Syntaxe

+## Syntaxe -
var result = element.hasAttributes();
+```js +var result = element.hasAttributes(); +``` -

Valeur de retour

+### Valeur de retour -
-
result
-
contient la valeur de retour true ou false.
-
+- `result` + - : contient la valeur de retour `true` ou `false`. -

Exemple

+## Exemple -
var foo = document.getElementById("foo");
+```js
+var foo = document.getElementById("foo");
 if (foo.hasAttributes()) {
     // faire quelque chose avec 'foo.attributes'
-}
+} +``` -

Polyfill

+## Polyfill -
;(function(prototype) {
+```js
+;(function(prototype) {
     prototype.hasAttributes = prototype.hasAttributes || function() {
-        return (this.attributes.length > 0);
+        return (this.attributes.length > 0);
     }
-})(Element.prototype);
+})(Element.prototype); +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}{{Spec2('DOM WHATWG')}}Déplacé de l'interface {{domxref("Node")}} vers l'interface plus spécialisée {{domxref("Element")}}.
{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM3 Core')}}Pas de changement par rapport à {{SpecName("DOM2 Core")}}
{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM2 Core')}}Définition initiale, sur l'interface {{domxref("Node")}}.
+| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------- | +| {{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}} | {{Spec2('DOM WHATWG')}} | Déplacé de l'interface {{domxref("Node")}} vers l'interface plus spécialisée {{domxref("Element")}}. | +| {{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}} | {{Spec2('DOM3 Core')}} | Pas de changement par rapport à {{SpecName("DOM2 Core")}} | +| {{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}} | {{Spec2('DOM2 Core')}} | Définition initiale, sur l'interface {{domxref("Node")}}. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Element.hasAttributes")}}

+{{Compat("api.Element.hasAttributes")}} -

Voir aussi

+## Voir aussi -
    -
  • {{domxref("Element.attributes")}}
  • -
  • {{domxref("Element.hasAttribute()")}}
  • -
+- {{domxref("Element.attributes")}} +- {{domxref("Element.hasAttribute()")}} diff --git a/files/fr/web/api/element/id/index.md b/files/fr/web/api/element/id/index.md index 29e4752a20..9dd64d63dd 100644 --- a/files/fr/web/api/element/id/index.md +++ b/files/fr/web/api/element/id/index.md @@ -9,60 +9,33 @@ tags: - Reference translation_of: Web/API/Element/id --- -

{{ApiRef("DOM")}}

+{{ApiRef("DOM")}} -

La propriété Element.id représente l'identifiant de l'élément, reflétant l' id global de l'attribut.

+La propriété **`Element.id`** représente l'identifiant de l'élément, reflétant l' **[id](/fr/docs/Web/HTML/Attributs_universels/id)** global de l'attribut. -

Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}. Les autres utilisations courantes de id comprennent l'utilisation de l'ID de l'élément en tant que sélecteur lors de la mise en forme du document avec CSS.

+Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}. Les autres utilisations courantes de `id` comprennent l'utilisation de l'[ID de l'élément en tant que sélecteur](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_ID) lors de la mise en forme du document avec [CSS](/fr/docs/Web/CSS). -
-

Note : Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir Sensibilité à la casse dans les noms de classe et d'identifiant).

-
+> **Note :** Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir [Sensibilité à la casse dans les noms de classe et d'identifiant](/fr/docs/Archive/Case_Sensitivity_in_class_and_id_Names)). -

Syntaxe

+## Syntaxe -
var idStr = elt.id; // Obtenez l'identifiant
-elt.id = idStr; // Définir l'identifiant
+ var idStr = elt.id; // Obtenez l'identifiant + elt.id = idStr; // Définir l'identifiant -
    -
  • idStr est l'identifiant de l'élément.
  • -
+- `idStr` est l'identifiant de l'élément. -

Spécification

+## Spécification - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}{{Spec2('DOM WHATWG')}}Pas de changement par rapport à {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}}Pas de changement par rapport à {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}{{Spec2('DOM1')}}Définition initiale.
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------- | +| {{SpecName('DOM WHATWG', '#dom-element-id', 'id')}} | {{Spec2('DOM WHATWG')}} | Pas de changement par rapport à {{SpecName('DOM2 HTML')}}. | +| {{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}} | {{Spec2('DOM2 HTML')}} | Pas de changement par rapport à {{SpecName('DOM1')}}. | +| {{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}} | {{Spec2('DOM1')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Element.id")}}

+{{Compat("api.Element.id")}} -

Voir aussi

+## Voir aussi -
    -
  • L'attribut global id de DOM.
  • -
+- L'attribut global [**id**](/fr/docs/Web/HTML/Attributs_universels/id) de DOM. diff --git a/files/fr/web/api/element/index.md b/files/fr/web/api/element/index.md index ac94a2ffc9..1ca458b754 100644 --- a/files/fr/web/api/element/index.md +++ b/files/fr/web/api/element/index.md @@ -4,422 +4,416 @@ slug: Web/API/Element translation_of: Web/API/Element browser-compat: api.Element --- -
{{APIRef("DOM")}}
- -

Element est la classe de base la plus générique dont héritent tous les objets qui représentent des éléments d'un Document. Elle contient uniquement des méthodes et propriétés communes à l'ensemble des éléments. Des classes plus spécifiques héritent d'Element. Ainsi, l'interface HTMLElement correspond à l'interface de base pour les éléments HTML tandis que l'interface SVGElement représente la base pour les éléments SVG. La plupart des fonctionnalités sont définies dans les classes situées plus loin dans la hiérarchie.

- -

Propriétés

- -

Element hérite des propriétés de son interface parente : Node (et donc indirectement des propriétés du parent de celle-ci : EventTarget).

- -
-
Element.assignedSlot{{readonlyInline}}
-
Renvoie un objet HTMLSlotElement représentant l'emplacement (<slot>) dans lequel le nœud est inséré.
-
Element.attributes {{readOnlyInline}}
-
Renvoie un objet NamedNodeMap contenant les attributs affectés de l'élément HTML correspondant.
-
Element.childElementCount {{readonlyInline}}
-
Renvoie le nombre d'éléments enfants de cet élément.
-
Element.children {{readonlyInline}}
-
Renvoie les éléments enfants de cet élément.
-
Element.classList {{readOnlyInline}}
-
Renvoie un objet DOMTokenList contenant la liste des attributs de classe.
-
Element.className
-
Une chaîne de caractères DOMString qui représente la classe de l'élément.
-
Element.clientHeight {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la hauteur intérieure de l'élément.
-
Element.clientLeft {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la largeur de la bordure gauche de l'élément.
-
Element.clientTop {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la largeur de la bordure haute de l'élément.
-
Element.clientWidth {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la largeur intérieure de l'élément.
-
Element.firstElementChild {{readonlyInline}}
-
Renvoie le premier élément enfant de cet élément.
-
Element.id
-
Une chaîne de caractères DOMString qui représente l'identifiant de l'élément.
-
Element.innerHTML
-
Une chaîne de caractères DOMString qui représente le balisage du contenu de l'élément.
-
Element.lastElementChild {{readonlyInline}}
-
Renvoie le dernier élément enfant de cet élément.
-
Element.localName {{readOnlyInline}}
-
Une chaîne de caractères DOMString qui représente la partie locale pour le nom qualifié de l'élément.
-
Element.namespaceURI {{readonlyInline}}
-
L'URI pour l'espace de noms de l'élément ou null s'il n'y en a pas. -
-

Note : Pour Firefox 3.5 et les versions antérieures, les éléments HTML ne sont pas situés dans un espace de noms. Dans les versions ultérieures, les éléments HTML s'inscrivent dans l'espace de noms http://www.w3.org/1999/xhtml tant pour les arbres HTML que XML.

-
-
-
Element.nextElementSibling {{readOnlyInline}}
-
Un objet Element qui représente l'élément qui suit immédiatement l'élément courant dans l'arbre ou null si l'élément courant n'a pas de voisin.
-
Element.outerHTML
-
Une chaîne de caractères DOMString qui représente le balisage de l'élément (incluant son contenu). Lorsque cette propriété est utilisée en modification, cela remplace l'élément avec les noeuds construits à partir de l'analyse de la chaîne de caractères fournie.
-
Element.part
-
Représente les identifiants des parties de l'élément (c'est-à-dire ceux définis avec l'attribut part) sous la forme d'un objet DOMTokenList.
-
Element.prefix {{readOnlyInline}}
-
Une chaîne de caractères DOMString qui représente le préfixe de l'espace de nom pour l'élément ou null si aucun préfixe n'est défini.
-
Element.previousElementSibling {{readOnlyInline}}
-
Un objet Element qui représente l'élément qui précède immédiatement l'élément courant dans l'arbre ou null si l'élément courant n'a pas de voisin.
-
Element.scrollHeight {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la hauteur de la vue de défilement pour l'élément.
-
Element.scrollLeft
-
Un nombre (Number) qui représente le décalage à gauche de l'élément lié au défilement.
-
Element.scrollLeftMax {{Non-standard_Inline}} {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant le décalage à gauche maximal pour l'élément lors du défilement.
-
Element.scrollTop
-
Un nombre (Number) qui représente le nombre de pixels dont on a fait défiler verticalement le haut de l'élément.
-
Element.scrollTopMax {{Non-standard_Inline}} {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant le décalage maximal depuis le haut de l'élément lors du défilement.
-
Element.scrollWidth {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la largeur de la vue de défilement pour l'élément.
-
Element.shadowRoot{{readOnlyInline}}
-
Renvoie la racine sombre ouverte (open shadow root) hébergée par l'élément ou null si aucune racine sombre ouverte n'est présente.
-
Element.openOrClosedShadowRoot {{Non-standard_Inline}}{{readOnlyInline}}
-
Renvoie la racine sombre hébergée par l'élément (qu'elle soit ouverte ou fermée). Uniquement disponible pour les WebExtensions.
-
Element.slot {{Experimental_Inline}}
-
Renvoie le nom de l'emplacement du DOM sombre dans lequel l'élément est inséré.
-
Element.tagName {{readOnlyInline}}
-
Renvoie une chaîne de caractères (String) qui est le nom de la balise pour l'élément courant.
-
- -

Propriétés provenant d'ARIA

- -

L'interface Element inclut les propriétés suivantes, définies sur le mixin ARIAMixin.

- -
-
Element.ariaAtomic
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-atomic qui indique si des technologies d'assistance présenteront tout ou partie de la région modifiée selon les notifications définies par l'attribut aria-relevant.
-
Element.ariaAutoComplete
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-autocomplete qui indique si la saisie de texte peut déclencher l'affichage d'une ou plusieurs prédictions pour la valeur saisie par l'utilisateur à destination d'une liste de choix, d'une boîte de recherche ou d'une zone de texte. Elle indique également la façon dont les éventuelles prédictions seraient présentées.
-
Element.ariaBusy
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-busy qui indique d'un élément est en train d'être modifié. Les technologies d'assistance peuvent alors faire le choix d'attendre la fin de la modification avant d'exposer le contenu à l'utilisateur.
-
Element.ariaChecked
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-checked indiquant l'état coché (ou non) des cases à cocher, des boutons radio ou des autres éléments d'interface graphique qui peuvent être cochés.
-
Element.ariaColCount
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-colcount indiquant le nombre de colonnes d'un tableau, d'une grille ou d'une grille arborescente.
-
Element.ariaColIndex
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-colindex qui définit l'indice de la colonne d'un élément ou sa position par rapport au nombre total de colonnes d'un tableau, d'une grille ou d'une grille arborescente.
-
Element.ariaColIndexText
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-colindextext qui définit texte alternatif à aria-colindex qui soit compréhensible par un humain.
-
Element.ariaColSpan
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-colspan qui définit le nombre de colonnes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.
-
Element.ariaCurrent
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-current qui indique l'élément représente l'objet courant dans un conteneur ou un ensemble d'éléments.
-
Element.ariaDescription
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-description qui définit la chaîne de caractères pour décrire ou annoter l'élément courant.
-
Element.ariaDisabled
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-disabled qui indique que l'élément est perceptible mais désactivé et qu'il ne peut être édité ou manipulé.
-
Element.ariaExpanded
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-expanded qui indique si un élément de groupement contrôlé par l'élément courant est développé ou replié.
-
Element.ariaHasPopup
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-haspopup qui indique la disponibilité et le type d'élément interactif visuel comme un menu ou une boîte de dialogue pouvant être généré par l'élément courant.
-
Element.ariaHidden
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-hidden qui indique si l'élément est exposé à une API d'accessibilité.
-
Element.ariaKeyShortcuts
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-keyshortcuts qui indique les raccourcis clavier implémentés spécifiquement pour activer ou fournir le focus à un élément.
-
Element.ariaLabel
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-label qui définit une chaîne de caractères étant un libellé pour l'élément courant.
-
Element.ariaLevel
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-level qui définit le niveau hiérarchique de l'élément au sein d'une structure.
-
Element.ariaLive
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-live qui indique que l'élément sera mis à jour et qui décrit les types de mises à jour qui peuvent être attendues par les agents utilisateur, les outils d'assistance et l'utilisateur.
-
Element.ariaModal
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-modal qui indique si un élément est modal lorsqu'il est affiché.
-
Element.ariaMultiline
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-multiline qui indique si une zone de texte accepte une saisie sur plusieurs lignes ou sur une seule ligne.
-
Element.ariaMultiSelectable
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-multiselectable qui indique que la personne peut choisir plus d'un élément parmi les éléments descendants qui peuvent être sélectionnés.
-
Element.ariaOrientation
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-orientation qui indique si l'orientation de l'élément est horizontale, verticale ou inconnue voire ambigüe.
-
Element.ariaPlaceholder
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-placeholder qui définit une indication courte destinée à aider l'utilisateur à saisir une valeur lorsque le contrôle ne possède pas de valeur.
-
Element.ariaPosInSet
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-posinset qui définit l'index ou la position de l'élément courant dans l'ensemble ou l'arbre d'éléments.
-
Element.ariaPressed
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-pressed qui indique l'état actif/pressé des boutons.
-
Element.ariaReadOnly
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-readonly qui indique que l'élément ne peut pas être édité mais qu'il peut être utilisé sinon.
-
Element.ariaRelevant
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-relevant qui indique les notifications qui seront déclenchées par l'agent utilisateur lorsque l'arbre d'accessibilité d'une région interactive sera modifié. Cette propriété est utilisée afin de décrire quels changements d'une région aria-live sont pertinents et devraient être annoncés.
-
Element.ariaRequired
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-required qui indique que la saisie d'une utilisatrice ou d'un utilisateur est requise sur l'élément avant qu'un formulaire puisse être envoyé.
-
Element.ariaRoleDescription
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-roledescription qui définit une description compréhensible par un humain, adaptée par l'autrice ou l'auteur du document pour le rôle de l'élément courant.
-
Element.ariaRowCount
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowcount qui définit le nombre total de lignes dans un tableau, une grille ou une grille arborescente.
-
Element.ariaRowIndex
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowindex qui définit l'index ou la position de la ligne de l'élément par rapport au nombre total de lignes dans le tableau, la grille ou la grille arborescente.
-
Element.ariaRowIndexText
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowindextext qui définit un libellé alternatif à aria-rowindex, compréhensible par un humain.
-
Element.ariaRowSpan
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowspan qui définit le nombre de lignes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.
-
Element.ariaSelected
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-selected qui indique l'état de sélection pour les éléments qui peuvent être sélectionnés.
-
Element.ariaSetSize
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-setsize qui définit le nombre d'objets dans l'ensemble d'éléments d'une liste ou d'un arbre.
-
Element.ariaSort
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-sort qui indique si les objets d'un tableau ou d'une grille sont triés par ordre croissant ou décroissant.
-
Element.ariaValueMax
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-valueMax qui définit la valeur maximale autorisée pour un élément d'interface utilisateur décrivant un intervalle.
-
Element.ariaValueMin
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-valueMin qui définit la valeur minimale autorisée pour un élément d'interface utilisateur décrivant un intervalle.
-
Element.ariaValueNow
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-valueNow qui définit la valeur courante d'un élément d'interface utilisateur décrivant un intervalle.
-
Element.ariaValueText
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-valuetext qui définit une alternative textuelle à aria-valuenow compréhensible par un humain.
-
- -

Gestionnaires d'évènements

- -
-
Element.onfullscreenchange
-
Un gestionnaire d'évènement pour l'évènement fullscreenchange qui est envoyé lorsque l'élément passe en mode plein écran ou sort de celui-ci. Cet évènement peut être utilisé pour surveiller les transitions entre les deux modes mais aussi pour surveiller les modifications inattendues comme lorsque l'application s'exécute en arrière-plan.
-
Element.onfullscreenerror
-
Un gestionnaire d'évènement pour fullscreenerror qui est envoyé lorsqu'une erreur se produit lors du passage au mode plein écran.
-
- -

Méthodes

- -

Element hérite des méthodes fournit par la classe parente Node et de sa classe parente avant elle : EventTarget.

- -
-
EventTarget.addEventListener()
-
Enregistre un gestionnaire d'évènement sur l'élément pour un type d'évènement donné.
-
Element.after()
-
Insère un ensemble d'objets Node ou DOMString dans la liste des enfants du parent de l'élément courant, juste après ce dernier.
-
Element.attachShadow()
-
Attache un arbre du DOM sombre à l'élément indiqué puis renvoie une référence à sa racine ShadowRoot.
-
Element.animate() {{Experimental_Inline}}
-
Une méthode synthétique pour créer et exécuter une animation sur un élément. Renvoie l'instance de l'objet Animation créé.
-
Element.append()
-
Insère un ensemble d'objet Node ou DOMString après le dernier enfant de l'élément.
-
Element.before()
-
Insère un ensemble d'objet Node ou DOMString dans la liste des enfants du parent de l'élément courant, juste avant ce dernier.
-
Element.closest()
-
Renvoie l'élément (Element) qui est le plus proche ancêtre de l'élément courant (ou l'élément courant lui-même) qui correspond au sélecteur passé en paramètre.
-
Element.createShadowRoot() {{Non-standard_Inline}} {{Deprecated_Inline}}
-
Crée un DOM sombre sur l'élément, le transformant ainsi en hôte sombre. Renvoie un objet ShadowRoot.
-
Element.computedStyleMap() {{Experimental_Inline}}
-
Renvoie une interface StylePropertyMapReadOnly qui fournit une représentation en lecture seule d'un bloc de déclaration CSS alternatif à CSSStyleDeclaration.
-
EventTarget.dispatchEvent()
-
Diffuse un évènement sur ce nœud dans le DOM et renvoie un booléen qui indique si aucun gestionnaire n'a annulé l'évènement.
-
Element.getAnimations() {{Experimental_Inline}}
-
Renvoie un tableau des objets Animation actuellement actifs sur l'élément.
-
Element.getAttribute()
-
Récupère la valeur de l'attribut nommé pour le nœud courant et le renvoie comme un objet.
-
Element.getAttributeNames()
-
Renvoie un tableau de noms d'attribut pour l'élément courant.
-
Element.getAttributeNode()
-
Récupère la représentation du nœud pour l'attrtibut nommé du nœud courant et le renvoie comme un objet Attr.
-
Element.getAttributeNodeNS()
-
Depuis le nœud courant, récupère la représentation du nœud pour l'attribut avec le nom et l'espace de noms indiqués et renvoie la valeur obtenue sous la forme d'un objet Attr.
-
Element.getAttributeNS()
-
Depuis le nœud courant, récupère la valeur de l'attribut avec le nom et l'espace de noms indiqués et la renvoie sous la forme d'un objet.
-
Element.getBoundingClientRect()
-
Renvoie la taille d'un élément et sa position relative dans la zone d'affichage (viewport).
-
Element.getBoxQuads() {{experimental_inline}}
-
Renvoie une liste d'objets DOMQuad qui représentent les fragments CSS pour le nœud.
-
Element.getClientRects()
-
Renvoie une collection de rectangles qui indique les rectangles englobants pour chaque ligne de texte d'un client.
-
Element.getElementsByClassName()
-
Renvoie une collection dynamique HTMLCollection qui contient tous les descendants de l'élément courant et qui possèdent la liste de classes fournie en paramètre.
-
Element.getElementsByTagName()
-
Renvoie une collection dynamique HTMLCollection qui contient tous les descendants de l'élément courant avec un nom de balise donné.
-
Element.getElementsByTagNameNS()
-
Renvoie une collection dynamique HTMLCollection qui contient tous les descendants de l'élément courant qui ont un nom de balise et un espace de noms donnés.
-
Element.hasAttribute()
-
Renvoie un booléen indiquant si l'élément courant possède l'attribut donné.
-
Element.hasAttributeNS()
-
Renvoie un booléen indiquant si l'élément courant possède l'attribut donné pour l'espace de noms donné.
-
Element.hasAttributes()
-
Renvoie un booléen qui indique si l'élément courant a un ou plusieurs attributs HTML.
-
Element.hasPointerCapture()
-
Indique si l'élément a la capture du pointeur pour le pointeur identifié par l'identifiant passé en argument.
-
Element.insertAdjacentElement()
-
Insère un nœud d'élément à la position relative indiquée par rapport à l'élément courant.
-
Element.insertAdjacentHTML()
-
Analyse le texte comme HTML ou XML puis insère les nœuds résultatns dans l'arbre à la position indiquée.
-
Element.insertAdjacentText()
-
Insère un nœud textuel à la position relative indiquée, par rapport à l'élément courant.
-
Element.matches()
-
Renvoie un booléen qui indique si l'élément serait ciblé par la chaîne de caractères passée en argument qui décrit un sélecteur.
-
Element.prepend()
-
Insère un ensemble d'objets Node ou DOMString avant le premier enfant de l'élément courant.
-
Element.querySelector()
-
Renvoie le premier objet Node qui correspond au sélecteur donné, relatif à l'élément courant.
-
Element.querySelectorAll()
-
Renvoie un objet NodeList contenant les nœuds pour lesquels le sélecteur, passé en argument, relatif à l'élément courant.
-
Element.releasePointerCapture()
-
Libère (arrête) la capture du pointeur précédemment activée pour un évènement de pointeur spécifique.
-
Element.remove()
-
Retire l'élément de la liste des éléments enfants de son parent.
-
Element.removeAttribute()
-
Retire l'attribut nommé du nœud courant.
-
Element.removeAttributeNode()
-
Retire la représentation nodale de l'attribut nommé pour le nœud courant.
-
Element.removeAttributeNS()
-
Sur le nœud courant, retire l'attribut avec le nom et l'espace de noms indiqués.
-
EventTarget.removeEventListener()
-
Retire un gestionnaire d'évènement de l'élément.
-
Element.replaceChildren()
-
Remplace l'enfant existant d'un nœud avec un nouvel ensemble d'enfants.
-
Element.replaceWith()
-
Remplace l'élément dans la liste des enfants de son parent par un ensemble d'objets Node ou DOMString.
-
Element.requestFullscreen() {{Experimental_Inline}}
-
Demande au navigateur, de façon asynchrone, d'afficher l'élément en plein écran.
-
Element.requestPointerLock() {{Experimental_Inline}}
-
Demande au navigateur, de façon asynchrone, de bloquer le pointeur sur l'élément indiqué.
-
Element.scroll()
-
Défile jusqu'à un ensemble de coordonnées données à l'intérieur de l'élément courant.
-
Element.scrollBy()
-
Défile un élément de la quantité indiquée.
-
Element.scrollIntoView() {{Experimental_Inline}}
-
Défile la page jusqu'à ce que l'élément apparaisse dans la vue.
-
Element.scrollTo()
-
Défile jusqu'à un ensemble de coordonnées particulier à l'intérieur de l'élément donné.
-
Element.setAttribute()
-
Définit la valeur d'un attribut nommé pour le nœud courant.
-
Element.setAttributeNode()
-
Définit la représentation nodale d'un attribut nommé pour le nœud courant.
-
Element.setAttributeNodeNS()
-
Pour le nœud courant, définit la représentation nodale d'un attribut avec le nom et l'espace de noms indiqués.
-
Element.setAttributeNS()
-
Pour le nœud courant, définit la valeur de l'attribut avec le nom et l'espace de noms indiqués.
-
Element.setCapture() {{Non-standard_Inline}}{{Deprecated_Inline}}
-
Initialise la capture des évènements liés à la souris, redirigeant ainsi tous les évènements de la souris sur cet élément.
-
Element.setPointerCapture()
-
Désigne un élément spécifique comme future cible pour la capture des évènements de pointeur.
-
Element.toggleAttribute()
-
Active/désactive un attribut booléen sur l'élément courant : s'il est présent, cela le retire et s'il est absent, cela l'ajoute.
-
- -

Évènements

- -

On peut écouter ces évènements en utilisant la méthode addEventListener() ou en affectant un gestionnaire d'évènement à la propriété onnomevenement de cette interface.

- -
-
cancel
-
Déclenché sur un élément <dialog> lorsque la personne indique au navigateur le souhait de fermer la boîte de dialogue courante. Un navigateur pourra par exemple déclencher cet évènement lors d'un appui sur la touche Echap ou lors d'un clic sur le bouton « Fermer cette boîte de dialogue » fourni par le navigateur. Également disponible via la propriété oncancel.
-
error
-
Déclenché lors de l'échec du chargement d'une ressource ou lorsque celle-ci ne peut être utilisée. Cet évènement sera par exemple déclenché lors d'une erreur d'exécution d'un script ou lorsqu'une image ne peut être trouvée ou est invalide. Également disponible via la propriété onerror.
-
scroll
-
Déclenché lors du défilement de la vue du document ou d'un élément. Également disponible via la propriété onscroll.
-
select
-
Déclenché lors de la sélection de texte. Également disponible via la propriété onselect.
-
show
-
Déclenché lorsqu'un évènement contextmenu a été déclenché ou a bouillonné sur un élément qui dispose de l'attribut contextmenu attribute. {{deprecated_inline}} Également disponible via la propriété onshow.
-
wheel
-
Déclenché lorsque l'utilisateur fait tourner la molette d'un appareil de pointage (généralement une souris). Également disponible via la propriété onwheel.
-
- -

Évènements du presse-papiers

- -
-
copy
-
Déclenché lorsque l'utilisateur initie une action de copie via l'interface du navigateur. Également disponible via la propriété oncopy.
-
cut
-
Déclenché lorsque l'utilisateur initie une action de coupe via l'interface du navigateur. Également disponible via la propriété oncut.
-
paste
-
Déclenché lorsque l'utilisateur initie une action pour coller via l'interface du navigateur. Également disponible via la propriété onpaste.
-
- -

Évènements de composition

- -
-
compositionend
-
Déclenché lorsqu'un système de composition textuel tel qu'un éditeur de méthode de saisie termine ou annule la session de composition courante.
-
compositionstart
-
Déclenché lorsqu'un système de composition textuel tel qu'un éditeur de méthode de saisie démarre une nouvelle session de composition.
-
compositionupdate
-
Déclenché lorsqu'un nouveau caractère est reçu dans le contexte d'une session de composition textuelle.
-
- -

Évènements pour le focus

- -
-
blur
-
Déclenché lorsqu'un élément a perdu le focus. Également disponible via la propriété onblur.
-
focus
-
Déclenché lorsqu'un élément reçoit le focus. Également disponible via la propriété onfocus.
-
focusin
-
Déclenché lorsqu'un élément s'apprête à recevoir le focus.
-
focusout
-
Déclenché lorsqu'un élément s'apprête à perdre le focus.
-
- -

Évènements relatifs au plein écran

- -
-
fullscreenchange
-
Envoyé à un élément (Element) lorsque celui-ci effectue une transition (entrée ou sortie) pour le mode plein écran. Également disponible via la propriété onfullscreenchange.
-
fullscreenerror
-
Envoyé à un élément Element si une erreur se produit lors d'une transition (entrée ou sortie) pour le mode plein écran. Également disponible via la propriété onfullscreenerror.
-
- -

Évènements relatifs au clavier

- -
-
keydown
-
Déclenché lors de l'appui sur une touche du clavier. Également disponible via la propriété onkeydown.
-
keypress
-
Déclenché lorsqu'une touche produit un caractère lorsqu'elle est pressée. {{deprecated_inline}} Également disponible via la propriété onkeypress.
-
keyup
-
Déclenché lorsqu'une touche est relâchée. Également disponible via la propriété onkeyup.
-
- -

Évènements relatifs à la souris

- -
-
auxclick
-
Déclenché lorsqu'un bouton non primaire d'un appareil de pointage (c'est-à-dire tout bouton de la souris en dehors du bouton gauche) a été pressé puis relâché sur un élément. Également disponible via la propriété onauxclick.
-
click
-
Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été pressé puis relâche sur un élément. Également disponible via la propriété onclick.
-
contextmenu
-
Déclenché lorsqu'un utilisateur tente d'ouvrir un menu contextuel. Également disponible via la propriété oncontextmenu.
-
dblclick
-
Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été utilisé pour un double-clic sur un élément. Également disponible via la propriété ondblclick.
-
DOMActivate {{Deprecated_Inline}}
-
Se produit lorsqu'un élément est activé, par exemple avec un clic de souris ou l'appui d'une touche.
-
mousedown
-
Déclenché lorsqu'un bouton d'un appareil de pointage est pressé sur un élément. Également disponible via la propriété onmousedown.
-
mouseenter
-
Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé pour arriver sur l'élément disposant du gestionnaire d'évènement. Également disponible via la propriété onmouseenter.
-
mouseleave
-
Déclenché lorsque le pointeur d'un appareil de pointage (généralement une souris) est déplacée en dehors de l'élément qui dispose du gestionnaire d'évènement. Également disponible via la propriété onmouseleave.
-
mousemove
-
Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé sur un élément. Également disponible via la propriété onmousemove.
-
mouseout
-
Déclenché lorsqu'un appareil de pointage (généralement une souris) se déplace pour quitter l'élément qui dispose du gestionnaire d'évènement (ou lorsque le pointeur quitte l'un des enfants de cet élément). Également disponible via la propriété onmouseout.
-
mouseover
-
Déclenché lorsqu'un appareil de pointage arrive sur l'élément (ou l'un de ses enfants) qui dispose du gestionnaire d'évènement. Également disponible via la propriété onmouseover.
-
mouseup
-
Déclenché lorsque le bouton d'un appareil de pointage est relâché pour un élément. Également disponible via la propriété onmouseup.
-
webkitmouseforcechanged
-
Déclenché à chaque fois que la quantite dé pression change sur le pavé ou l'écran tactile.
-
webkitmouseforcedown
-
Déclenché après l'évènement mousedown dès que suffisamment de pression a été appliquée pour qualifier ce clic de clic forcé.
-
webkitmouseforcewillbegin
-
Déclenché avant l'évènement mousedown.
-
webkitmouseforceup
-
Déclenché après l'évènement webkitmouseforcedown dès que suffisamment de pression a été relâchée pour terminer le clic forcé.
-
- -

Évènements tactiles

- -
-
touchcancel
-
Déclenché lorsqu'un ou plusieurs points de toucher ont été perturbés de façon spécifique à l'implémentation (par exemple lorsque trop de points de toucher ont été créés). Également disponible avec la propriété ontouchcancel.
-
touchend
-
Déclenché lorsqu'un ou plusieurs points de toucher sont retirés de la surface tactile. Également disponible via la propriété ontouchend.
-
touchmove
-
Déclenché lorsqu'un ou plusieurs points de toucher se déplacent sur la surface tactile. Également disponible via la propriété ontouchmove.
-
touchstart
-
Déclenché lorsqu'un ou plusieurs points de toucher sont placés sur la surface tactile. Également disponible via la propriété ontouchstart.
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

+{{APIRef("DOM")}} + +**`Element`** est la classe de base la plus générique dont héritent tous les objets qui représentent des éléments d'un [`Document`](/fr/docs/Web/API/Document). Elle contient uniquement des méthodes et propriétés communes à l'ensemble des éléments. Des classes plus spécifiques héritent d'`Element`. Ainsi, l'interface [`HTMLElement`](/fr/docs/Web/API/HTMLElement) correspond à l'interface de base pour les éléments HTML tandis que l'interface [`SVGElement`](/fr/docs/Web/API/SVGElement) représente la base pour les éléments SVG. La plupart des fonctionnalités sont définies dans les classes situées plus loin dans la hiérarchie. + +## Propriétés + +_`Element` hérite des propriétés de son interface parente : [`Node`](/fr/docs/Web/API/Node) (et donc indirectement des propriétés du parent de celle-ci : [`EventTarget`](/fr/docs/Web/API/EventTarget))._ + +- [`Element.assignedSlot`](/fr/docs/Web/API/Element/assignedSlot){{readonlyInline}} + - : Renvoie un objet [`HTMLSlotElement`](/fr/docs/Web/API/HTMLSlotElement) représentant l'emplacement ([``](/fr/docs/Web/HTML/Element/slot)) dans lequel le nœud est inséré. +- [`Element.attributes`](/fr/docs/Web/API/Element/attributes) {{readOnlyInline}} + - : Renvoie un objet [`NamedNodeMap`](/fr/docs/Web/API/NamedNodeMap) contenant les attributs affectés de l'élément HTML correspondant. +- [`Element.childElementCount`](/fr/docs/Web/API/Element/childElementCount) {{readonlyInline}} + - : Renvoie le nombre d'éléments enfants de cet élément. +- [`Element.children`](/fr/docs/Web/API/Element/children) {{readonlyInline}} + - : Renvoie les éléments enfants de cet élément. +- [`Element.classList`](/fr/docs/Web/API/Element/classList) {{readOnlyInline}} + - : Renvoie un objet [`DOMTokenList`](/fr/docs/Web/API/DOMTokenList) contenant la liste des attributs de classe. +- [`Element.className`](/fr/docs/Web/API/Element/className) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente la classe de l'élément. +- [`Element.clientHeight`](/fr/docs/Web/API/Element/clientHeight) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la hauteur intérieure de l'élément. +- [`Element.clientLeft`](/fr/docs/Web/API/Element/clientLeft) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur de la bordure gauche de l'élément. +- [`Element.clientTop`](/fr/docs/Web/API/Element/clientTop) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur de la bordure haute de l'élément. +- [`Element.clientWidth`](/fr/docs/Web/API/Element/clientWidth) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur intérieure de l'élément. +- [`Element.firstElementChild`](/fr/docs/Web/API/Element/firstElementChild) {{readonlyInline}} + - : Renvoie le premier élément enfant de cet élément. +- [`Element.id`](/fr/docs/Web/API/Element/id) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente l'identifiant de l'élément. +- [`Element.innerHTML`](/fr/docs/Web/API/Element/innerHTML) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente le balisage du contenu de l'élément. +- [`Element.lastElementChild`](/fr/docs/Web/API/Element/lastElementChild) {{readonlyInline}} + - : Renvoie le dernier élément enfant de cet élément. +- [`Element.localName`](/fr/docs/Web/API/Element/localName) {{readOnlyInline}} + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente la partie locale pour le nom qualifié de l'élément. +- [`Element.namespaceURI`](/fr/docs/Web/API/Element/namespaceURI) {{readonlyInline}} + + - : L'URI pour l'espace de noms de l'élément ou `null` s'il n'y en a pas. + + > **Note :** Pour Firefox 3.5 et les versions antérieures, les éléments HTML ne sont pas situés dans un espace de noms. Dans les versions ultérieures, les éléments HTML s'inscrivent dans l'espace de noms [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) tant pour les arbres HTML que XML. + +- [`Element.nextElementSibling`](/fr/docs/Web/API/Element/nextElementSibling) {{readOnlyInline}} + - : Un objet `Element` qui représente l'élément qui suit immédiatement l'élément courant dans l'arbre ou `null` si l'élément courant n'a pas de voisin. +- [`Element.outerHTML`](/fr/docs/Web/API/Element/outerHTML) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente le balisage de l'élément (incluant son contenu). Lorsque cette propriété est utilisée en modification, cela remplace l'élément avec les noeuds construits à partir de l'analyse de la chaîne de caractères fournie. +- [`Element.part`](/fr/docs/Web/API/Element/part) + - : Représente les identifiants des parties de l'élément (c'est-à-dire ceux définis avec l'attribut `part`) sous la forme d'un objet [`DOMTokenList`](/fr/docs/Web/API/DOMTokenList). +- [`Element.prefix`](/fr/docs/Web/API/Element/prefix) {{readOnlyInline}} + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente le préfixe de l'espace de nom pour l'élément ou `null` si aucun préfixe n'est défini. +- [`Element.previousElementSibling`](/fr/docs/Web/API/Element/previousElementSibling) {{readOnlyInline}} + - : Un objet `Element` qui représente l'élément qui précède immédiatement l'élément courant dans l'arbre ou `null` si l'élément courant n'a pas de voisin. +- [`Element.scrollHeight`](/fr/docs/Web/API/Element/scrollHeight) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la hauteur de la vue de défilement pour l'élément. +- [`Element.scrollLeft`](/fr/docs/Web/API/Element/scrollLeft) + - : Un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) qui représente le décalage à gauche de l'élément lié au défilement. +- [`Element.scrollLeftMax`](/fr/docs/Web/API/Element/scrollLeftMax) {{Non-standard_Inline}} {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant le décalage à gauche maximal pour l'élément lors du défilement. +- [`Element.scrollTop`](/fr/docs/Web/API/Element/scrollTop) + - : Un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) qui représente le nombre de pixels dont on a fait défiler verticalement le haut de l'élément. +- [`Element.scrollTopMax`](/fr/docs/Web/API/Element/scrollTopMax) {{Non-standard_Inline}} {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant le décalage maximal depuis le haut de l'élément lors du défilement. +- [`Element.scrollWidth`](/fr/docs/Web/API/Element/scrollWidth) {{readOnlyInline}} + - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur de la vue de défilement pour l'élément. +- [`Element.shadowRoot`](/fr/docs/Web/API/Element/shadowRoot){{readOnlyInline}} + + - : Renvoie la racine sombre ouverte ( + + open shadow root + + ) hébergée par l'élément ou `null` si aucune racine sombre ouverte n'est présente. + +- [`Element.openOrClosedShadowRoot`](/fr/docs/Web/API/Element/openOrClosedShadowRoot) {{Non-standard_Inline}}{{readOnlyInline}} + - : Renvoie la racine sombre hébergée par l'élément (qu'elle soit ouverte ou fermée). **Uniquement disponible pour [les WebExtensions](/fr/docs/Mozilla/Add-ons/WebExtensions).** +- [`Element.slot`](/fr/docs/Web/API/Element/slot) {{Experimental_Inline}} + - : Renvoie le nom de l'emplacement du DOM sombre dans lequel l'élément est inséré. +- [`Element.tagName`](/fr/docs/Web/API/Element/tagName) {{readOnlyInline}} + - : Renvoie une chaîne de caractères ([`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String)) qui est le nom de la balise pour l'élément courant. + +### Propriétés provenant d'ARIA + +_L'interface `Element` inclut les propriétés suivantes, définies sur le mixin `ARIAMixin`._ + +- [`Element.ariaAtomic`](/fr/docs/Web/API/Element/ariaAtomic) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-atomic` qui indique si des technologies d'assistance présenteront tout ou partie de la région modifiée selon les notifications définies par l'attribut `aria-relevant`. +- [`Element.ariaAutoComplete`](/fr/docs/Web/API/Element/ariaAutoComplete) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-autocomplete` qui indique si la saisie de texte peut déclencher l'affichage d'une ou plusieurs prédictions pour la valeur saisie par l'utilisateur à destination d'une liste de choix, d'une boîte de recherche ou d'une zone de texte. Elle indique également la façon dont les éventuelles prédictions seraient présentées. +- [`Element.ariaBusy`](/fr/docs/Web/API/Element/ariaBusy) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-busy` qui indique d'un élément est en train d'être modifié. Les technologies d'assistance peuvent alors faire le choix d'attendre la fin de la modification avant d'exposer le contenu à l'utilisateur. +- [`Element.ariaChecked`](/fr/docs/Web/API/Element/ariaChecked) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-checked` indiquant l'état coché (ou non) des cases à cocher, des boutons radio ou des autres éléments d'interface graphique qui peuvent être cochés. +- [`Element.ariaColCount`](/fr/docs/Web/API/Element/ariaColCount) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colcount` indiquant le nombre de colonnes d'un tableau, d'une grille ou d'une grille arborescente. +- [`Element.ariaColIndex`](/fr/docs/Web/API/Element/ariaColIndex) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colindex` qui définit l'indice de la colonne d'un élément ou sa position par rapport au nombre total de colonnes d'un tableau, d'une grille ou d'une grille arborescente. +- [`Element.ariaColIndexText`](/fr/docs/Web/API/Element/ariaColIndexText) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colindextext` qui définit texte alternatif à `aria-colindex` qui soit compréhensible par un humain. +- [`Element.ariaColSpan`](/fr/docs/Web/API/Element/ariaColSpan) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colspan` qui définit le nombre de colonnes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente. +- [`Element.ariaCurrent`](/fr/docs/Web/API/Element/ariaCurrent) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-current` qui indique l'élément représente l'objet courant dans un conteneur ou un ensemble d'éléments. +- [`Element.ariaDescription`](/fr/docs/Web/API/Element/ariaDescription) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-description` qui définit la chaîne de caractères pour décrire ou annoter l'élément courant. +- [`Element.ariaDisabled`](/fr/docs/Web/API/Element/ariaDisabled) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-disabled` qui indique que l'élément est perceptible mais désactivé et qu'il ne peut être édité ou manipulé. +- [`Element.ariaExpanded`](/fr/docs/Web/API/Element/ariaExpanded) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-expanded` qui indique si un élément de groupement contrôlé par l'élément courant est développé ou replié. +- [`Element.ariaHasPopup`](/fr/docs/Web/API/Element/ariaHasPopup) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-haspopup` qui indique la disponibilité et le type d'élément interactif visuel comme un menu ou une boîte de dialogue pouvant être généré par l'élément courant. +- [`Element.ariaHidden`](/fr/docs/Web/API/Element/ariaHidden) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-hidden` qui indique si l'élément est exposé à une API d'accessibilité. +- [`Element.ariaKeyShortcuts`](/fr/docs/Web/API/Element/ariaKeyShortcuts) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-keyshortcuts` qui indique les raccourcis clavier implémentés spécifiquement pour activer ou fournir le focus à un élément. +- [`Element.ariaLabel`](/fr/docs/Web/API/Element/ariaLabel) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-label` qui définit une chaîne de caractères étant un libellé pour l'élément courant. +- [`Element.ariaLevel`](/fr/docs/Web/API/Element/ariaLevel) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-level` qui définit le niveau hiérarchique de l'élément au sein d'une structure. +- [`Element.ariaLive`](/fr/docs/Web/API/Element/ariaLive) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-live` qui indique que l'élément sera mis à jour et qui décrit les types de mises à jour qui peuvent être attendues par les agents utilisateur, les outils d'assistance et l'utilisateur. +- [`Element.ariaModal`](/fr/docs/Web/API/Element/ariaModal) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-modal` qui indique si un élément est modal lorsqu'il est affiché. +- [`Element.ariaMultiline`](/fr/docs/Web/API/Element/ariaMultiline) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-multiline` qui indique si une zone de texte accepte une saisie sur plusieurs lignes ou sur une seule ligne. +- [`Element.ariaMultiSelectable`](/fr/docs/Web/API/Element/ariaMultiSelectable) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-multiselectable` qui indique que la personne peut choisir plus d'un élément parmi les éléments descendants qui peuvent être sélectionnés. +- [`Element.ariaOrientation`](/fr/docs/Web/API/Element/ariaOrientation) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-orientation` qui indique si l'orientation de l'élément est horizontale, verticale ou inconnue voire ambigüe. +- [`Element.ariaPlaceholder`](/fr/docs/Web/API/Element/ariaPlaceholder) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-placeholder` qui définit une indication courte destinée à aider l'utilisateur à saisir une valeur lorsque le contrôle ne possède pas de valeur. +- [`Element.ariaPosInSet`](/fr/docs/Web/API/Element/ariaPosInSet) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-posinset` qui définit l'index ou la position de l'élément courant dans l'ensemble ou l'arbre d'éléments. +- [`Element.ariaPressed`](/fr/docs/Web/API/Element/ariaPressed) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-pressed` qui indique l'état actif/pressé des boutons. +- [`Element.ariaReadOnly`](/fr/docs/Web/API/Element/ariaReadOnly) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-readonly` qui indique que l'élément ne peut pas être édité mais qu'il peut être utilisé sinon. +- [`Element.ariaRelevant`](/fr/docs/Web/API/Element/ariaRelevant) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-relevant` qui indique les notifications qui seront déclenchées par l'agent utilisateur lorsque l'arbre d'accessibilité d'une région interactive sera modifié. Cette propriété est utilisée afin de décrire quels changements d'une région `aria-live` sont pertinents et devraient être annoncés. +- [`Element.ariaRequired`](/fr/docs/Web/API/Element/ariaRequired) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-required` qui indique que la saisie d'une utilisatrice ou d'un utilisateur est requise sur l'élément avant qu'un formulaire puisse être envoyé. +- [`Element.ariaRoleDescription`](/fr/docs/Web/API/Element/ariaRoleDescription) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-roledescription` qui définit une description compréhensible par un humain, adaptée par l'autrice ou l'auteur du document pour le rôle de l'élément courant. +- [`Element.ariaRowCount`](/fr/docs/Web/API/Element/ariaRowCount) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowcount` qui définit le nombre total de lignes dans un tableau, une grille ou une grille arborescente. +- [`Element.ariaRowIndex`](/fr/docs/Web/API/Element/ariaRowIndex) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowindex` qui définit l'index ou la position de la ligne de l'élément par rapport au nombre total de lignes dans le tableau, la grille ou la grille arborescente. +- [`Element.ariaRowIndexText`](/fr/docs/Web/API/Element/ariaRowIndexText) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowindextext` qui définit un libellé alternatif à `aria-rowindex`, compréhensible par un humain. +- [`Element.ariaRowSpan`](/fr/docs/Web/API/Element/ariaRowSpan) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowspan` qui définit le nombre de lignes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente. +- [`Element.ariaSelected`](/fr/docs/Web/API/Element/ariaSelected) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-selected` qui indique l'état de sélection pour les éléments qui peuvent être sélectionnés. +- [`Element.ariaSetSize`](/fr/docs/Web/API/Element/ariaSetSize) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-setsize` qui définit le nombre d'objets dans l'ensemble d'éléments d'une liste ou d'un arbre. +- [`Element.ariaSort`](/fr/docs/Web/API/Element/ariaSort) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-sort` qui indique si les objets d'un tableau ou d'une grille sont triés par ordre croissant ou décroissant. +- [`Element.ariaValueMax`](/fr/docs/Web/API/Element/ariaValueMax) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valueMax` qui définit la valeur maximale autorisée pour un élément d'interface utilisateur décrivant un intervalle. +- [`Element.ariaValueMin`](/fr/docs/Web/API/Element/ariaValueMin) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valueMin` qui définit la valeur minimale autorisée pour un élément d'interface utilisateur décrivant un intervalle. +- [`Element.ariaValueNow`](/fr/docs/Web/API/Element/ariaValueNow) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valueNow` qui définit la valeur courante d'un élément d'interface utilisateur décrivant un intervalle. +- [`Element.ariaValueText`](/fr/docs/Web/API/Element/ariaValueText) + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valuetext` qui définit une alternative textuelle à `aria-valuenow` compréhensible par un humain. + +### Gestionnaires d'évènements + +- [`Element.onfullscreenchange`](/fr/docs/Web/API/Element/onfullscreenchange) + - : Un gestionnaire d'évènement pour l'évènement [`fullscreenchange`](/fr/docs/Web/API/Document/fullscreenchange_event) qui est envoyé lorsque l'élément passe en mode plein écran ou sort de celui-ci. Cet évènement peut être utilisé pour surveiller les transitions entre les deux modes mais aussi pour surveiller les modifications inattendues comme lorsque l'application s'exécute en arrière-plan. +- [`Element.onfullscreenerror`](/fr/docs/Web/API/Element/onfullscreenerror) + - : Un gestionnaire d'évènement pour [`fullscreenerror`](/fr/docs/Web/API/Document/fullscreenerror_event) qui est envoyé lorsqu'une erreur se produit lors du passage au mode plein écran. + +## Méthodes + +_`Element` hérite des méthodes fournit par la classe parente [`Node`](/fr/docs/Web/API/Node) et de sa classe parente avant elle : [`EventTarget`](/fr/docs/Web/API/EventTarget)._ + +- [`EventTarget.addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) + - : Enregistre un gestionnaire d'évènement sur l'élément pour un type d'évènement donné. +- [`Element.after()`](/fr/docs/Web/API/Element/after) + - : Insère un ensemble d'objets [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) dans la liste des enfants du parent de l'élément courant, juste après ce dernier. +- [`Element.attachShadow()`](/fr/docs/Web/API/Element/attachShadow) + - : Attache un arbre du DOM sombre à l'élément indiqué puis renvoie une référence à sa racine [`ShadowRoot`](/fr/docs/Web/API/ShadowRoot). +- [`Element.animate()`](/fr/docs/Web/API/Element/animate) {{Experimental_Inline}} + - : Une méthode synthétique pour créer et exécuter une animation sur un élément. Renvoie l'instance de l'objet `Animation` créé. +- [`Element.append()`](/fr/docs/Web/API/Element/append) + - : Insère un ensemble d'objet [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) après le dernier enfant de l'élément. +- [`Element.before()`](/fr/docs/Web/API/Element/before) + - : Insère un ensemble d'objet [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) dans la liste des enfants du parent de l'élément courant, juste avant ce dernier. +- [`Element.closest()`](/fr/docs/Web/API/Element/closest) + - : Renvoie l'élément (`Element`) qui est le plus proche ancêtre de l'élément courant (ou l'élément courant lui-même) qui correspond au sélecteur passé en paramètre. +- [`Element.createShadowRoot()`](/fr/docs/Web/API/Element/createShadowRoot) {{Non-standard_Inline}} {{Deprecated_Inline}} + - : Crée un [DOM sombre](/fr/docs/Web/Web_Components/Using_shadow_DOM) sur l'élément, le transformant ainsi en hôte sombre. Renvoie un objet [`ShadowRoot`](/fr/docs/Web/API/ShadowRoot). +- [`Element.computedStyleMap()`](/fr/docs/Web/API/Element/computedStyleMap) {{Experimental_Inline}} + - : Renvoie une interface [`StylePropertyMapReadOnly`](/fr/docs/Web/API/StylePropertyMapReadOnly) qui fournit une représentation en lecture seule d'un bloc de déclaration CSS alternatif à [`CSSStyleDeclaration`](/fr/docs/Web/API/CSSStyleDeclaration). +- [`EventTarget.dispatchEvent()`](/fr/docs/Web/API/EventTarget/dispatchEvent) + - : Diffuse un évènement sur ce nœud dans le DOM et renvoie un booléen qui indique si aucun gestionnaire n'a annulé l'évènement. +- [`Element.getAnimations()`](/fr/docs/Web/API/Element/getAnimations) {{Experimental_Inline}} + - : Renvoie un tableau des objets `Animation` actuellement actifs sur l'élément. +- [`Element.getAttribute()`](/fr/docs/Web/API/Element/getAttribute) + - : Récupère la valeur de l'attribut nommé pour le nœud courant et le renvoie comme un [objet](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object). +- [`Element.getAttributeNames()`](/fr/docs/Web/API/Element/getAttributeNames) + - : Renvoie un tableau de noms d'attribut pour l'élément courant. +- [`Element.getAttributeNode()`](/fr/docs/Web/API/Element/getAttributeNode) + - : Récupère la représentation du nœud pour l'attrtibut nommé du nœud courant et le renvoie comme un objet [`Attr`](/fr/docs/Web/API/Attr). +- [`Element.getAttributeNodeNS()`](/fr/docs/Web/API/Element/getAttributeNodeNS) + - : Depuis le nœud courant, récupère la représentation du nœud pour l'attribut avec le nom et l'espace de noms indiqués et renvoie la valeur obtenue sous la forme d'un objet [`Attr`](/fr/docs/Web/API/Attr). +- [`Element.getAttributeNS()`](/fr/docs/Web/API/Element/getAttributeNS) + - : Depuis le nœud courant, récupère la valeur de l'attribut avec le nom et l'espace de noms indiqués et la renvoie sous la forme d'un [objet](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object). +- [`Element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect) + + - : Renvoie la taille d'un élément et sa position relative dans la zone d'affichage ( + + viewport + + ). + +- [`Element.getBoxQuads()`](/fr/docs/Web/API/Element/getBoxQuads) {{experimental_inline}} + - : Renvoie une liste d'objets [`DOMQuad`](/fr/docs/Web/API/DOMQuad) qui représentent les fragments CSS pour le nœud. +- [`Element.getClientRects()`](/fr/docs/Web/API/Element/getClientRects) + - : Renvoie une collection de rectangles qui indique les rectangles englobants pour chaque ligne de texte d'un client. +- [`Element.getElementsByClassName()`](/fr/docs/Web/API/Element/getElementsByClassName) + - : Renvoie une collection dynamique [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) qui contient tous les descendants de l'élément courant et qui possèdent la liste de classes fournie en paramètre. +- [`Element.getElementsByTagName()`](/fr/docs/Web/API/Element/getElementsByTagName) + - : Renvoie une collection dynamique [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) qui contient tous les descendants de l'élément courant avec un nom de balise donné. +- [`Element.getElementsByTagNameNS()`](/fr/docs/Web/API/Element/getElementsByTagNameNS) + - : Renvoie une collection dynamique [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) qui contient tous les descendants de l'élément courant qui ont un nom de balise et un espace de noms donnés. +- [`Element.hasAttribute()`](/fr/docs/Web/API/Element/hasAttribute) + - : Renvoie un booléen indiquant si l'élément courant possède l'attribut donné. +- [`Element.hasAttributeNS()`](/fr/docs/Web/API/Element/hasAttributeNS) + - : Renvoie un booléen indiquant si l'élément courant possède l'attribut donné pour l'espace de noms donné. +- [`Element.hasAttributes()`](/fr/docs/Web/API/Element/hasAttributes) + - : Renvoie un booléen qui indique si l'élément courant a un ou plusieurs attributs HTML. +- [`Element.hasPointerCapture()`](/fr/docs/Web/API/Element/hasPointerCapture) + - : Indique si l'élément a la capture du pointeur pour le pointeur identifié par l'identifiant passé en argument. +- [`Element.insertAdjacentElement()`](/fr/docs/Web/API/Element/insertAdjacentElement) + - : Insère un nœud d'élément à la position relative indiquée par rapport à l'élément courant. +- [`Element.insertAdjacentHTML()`](/fr/docs/Web/API/Element/insertAdjacentHTML) + - : Analyse le texte comme HTML ou XML puis insère les nœuds résultatns dans l'arbre à la position indiquée. +- [`Element.insertAdjacentText()`](/fr/docs/Web/API/Element/insertAdjacentText) + - : Insère un nœud textuel à la position relative indiquée, par rapport à l'élément courant. +- [`Element.matches()`](/fr/docs/Web/API/Element/matches) + - : Renvoie un booléen qui indique si l'élément serait ciblé par la chaîne de caractères passée en argument qui décrit un sélecteur. +- [`Element.prepend()`](/fr/docs/Web/API/Element/prepend) + - : Insère un ensemble d'objets [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) avant le premier enfant de l'élément courant. +- [`Element.querySelector()`](/fr/docs/Web/API/Element/querySelector) + - : Renvoie le premier objet [`Node`](/fr/docs/Web/API/Node) qui correspond au sélecteur donné, relatif à l'élément courant. +- [`Element.querySelectorAll()`](/fr/docs/Web/API/Element/querySelectorAll) + - : Renvoie un objet [`NodeList`](/fr/docs/Web/API/NodeList) contenant les nœuds pour lesquels le sélecteur, passé en argument, relatif à l'élément courant. +- [`Element.releasePointerCapture()`](/fr/docs/Web/API/Element/releasePointerCapture) + - : Libère (arrête) la capture du pointeur précédemment activée pour un évènement de pointeur spécifique. +- [`Element.remove()`](/fr/docs/Web/API/Element/remove) + - : Retire l'élément de la liste des éléments enfants de son parent. +- [`Element.removeAttribute()`](/fr/docs/Web/API/Element/removeAttribute) + - : Retire l'attribut nommé du nœud courant. +- [`Element.removeAttributeNode()`](/fr/docs/Web/API/Element/removeAttributeNode) + - : Retire la représentation nodale de l'attribut nommé pour le nœud courant. +- [`Element.removeAttributeNS()`](/fr/docs/Web/API/Element/removeAttributeNS) + - : Sur le nœud courant, retire l'attribut avec le nom et l'espace de noms indiqués. +- [`EventTarget.removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener) + - : Retire un gestionnaire d'évènement de l'élément. +- [`Element.replaceChildren()`](/fr/docs/Web/API/Element/replaceChildren) + - : Remplace l'enfant existant d'un nœud avec un nouvel ensemble d'enfants. +- [`Element.replaceWith()`](/fr/docs/Web/API/Element/replaceWith) + - : Remplace l'élément dans la liste des enfants de son parent par un ensemble d'objets [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString). +- [`Element.requestFullscreen()`](/fr/docs/Web/API/Element/requestFullScreen) {{Experimental_Inline}} + - : Demande au navigateur, de façon asynchrone, d'afficher l'élément en plein écran. +- [`Element.requestPointerLock()`](/fr/docs/Web/API/Element/requestPointerLock) {{Experimental_Inline}} + - : Demande au navigateur, de façon asynchrone, de bloquer le pointeur sur l'élément indiqué. +- [`Element.scroll()`](/fr/docs/Web/API/Element/scroll) + - : Défile jusqu'à un ensemble de coordonnées données à l'intérieur de l'élément courant. +- [`Element.scrollBy()`](/fr/docs/Web/API/Element/scrollBy) + - : Défile un élément de la quantité indiquée. +- [`Element.scrollIntoView()`](/fr/docs/Web/API/Element/scrollIntoView) {{Experimental_Inline}} + - : Défile la page jusqu'à ce que l'élément apparaisse dans la vue. +- [`Element.scrollTo()`](/fr/docs/Web/API/Element/scrollTo) + - : Défile jusqu'à un ensemble de coordonnées particulier à l'intérieur de l'élément donné. +- [`Element.setAttribute()`](/fr/docs/Web/API/Element/setAttribute) + - : Définit la valeur d'un attribut nommé pour le nœud courant. +- [`Element.setAttributeNode()`](/fr/docs/Web/API/Element/setAttributeNode) + - : Définit la représentation nodale d'un attribut nommé pour le nœud courant. +- [`Element.setAttributeNodeNS()`](/fr/docs/Web/API/Element/setAttributeNodeNS) + - : Pour le nœud courant, définit la représentation nodale d'un attribut avec le nom et l'espace de noms indiqués. +- [`Element.setAttributeNS()`](/fr/docs/Web/API/Element/setAttributeNS) + - : Pour le nœud courant, définit la valeur de l'attribut avec le nom et l'espace de noms indiqués. +- [`Element.setCapture()`](/fr/docs/Web/API/Element/setCapture) {{Non-standard_Inline}}{{Deprecated_Inline}} + - : Initialise la capture des évènements liés à la souris, redirigeant ainsi tous les évènements de la souris sur cet élément. +- [`Element.setPointerCapture()`](/fr/docs/Web/API/Element/setPointerCapture) + - : Désigne un élément spécifique comme future cible pour la capture des [évènements de pointeur](/fr/docs/Web/API/Pointer_events). +- [`Element.toggleAttribute()`](/fr/docs/Web/API/Element/toggleAttribute) + - : Active/désactive un attribut booléen sur l'élément courant : s'il est présent, cela le retire et s'il est absent, cela l'ajoute. + +## Évènements + +On peut écouter ces évènements en utilisant la méthode `addEventListener()` ou en affectant un gestionnaire d'évènement à la propriété `onnomevenement` de cette interface. + +- [`cancel`](/fr/docs/Web/API/HTMLDialogElement/cancel_event) + + - : Déclenché sur un élément [``](/fr/docs/Web/HTML/Element/dialog) lorsque la personne indique au navigateur le souhait de fermer la boîte de dialogue courante. Un navigateur pourra par exemple déclencher cet évènement lors d'un appui sur la touche + + Echap + + ou lors d'un clic sur le bouton « Fermer cette boîte de dialogue » fourni par le navigateur. Également disponible via la propriété [`oncancel`](/fr/docs/Web/API/GlobalEventHandlers/oncancel). + +- [`error`](/fr/docs/Web/API/Element/error_event) + - : Déclenché lors de l'échec du chargement d'une ressource ou lorsque celle-ci ne peut être utilisée. Cet évènement sera par exemple déclenché lors d'une erreur d'exécution d'un script ou lorsqu'une image ne peut être trouvée ou est invalide. Également disponible via la propriété [`onerror`](/fr/docs/Web/API/GlobalEventHandlers/onerror). +- [`scroll`](/fr/docs/Web/API/Element/scroll_event) + - : Déclenché lors du défilement de la vue du document ou d'un élément. Également disponible via la propriété [`onscroll`](/fr/docs/Web/API/GlobalEventHandlers/onscroll). +- [`select`](/fr/docs/Web/API/Element/select_event) + - : Déclenché lors de la sélection de texte. Également disponible via la propriété [`onselect`](/fr/docs/Web/API/GlobalEventHandlers/onselect). +- [`show`](/fr/docs/Web/API/Element/show_event) + - : Déclenché lorsqu'un évènement [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) a été déclenché ou a bouillonné sur un élément qui dispose de l'attribut [`contextmenu`](/fr/docs/Web/HTML/Global_attributes/contextmenu) attribute. {{deprecated_inline}} Également disponible via la propriété [`onshow`](/fr/docs/Web/API/GlobalEventHandlers/onshow). +- [`wheel`](/fr/docs/Web/API/Element/wheel_event) + - : Déclenché lorsque l'utilisateur fait tourner la molette d'un appareil de pointage (généralement une souris). Également disponible via la propriété [`onwheel`](/fr/docs/Web/API/GlobalEventHandlers/onwheel). + +### Évènements du presse-papiers + +- [`copy`](/fr/docs/Web/API/Element/copy_event) + - : Déclenché lorsque l'utilisateur initie une action de copie via l'interface du navigateur. Également disponible via la propriété [`oncopy`](/fr/docs/Web/API/HTMLElement/oncopy). +- [`cut`](/fr/docs/Web/API/Element/cut_event) + - : Déclenché lorsque l'utilisateur initie une action de coupe via l'interface du navigateur. Également disponible via la propriété [`oncut`](/fr/docs/Web/API/HTMLElement/oncut). +- [`paste`](/fr/docs/Web/API/Element/paste_event) + - : Déclenché lorsque l'utilisateur initie une action pour coller via l'interface du navigateur. Également disponible via la propriété [`onpaste`](/fr/docs/Web/API/HTMLElement/onpaste). + +### Évènements de composition + +- [`compositionend`](/fr/docs/Web/API/Element/compositionend_event) + - : Déclenché lorsqu'un système de composition textuel tel qu'un [éditeur de méthode de saisie](/fr/docs/Glossary/Input_method_editor) termine ou annule la session de composition courante. +- [`compositionstart`](/fr/docs/Web/API/Element/compositionstart_event) + - : Déclenché lorsqu'un système de composition textuel tel qu'un [éditeur de méthode de saisie](/fr/docs/Glossary/Input_method_editor) démarre une nouvelle session de composition. +- [`compositionupdate`](/fr/docs/Web/API/Element/compositionupdate_event) + - : Déclenché lorsqu'un nouveau caractère est reçu dans le contexte d'une session de composition textuelle. + +### Évènements pour le focus + +- [`blur`](/fr/docs/Web/API/Element/blur_event) + - : Déclenché lorsqu'un élément a perdu le focus. Également disponible via la propriété [`onblur`](/fr/docs/Web/API/GlobalEventHandlers/onblur). +- [`focus`](/fr/docs/Web/API/Element/focus_event) + - : Déclenché lorsqu'un élément reçoit le focus. Également disponible via la propriété [`onfocus`](/fr/docs/Web/API/GlobalEventHandlers/onfocus). +- [`focusin`](/fr/docs/Web/API/Element/focusin_event) + - : Déclenché lorsqu'un élément s'apprête à recevoir le focus. +- [`focusout`](/fr/docs/Web/API/Element/focusout_event) + - : Déclenché lorsqu'un élément s'apprête à perdre le focus. + +### Évènements relatifs au plein écran + +- [`fullscreenchange`](/fr/docs/Web/API/Element/fullscreenchange_event) + - : Envoyé à un élément (`Element`) lorsque celui-ci effectue une transition (entrée ou sortie) pour le mode [plein écran](/fr/docs/Web/API/Fullscreen_API/Guide). Également disponible via la propriété [`onfullscreenchange`](/fr/docs/Web/API/Element/onfullscreenchange). +- [`fullscreenerror`](/fr/docs/Web/API/Element/fullscreenerror_event) + - : Envoyé à un élément `Element` si une erreur se produit lors d'une transition (entrée ou sortie) pour le mode [plein écran](/fr/docs/Web/API/Fullscreen_API/Guide). Également disponible via la propriété [`onfullscreenerror`](/fr/docs/Web/API/Element/onfullscreenerror). + +### Évènements relatifs au clavier + +- [`keydown`](/fr/docs/Web/API/Element/keydown_event) + - : Déclenché lors de l'appui sur une touche du clavier. Également disponible via la propriété [`onkeydown`](/fr/docs/Web/API/GlobalEventHandlers/onkeydown). +- [`keypress`](/fr/docs/Web/API/Element/keypress_event) + - : Déclenché lorsqu'une touche produit un caractère lorsqu'elle est pressée. {{deprecated_inline}} Également disponible via la propriété [`onkeypress`](/fr/docs/Web/API/GlobalEventHandlers/onkeypress). +- [`keyup`](/fr/docs/Web/API/Element/keyup_event) + - : Déclenché lorsqu'une touche est relâchée. Également disponible via la propriété [`onkeyup`](/fr/docs/Web/API/GlobalEventHandlers/onkeyup). + +### Évènements relatifs à la souris + +- [`auxclick`](/fr/docs/Web/API/Element/auxclick_event) + - : Déclenché lorsqu'un bouton non primaire d'un appareil de pointage (c'est-à-dire tout bouton de la souris en dehors du bouton gauche) a été pressé puis relâché sur un élément. Également disponible via la propriété [`onauxclick`](/fr/docs/Web/API/GlobalEventHandlers/onauxclick). +- [`click`](/fr/docs/Web/API/Element/click_event) + - : Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été pressé puis relâche sur un élément. Également disponible via la propriété [`onclick`](/fr/docs/Web/API/GlobalEventHandlers/onclick). +- [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) + - : Déclenché lorsqu'un utilisateur tente d'ouvrir un menu contextuel. Également disponible via la propriété [`oncontextmenu`](/fr/docs/Web/API/GlobalEventHandlers/oncontextmenu). +- [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) + - : Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été utilisé pour un double-clic sur un élément. Également disponible via la propriété [`ondblclick`](/fr/docs/Web/API/GlobalEventHandlers/ondblclick). +- [`DOMActivate`](/fr/docs/Web/API/Element/DOMActivate_event) {{Deprecated_Inline}} + - : Se produit lorsqu'un élément est activé, par exemple avec un clic de souris ou l'appui d'une touche. +- [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) + - : Déclenché lorsqu'un bouton d'un appareil de pointage est pressé sur un élément. Également disponible via la propriété [`onmousedown`](/fr/docs/Web/API/GlobalEventHandlers/onmousedown). +- [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) + - : Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé pour arriver sur l'élément disposant du gestionnaire d'évènement. Également disponible via la propriété [`onmouseenter`](/fr/docs/Web/API/GlobalEventHandlers/onmouseenter). +- [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) + - : Déclenché lorsque le pointeur d'un appareil de pointage (généralement une souris) est déplacée en dehors de l'élément qui dispose du gestionnaire d'évènement. Également disponible via la propriété [`onmouseleave`](/fr/docs/Web/API/GlobalEventHandlers/onmouseleave). +- [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) + - : Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé sur un élément. Également disponible via la propriété [`onmousemove`](/fr/docs/Web/API/GlobalEventHandlers/onmousemove). +- [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) + - : Déclenché lorsqu'un appareil de pointage (généralement une souris) se déplace pour quitter l'élément qui dispose du gestionnaire d'évènement (ou lorsque le pointeur quitte l'un des enfants de cet élément). Également disponible via la propriété [`onmouseout`](/fr/docs/Web/API/GlobalEventHandlers/onmouseout). +- [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - : Déclenché lorsqu'un appareil de pointage arrive sur l'élément (ou l'un de ses enfants) qui dispose du gestionnaire d'évènement. Également disponible via la propriété [`onmouseover`](/fr/docs/Web/API/GlobalEventHandlers/onmouseover). +- [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) + - : Déclenché lorsque le bouton d'un appareil de pointage est relâché pour un élément. Également disponible via la propriété [`onmouseup`](/fr/docs/Web/API/GlobalEventHandlers/onmouseup). +- [`webkitmouseforcechanged`](/fr/docs/Web/API/Element/webkitmouseforcechanged_event) + - : Déclenché à chaque fois que la quantite dé pression change sur le pavé ou l'écran tactile. +- [`webkitmouseforcedown`](/fr/docs/Web/API/Element/webkitmouseforcedown_event) + - : Déclenché après l'évènement `mousedown` dès que suffisamment de pression a été appliquée pour qualifier ce clic de clic forcé. +- [`webkitmouseforcewillbegin`](/fr/docs/Web/API/Element/webkitmouseforcewillbegin_event) + - : Déclenché avant l'évènement [`mousedown`](/fr/docs/Web/API/Element/mousedown_event). +- [`webkitmouseforceup`](/fr/docs/Web/API/Element/webkitmouseforceup_event) + - : Déclenché après l'évènement [`webkitmouseforcedown`](/fr/docs/Web/API/Element/webkitmouseforcedown_event) dès que suffisamment de pression a été relâchée pour terminer le clic forcé. + +### Évènements tactiles + +- [`touchcancel`](/fr/docs/Web/API/Element/touchcancel_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher ont été perturbés de façon spécifique à l'implémentation (par exemple lorsque trop de points de toucher ont été créés). Également disponible avec la propriété [`ontouchcancel`](/fr/docs/Web/API/GlobalEventHandlers/ontouchcancel). +- [`touchend`](/fr/docs/Web/API/Element/touchend_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher sont retirés de la surface tactile. Également disponible via la propriété [`ontouchend`](/fr/docs/Web/API/GlobalEventHandlers/ontouchend). +- [`touchmove`](/fr/docs/Web/API/Element/touchmove_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher se déplacent sur la surface tactile. Également disponible via la propriété [`ontouchmove`](/fr/docs/Web/API/GlobalEventHandlers/ontouchmove). +- [`touchstart`](/fr/docs/Web/API/Element/touchstart_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher sont placés sur la surface tactile. Également disponible via la propriété [`ontouchstart`](/fr/docs/Web/API/GlobalEventHandlers/ontouchstart). + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} diff --git a/files/fr/web/api/element/innerhtml/index.md b/files/fr/web/api/element/innerhtml/index.md index 91ab29da37..8fe3f15e3b 100644 --- a/files/fr/web/api/element/innerhtml/index.md +++ b/files/fr/web/api/element/innerhtml/index.md @@ -10,154 +10,162 @@ tags: translation_of: Web/API/Element/innerHTML original_slug: Web/API/Element/innertHTML --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

La propriété Element.innerHTML de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.

+La propriété **`Element.innerHTML`** de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément. -
-

Note : Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères (&), (<), ou (>), innerHTML renverra à la place les chaînes suivantes : "&amp;", "&lt;" et "&gt;" respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.

-
+> **Note :** Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères `(&), (<),` ou `(>)`, `innerHTML` renverra à la place les chaînes suivantes : `"&"`, `"<"` et `">"` respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds. -

Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.

+Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}. -

Syntaxe

+## Syntaxe -
const content = element.innerHTML;
+    const content = element.innerHTML;
 
-element.innerHTML = htmlString;
-
+ element.innerHTML = htmlString; -

Valeur

+### Valeur -

Une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de innerHTML supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne htmlString.

+Une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. -

Exceptions

+### Exceptions -
-
SyntaxError
-
Une tentative a été faite de définir la valeur de innerHTML en utilisant une chaîne qui n'est pas correctement formée HTML.
-
NoModificationAllowedError
-
Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}.
-
+- `SyntaxError` + - : Une tentative a été faite de définir la valeur de `innerHTML` en utilisant une chaîne qui n'est pas correctement formée HTML. +- `NoModificationAllowedError` + - : Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}. -

Notes d'utilisation

+## Notes d'utilisation -

La propriété innerHTML peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial.

+La propriété `innerHTML` peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial. -

Lecture du contenu HTML d'un élément

+### Lecture du contenu HTML d'un élément -

La lecture de innerHTML amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée.

+La lecture de `innerHTML` amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée. -
let contents = myElement.innerHTML;
+```js +let contents = myElement.innerHTML; +``` -

Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.

+Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément. -
-

Note : Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.

-
+> **Note :** Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine. -

Remplacement du contenu d'un élément

+### Remplacement du contenu d'un élément -

Définir la valeur de innerHTML vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu.

+Définir la valeur de `innerHTML` vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu. -

Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document.

+Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document. -
document.body.innerHTML = "";
+```js +document.body.innerHTML = ""; +``` -

Cet exemple récupère le balisage HTML actuel du document et remplace les caractères "<" par l'entité HTML "& lt;", convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de innerHTML est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.

+Cet exemple récupère le balisage HTML actuel du document et remplace les caractères `"<"` par l'entité HTML `"& lt;"`, convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de `innerHTML` est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page. -
document.documentElement.innerHTML = "<pre>" +
-         document.documentElement.innerHTML.replace(/</g,"&lt;") +
-            "</pre>";
+```js +document.documentElement.innerHTML = "
" +
+         document.documentElement.innerHTML.replace(/";
+```
 
-

Détails opérationnels

+#### Détails opérationnels -

Qu'arrive-t-il exactement quand vous définissez la valeur de innerHTML ?  Cela entraîne l'agent utilisateur à suivre ces étapes :

+Qu'arrive-t-il exactement quand vous définissez la valeur de `innerHTML` ?  Cela entraîne l'agent utilisateur à suivre ces étapes : -
    -
  1. La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments.
  2. -
  3. Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément <template> est remplacé par le nouveau DocumentFragment créé à l'étape 1.
  4. -
  5. Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau DocumentFragment.
  6. -
+1. La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments. +2. Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément `