From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- files/fr/web/api/element/animate/index.html | 106 ----- files/fr/web/api/element/animate/index.md | 106 +++++ files/fr/web/api/element/attachshadow/index.html | 54 --- files/fr/web/api/element/attachshadow/index.md | 54 +++ files/fr/web/api/element/attributes/index.html | 116 ------ files/fr/web/api/element/attributes/index.md | 116 ++++++ .../web/api/element/childelementcount/index.html | 97 ----- .../fr/web/api/element/childelementcount/index.md | 97 +++++ files/fr/web/api/element/classlist/index.html | 284 -------------- files/fr/web/api/element/classlist/index.md | 284 ++++++++++++++ files/fr/web/api/element/classname/index.html | 79 ---- files/fr/web/api/element/classname/index.md | 79 ++++ files/fr/web/api/element/click_event/index.html | 153 -------- files/fr/web/api/element/click_event/index.md | 153 ++++++++ files/fr/web/api/element/clientheight/index.html | 49 --- files/fr/web/api/element/clientheight/index.md | 49 +++ files/fr/web/api/element/clientleft/index.html | 80 ---- files/fr/web/api/element/clientleft/index.md | 80 ++++ files/fr/web/api/element/clientwidth/index.html | 66 ---- files/fr/web/api/element/clientwidth/index.md | 66 ++++ files/fr/web/api/element/closest/index.html | 138 ------- files/fr/web/api/element/closest/index.md | 138 +++++++ .../api/element/compositionend_event/index.html | 128 ------- .../web/api/element/compositionend_event/index.md | 128 +++++++ .../api/element/compositionstart_event/index.html | 144 ------- .../api/element/compositionstart_event/index.md | 144 +++++++ .../api/element/compositionupdate_event/index.html | 86 ----- .../api/element/compositionupdate_event/index.md | 86 +++++ .../web/api/element/contextmenu_event/index.html | 104 ----- .../fr/web/api/element/contextmenu_event/index.md | 104 +++++ files/fr/web/api/element/copy_event/index.html | 107 ------ files/fr/web/api/element/copy_event/index.md | 107 ++++++ files/fr/web/api/element/dblclick_event/index.html | 119 ------ files/fr/web/api/element/dblclick_event/index.md | 119 ++++++ files/fr/web/api/element/error_event/index.html | 91 ----- files/fr/web/api/element/error_event/index.md | 91 +++++ files/fr/web/api/element/focusin_event/index.html | 76 ---- files/fr/web/api/element/focusin_event/index.md | 76 ++++ files/fr/web/api/element/focusout_event/index.html | 76 ---- files/fr/web/api/element/focusout_event/index.md | 76 ++++ files/fr/web/api/element/getattribute/index.html | 85 ----- files/fr/web/api/element/getattribute/index.md | 85 +++++ .../web/api/element/getattributenames/index.html | 66 ---- .../fr/web/api/element/getattributenames/index.md | 66 ++++ .../fr/web/api/element/getattributenode/index.html | 51 --- files/fr/web/api/element/getattributenode/index.md | 51 +++ .../web/api/element/getattributenodens/index.html | 40 -- .../fr/web/api/element/getattributenodens/index.md | 40 ++ files/fr/web/api/element/getattributens/index.html | 124 ------ files/fr/web/api/element/getattributens/index.md | 124 ++++++ .../api/element/getboundingclientrect/index.html | 139 ------- .../web/api/element/getboundingclientrect/index.md | 139 +++++++ .../api/element/getelementsbyclassname/index.html | 69 ---- .../api/element/getelementsbyclassname/index.md | 69 ++++ .../api/element/getelementsbytagname/index.html | 76 ---- .../web/api/element/getelementsbytagname/index.md | 76 ++++ .../api/element/getelementsbytagnamens/index.html | 75 ---- .../api/element/getelementsbytagnamens/index.md | 75 ++++ files/fr/web/api/element/hasattribute/index.html | 77 ---- files/fr/web/api/element/hasattribute/index.md | 77 ++++ files/fr/web/api/element/hasattributens/index.html | 54 --- files/fr/web/api/element/hasattributens/index.md | 54 +++ files/fr/web/api/element/hasattributes/index.html | 79 ---- files/fr/web/api/element/hasattributes/index.md | 79 ++++ files/fr/web/api/element/id/index.html | 68 ---- files/fr/web/api/element/id/index.md | 68 ++++ files/fr/web/api/element/index.html | 425 --------------------- files/fr/web/api/element/index.md | 425 +++++++++++++++++++++ files/fr/web/api/element/innerhtml/index.html | 206 ---------- files/fr/web/api/element/innerhtml/index.md | 206 ++++++++++ .../api/element/insertadjacentelement/index.html | 127 ------ .../web/api/element/insertadjacentelement/index.md | 127 ++++++ .../web/api/element/insertadjacenthtml/index.html | 99 ----- .../fr/web/api/element/insertadjacenthtml/index.md | 99 +++++ .../web/api/element/insertadjacenttext/index.html | 127 ------ .../fr/web/api/element/insertadjacenttext/index.md | 127 ++++++ files/fr/web/api/element/localname/index.html | 106 ----- files/fr/web/api/element/localname/index.md | 106 +++++ files/fr/web/api/element/matches/index.html | 108 ------ files/fr/web/api/element/matches/index.md | 108 ++++++ .../fr/web/api/element/mousedown_event/index.html | 88 ----- files/fr/web/api/element/mousedown_event/index.md | 88 +++++ .../fr/web/api/element/mouseenter_event/index.html | 157 -------- files/fr/web/api/element/mouseenter_event/index.md | 157 ++++++++ .../fr/web/api/element/mouseleave_event/index.html | 147 ------- files/fr/web/api/element/mouseleave_event/index.md | 147 +++++++ .../fr/web/api/element/mousemove_event/index.html | 161 -------- files/fr/web/api/element/mousemove_event/index.md | 161 ++++++++ files/fr/web/api/element/mouseout_event/index.html | 125 ------ files/fr/web/api/element/mouseout_event/index.md | 125 ++++++ .../fr/web/api/element/mouseover_event/index.html | 123 ------ files/fr/web/api/element/mouseover_event/index.md | 123 ++++++ files/fr/web/api/element/mouseup_event/index.html | 85 ----- files/fr/web/api/element/mouseup_event/index.md | 85 +++++ files/fr/web/api/element/namespaceuri/index.html | 74 ---- files/fr/web/api/element/namespaceuri/index.md | 74 ++++ files/fr/web/api/element/outerhtml/index.html | 111 ------ files/fr/web/api/element/outerhtml/index.md | 111 ++++++ files/fr/web/api/element/prefix/index.html | 66 ---- files/fr/web/api/element/prefix/index.md | 66 ++++ files/fr/web/api/element/queryselector/index.html | 134 ------- files/fr/web/api/element/queryselector/index.md | 134 +++++++ .../fr/web/api/element/queryselectorall/index.html | 166 -------- files/fr/web/api/element/queryselectorall/index.md | 166 ++++++++ .../api/element/releasepointercapture/index.html | 92 ----- .../web/api/element/releasepointercapture/index.md | 92 +++++ .../fr/web/api/element/removeattribute/index.html | 47 --- files/fr/web/api/element/removeattribute/index.md | 47 +++ .../web/api/element/removeattributenode/index.html | 45 --- .../web/api/element/removeattributenode/index.md | 45 +++ .../web/api/element/removeattributens/index.html | 44 --- .../fr/web/api/element/removeattributens/index.md | 44 +++ .../web/api/element/requestfullscreen/index.html | 65 ---- .../fr/web/api/element/requestfullscreen/index.md | 65 ++++ files/fr/web/api/element/scrollheight/index.html | 188 --------- files/fr/web/api/element/scrollheight/index.md | 188 +++++++++ files/fr/web/api/element/scrollintoview/index.html | 81 ---- files/fr/web/api/element/scrollintoview/index.md | 81 ++++ .../api/element/scrollintoviewifneeded/index.html | 47 --- .../api/element/scrollintoviewifneeded/index.md | 47 +++ files/fr/web/api/element/scrollleft/index.html | 69 ---- files/fr/web/api/element/scrollleft/index.md | 69 ++++ files/fr/web/api/element/scrollleftmax/index.html | 26 -- files/fr/web/api/element/scrollleftmax/index.md | 26 ++ files/fr/web/api/element/scrollto/index.html | 78 ---- files/fr/web/api/element/scrollto/index.md | 78 ++++ files/fr/web/api/element/scrolltop/index.html | 106 ----- files/fr/web/api/element/scrolltop/index.md | 106 +++++ files/fr/web/api/element/scrollwidth/index.html | 32 -- files/fr/web/api/element/scrollwidth/index.md | 32 ++ files/fr/web/api/element/select_event/index.html | 77 ---- files/fr/web/api/element/select_event/index.md | 77 ++++ files/fr/web/api/element/setattribute/index.html | 84 ---- files/fr/web/api/element/setattribute/index.md | 84 ++++ .../fr/web/api/element/setattributenode/index.html | 49 --- files/fr/web/api/element/setattributenode/index.md | 49 +++ .../web/api/element/setattributenodens/index.html | 53 --- .../fr/web/api/element/setattributenodens/index.md | 53 +++ files/fr/web/api/element/setattributens/index.html | 45 --- files/fr/web/api/element/setattributens/index.md | 45 +++ files/fr/web/api/element/setcapture/index.html | 87 ----- files/fr/web/api/element/setcapture/index.md | 87 +++++ .../web/api/element/setpointercapture/index.html | 90 ----- .../fr/web/api/element/setpointercapture/index.md | 90 +++++ files/fr/web/api/element/tagname/index.html | 69 ---- files/fr/web/api/element/tagname/index.md | 69 ++++ 146 files changed, 7265 insertions(+), 7265 deletions(-) delete mode 100644 files/fr/web/api/element/animate/index.html create mode 100644 files/fr/web/api/element/animate/index.md delete mode 100644 files/fr/web/api/element/attachshadow/index.html create mode 100644 files/fr/web/api/element/attachshadow/index.md delete mode 100644 files/fr/web/api/element/attributes/index.html create mode 100644 files/fr/web/api/element/attributes/index.md delete mode 100644 files/fr/web/api/element/childelementcount/index.html create mode 100644 files/fr/web/api/element/childelementcount/index.md delete mode 100644 files/fr/web/api/element/classlist/index.html create mode 100644 files/fr/web/api/element/classlist/index.md delete mode 100644 files/fr/web/api/element/classname/index.html create mode 100644 files/fr/web/api/element/classname/index.md delete mode 100644 files/fr/web/api/element/click_event/index.html create mode 100644 files/fr/web/api/element/click_event/index.md delete mode 100644 files/fr/web/api/element/clientheight/index.html create mode 100644 files/fr/web/api/element/clientheight/index.md delete mode 100644 files/fr/web/api/element/clientleft/index.html create mode 100644 files/fr/web/api/element/clientleft/index.md delete mode 100644 files/fr/web/api/element/clientwidth/index.html create mode 100644 files/fr/web/api/element/clientwidth/index.md delete mode 100644 files/fr/web/api/element/closest/index.html create mode 100644 files/fr/web/api/element/closest/index.md delete mode 100644 files/fr/web/api/element/compositionend_event/index.html create mode 100644 files/fr/web/api/element/compositionend_event/index.md delete mode 100644 files/fr/web/api/element/compositionstart_event/index.html create mode 100644 files/fr/web/api/element/compositionstart_event/index.md delete mode 100644 files/fr/web/api/element/compositionupdate_event/index.html create mode 100644 files/fr/web/api/element/compositionupdate_event/index.md delete mode 100644 files/fr/web/api/element/contextmenu_event/index.html create mode 100644 files/fr/web/api/element/contextmenu_event/index.md delete mode 100644 files/fr/web/api/element/copy_event/index.html create mode 100644 files/fr/web/api/element/copy_event/index.md delete mode 100644 files/fr/web/api/element/dblclick_event/index.html create mode 100644 files/fr/web/api/element/dblclick_event/index.md delete mode 100644 files/fr/web/api/element/error_event/index.html create mode 100644 files/fr/web/api/element/error_event/index.md delete mode 100644 files/fr/web/api/element/focusin_event/index.html create mode 100644 files/fr/web/api/element/focusin_event/index.md delete mode 100644 files/fr/web/api/element/focusout_event/index.html create mode 100644 files/fr/web/api/element/focusout_event/index.md delete mode 100644 files/fr/web/api/element/getattribute/index.html create mode 100644 files/fr/web/api/element/getattribute/index.md delete mode 100644 files/fr/web/api/element/getattributenames/index.html create mode 100644 files/fr/web/api/element/getattributenames/index.md delete mode 100644 files/fr/web/api/element/getattributenode/index.html create mode 100644 files/fr/web/api/element/getattributenode/index.md delete mode 100644 files/fr/web/api/element/getattributenodens/index.html create mode 100644 files/fr/web/api/element/getattributenodens/index.md delete mode 100644 files/fr/web/api/element/getattributens/index.html create mode 100644 files/fr/web/api/element/getattributens/index.md delete mode 100644 files/fr/web/api/element/getboundingclientrect/index.html create mode 100644 files/fr/web/api/element/getboundingclientrect/index.md delete mode 100644 files/fr/web/api/element/getelementsbyclassname/index.html create mode 100644 files/fr/web/api/element/getelementsbyclassname/index.md delete mode 100644 files/fr/web/api/element/getelementsbytagname/index.html create mode 100644 files/fr/web/api/element/getelementsbytagname/index.md delete mode 100644 files/fr/web/api/element/getelementsbytagnamens/index.html create mode 100644 files/fr/web/api/element/getelementsbytagnamens/index.md delete mode 100644 files/fr/web/api/element/hasattribute/index.html create mode 100644 files/fr/web/api/element/hasattribute/index.md delete mode 100644 files/fr/web/api/element/hasattributens/index.html create mode 100644 files/fr/web/api/element/hasattributens/index.md delete mode 100644 files/fr/web/api/element/hasattributes/index.html create mode 100644 files/fr/web/api/element/hasattributes/index.md delete mode 100644 files/fr/web/api/element/id/index.html create mode 100644 files/fr/web/api/element/id/index.md delete mode 100644 files/fr/web/api/element/index.html create mode 100644 files/fr/web/api/element/index.md delete mode 100644 files/fr/web/api/element/innerhtml/index.html create mode 100644 files/fr/web/api/element/innerhtml/index.md delete mode 100644 files/fr/web/api/element/insertadjacentelement/index.html create mode 100644 files/fr/web/api/element/insertadjacentelement/index.md delete mode 100644 files/fr/web/api/element/insertadjacenthtml/index.html create mode 100644 files/fr/web/api/element/insertadjacenthtml/index.md delete mode 100644 files/fr/web/api/element/insertadjacenttext/index.html create mode 100644 files/fr/web/api/element/insertadjacenttext/index.md delete mode 100644 files/fr/web/api/element/localname/index.html create mode 100644 files/fr/web/api/element/localname/index.md delete mode 100644 files/fr/web/api/element/matches/index.html create mode 100644 files/fr/web/api/element/matches/index.md delete mode 100644 files/fr/web/api/element/mousedown_event/index.html create mode 100644 files/fr/web/api/element/mousedown_event/index.md delete mode 100644 files/fr/web/api/element/mouseenter_event/index.html create mode 100644 files/fr/web/api/element/mouseenter_event/index.md delete mode 100644 files/fr/web/api/element/mouseleave_event/index.html create mode 100644 files/fr/web/api/element/mouseleave_event/index.md delete mode 100644 files/fr/web/api/element/mousemove_event/index.html create mode 100644 files/fr/web/api/element/mousemove_event/index.md delete mode 100644 files/fr/web/api/element/mouseout_event/index.html create mode 100644 files/fr/web/api/element/mouseout_event/index.md delete mode 100644 files/fr/web/api/element/mouseover_event/index.html create mode 100644 files/fr/web/api/element/mouseover_event/index.md delete mode 100644 files/fr/web/api/element/mouseup_event/index.html create mode 100644 files/fr/web/api/element/mouseup_event/index.md delete mode 100644 files/fr/web/api/element/namespaceuri/index.html create mode 100644 files/fr/web/api/element/namespaceuri/index.md delete mode 100644 files/fr/web/api/element/outerhtml/index.html create mode 100644 files/fr/web/api/element/outerhtml/index.md delete mode 100644 files/fr/web/api/element/prefix/index.html create mode 100644 files/fr/web/api/element/prefix/index.md delete mode 100644 files/fr/web/api/element/queryselector/index.html create mode 100644 files/fr/web/api/element/queryselector/index.md delete mode 100644 files/fr/web/api/element/queryselectorall/index.html create mode 100644 files/fr/web/api/element/queryselectorall/index.md delete mode 100644 files/fr/web/api/element/releasepointercapture/index.html create mode 100644 files/fr/web/api/element/releasepointercapture/index.md delete mode 100644 files/fr/web/api/element/removeattribute/index.html create mode 100644 files/fr/web/api/element/removeattribute/index.md delete mode 100644 files/fr/web/api/element/removeattributenode/index.html create mode 100644 files/fr/web/api/element/removeattributenode/index.md delete mode 100644 files/fr/web/api/element/removeattributens/index.html create mode 100644 files/fr/web/api/element/removeattributens/index.md delete mode 100644 files/fr/web/api/element/requestfullscreen/index.html create mode 100644 files/fr/web/api/element/requestfullscreen/index.md delete mode 100644 files/fr/web/api/element/scrollheight/index.html create mode 100644 files/fr/web/api/element/scrollheight/index.md delete mode 100644 files/fr/web/api/element/scrollintoview/index.html create mode 100644 files/fr/web/api/element/scrollintoview/index.md delete mode 100644 files/fr/web/api/element/scrollintoviewifneeded/index.html create mode 100644 files/fr/web/api/element/scrollintoviewifneeded/index.md delete mode 100644 files/fr/web/api/element/scrollleft/index.html create mode 100644 files/fr/web/api/element/scrollleft/index.md delete mode 100644 files/fr/web/api/element/scrollleftmax/index.html create mode 100644 files/fr/web/api/element/scrollleftmax/index.md delete mode 100644 files/fr/web/api/element/scrollto/index.html create mode 100644 files/fr/web/api/element/scrollto/index.md delete mode 100644 files/fr/web/api/element/scrolltop/index.html create mode 100644 files/fr/web/api/element/scrolltop/index.md delete mode 100644 files/fr/web/api/element/scrollwidth/index.html create mode 100644 files/fr/web/api/element/scrollwidth/index.md delete mode 100644 files/fr/web/api/element/select_event/index.html create mode 100644 files/fr/web/api/element/select_event/index.md delete mode 100644 files/fr/web/api/element/setattribute/index.html create mode 100644 files/fr/web/api/element/setattribute/index.md delete mode 100644 files/fr/web/api/element/setattributenode/index.html create mode 100644 files/fr/web/api/element/setattributenode/index.md delete mode 100644 files/fr/web/api/element/setattributenodens/index.html create mode 100644 files/fr/web/api/element/setattributenodens/index.md delete mode 100644 files/fr/web/api/element/setattributens/index.html create mode 100644 files/fr/web/api/element/setattributens/index.md delete mode 100644 files/fr/web/api/element/setcapture/index.html create mode 100644 files/fr/web/api/element/setcapture/index.md delete mode 100644 files/fr/web/api/element/setpointercapture/index.html create mode 100644 files/fr/web/api/element/setpointercapture/index.md delete mode 100644 files/fr/web/api/element/tagname/index.html create mode 100644 files/fr/web/api/element/tagname/index.md (limited to 'files/fr/web/api/element') diff --git a/files/fr/web/api/element/animate/index.html b/files/fr/web/api/element/animate/index.html deleted file mode 100644 index acdf64b4b6..0000000000 --- a/files/fr/web/api/element/animate/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Element.animate() -slug: Web/API/Element/animate -tags: - - API -translation_of: Web/API/Element/animate ---- -

{{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.

- -
-

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

- -
element.animate(keyframes, options); 
- -

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.
-
-
-
- -
{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
- -

Options à venir

- -

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

- -
-
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.
    • -
-
-
- -

Valeur de retour

- -

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

- -

Exemple

- -

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.

- -
document.getElementById("tunnel").animate([
-  // keyframes
-  { transform: 'translateY(0px)' },
-  { transform: 'translateY(-300px)' }
-], {
-  // timing options
-  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

- - diff --git a/files/fr/web/api/element/animate/index.md b/files/fr/web/api/element/animate/index.md new file mode 100644 index 0000000000..acdf64b4b6 --- /dev/null +++ b/files/fr/web/api/element/animate/index.md @@ -0,0 +1,106 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +tags: + - API +translation_of: Web/API/Element/animate +--- +

{{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.

+ +
+

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

+ +
element.animate(keyframes, options); 
+ +

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.
+
+
+
+ +
{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
+ +

Options à venir

+ +

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

+ +
+
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.
    • +
+
+
+ +

Valeur de retour

+ +

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

+ +

Exemple

+ +

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.

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  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

+ + diff --git a/files/fr/web/api/element/attachshadow/index.html b/files/fr/web/api/element/attachshadow/index.html deleted file mode 100644 index cde6764b54..0000000000 --- a/files/fr/web/api/element/attachshadow/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -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")}}

diff --git a/files/fr/web/api/element/attachshadow/index.md b/files/fr/web/api/element/attachshadow/index.md new file mode 100644 index 0000000000..cde6764b54 --- /dev/null +++ b/files/fr/web/api/element/attachshadow/index.md @@ -0,0 +1,54 @@ +--- +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")}}

diff --git a/files/fr/web/api/element/attributes/index.html b/files/fr/web/api/element/attributes/index.html deleted file mode 100644 index 14c104bcfa..0000000000 --- a/files/fr/web/api/element/attributes/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: element.attributes -slug: Web/API/Element/attributes -tags: - - API - - DOM - - Element - - Propriété - - Reference -translation_of: Web/API/Element/attributes ---- -

{{ 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.

- -

Syntaxe

- -
var attr = element.attributes;
-
- -

Exemple

- -

Exemples basiques

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

É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.

- -
<!DOCTYPE html>
-
-<html>
-
- <head>
-  <title>Exemple d'attributs</title>
-  <script type="text/javascript">
-   function listAttributes() {
-     var paragraph = document.getElementById("paragraph");
-     var result = document.getElementById("result");
-
-     // D'abord, vérifier que le "paragraph" a quelques attributs    
-     if (paragraph.hasAttributes()) {
-       var attrs = paragraph.attributes;
-       var output = "";
-       for(var i = attrs.length - 1; i >= 0; i--) {
-         output += attrs[i].name + "->" + attrs[i].value;
-       }
-       result.value = output;
-     } else {
-       result.value = "No attributes to show";
-     }
-   }
-  </script>
- </head>
-
-<body>
- <p id="paragraph" >Sample Paragraph</p>
- <form action="">
-  <p>
-    <input type="button" value="Show first attribute name and value"
-      onclick="listAttributes();">
-    <input id="result" type="text" value="">
-  </p>
- </form>
-</body>
-</html>
- -

 

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatusComment
{{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

- - diff --git a/files/fr/web/api/element/attributes/index.md b/files/fr/web/api/element/attributes/index.md new file mode 100644 index 0000000000..14c104bcfa --- /dev/null +++ b/files/fr/web/api/element/attributes/index.md @@ -0,0 +1,116 @@ +--- +title: element.attributes +slug: Web/API/Element/attributes +tags: + - API + - DOM + - Element + - Propriété + - Reference +translation_of: Web/API/Element/attributes +--- +

{{ 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.

+ +

Syntaxe

+ +
var attr = element.attributes;
+
+ +

Exemple

+ +

Exemples basiques

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

É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.

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+  <title>Exemple d'attributs</title>
+  <script type="text/javascript">
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // D'abord, vérifier que le "paragraph" a quelques attributs    
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" >Sample Paragraph</p>
+ <form action="">
+  <p>
+    <input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+ +

 

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusComment
{{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

+ + diff --git a/files/fr/web/api/element/childelementcount/index.html b/files/fr/web/api/element/childelementcount/index.html deleted file mode 100644 index a23de9fbaa..0000000000 --- a/files/fr/web/api/element/childelementcount/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: ParentNode.childElementCount -slug: Web/API/Element/childElementCount -tags: - - API - - DOM - - Noeuds - - Propriétés - - Reference - - parent -translation_of: Web/API/ParentNode/childElementCount -original_slug: Web/API/ParentNode/childElementCount ---- -
-

{{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é.

- -
-

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

- -
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.
-
- -

Exemple

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

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.

- -
;(function(constructor) {
-    if (constructor &&
-        constructor.prototype &&
-        constructor.prototype.childElementCount == null) {
-        Object.defineProperty(constructor.prototype, 'childElementCount', {
-            get: function() {
-                var i = 0, count = 0, node, nodes = this.childNodes;
-                while (node = nodes[i++]) {
-                    if (node.nodeType === 1) count++;
-                }
-                return count;
-            }
-        });
-    }
-})(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

- - diff --git a/files/fr/web/api/element/childelementcount/index.md b/files/fr/web/api/element/childelementcount/index.md new file mode 100644 index 0000000000..a23de9fbaa --- /dev/null +++ b/files/fr/web/api/element/childelementcount/index.md @@ -0,0 +1,97 @@ +--- +title: ParentNode.childElementCount +slug: Web/API/Element/childElementCount +tags: + - API + - DOM + - Noeuds + - Propriétés + - Reference + - parent +translation_of: Web/API/ParentNode/childElementCount +original_slug: Web/API/ParentNode/childElementCount +--- +
+

{{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é.

+ +
+

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

+ +
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.
+
+ +

Exemple

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

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.

+ +
;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.childElementCount == null) {
+        Object.defineProperty(constructor.prototype, 'childElementCount', {
+            get: function() {
+                var i = 0, count = 0, node, nodes = this.childNodes;
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) count++;
+                }
+                return count;
+            }
+        });
+    }
+})(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

+ + diff --git a/files/fr/web/api/element/classlist/index.html b/files/fr/web/api/element/classlist/index.html deleted file mode 100644 index 62a8048b85..0000000000 --- a/files/fr/web/api/element/classlist/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: element.classList -slug: Web/API/Element/classList -tags: - - API - - Classe - - DOM - - Element - - Liste - - Propriétés -translation_of: Web/API/Element/classList ---- -
{{APIRef("DOM")}}
- -

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.

- -

Syntaxe

- -
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().

- -

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.
-
- -

Exemples

- -
const div = document.createElement('div');
-div.className = 'foo';
-
-// notre point de départ: <div class="foo"></div>
-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 );
-
-console.log(div.classList.contains("foo"));
-
-// ajouter ou supprimer plusieurs classes
-div.classList.add("foo", "bar", "baz");
-div.classList.remove("foo", "bar", "baz");
-
-// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation
-const cls = ["foo", "bar"];
-div.classList.add(...cls);
-div.classList.remove(...cls);
-
-// remplacer la classe "foo" par la classe "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

-
- -

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é.

- -

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
-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;
-var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
-  if (V === "") throw new DOMException(
-    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
-  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
-    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
-}
-// 2. Implement the barebones DOMTokenList livelyness polyfill
-if (typeof DOMTokenList !== "function") (function(window){
-    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
-    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
-    function DOMTokenList(){
-        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
-    }
-    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
-    DOMTokenList.prototype.add = function(){
-        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
-            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
-            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
-                if (this[i] === val) continue a; else resStr += " " + this[i];
-            this[Len] = val, proto.length += 1, proto.value = resStr;
-        }
-        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
-    };
-    DOMTokenList.prototype.remove = function(){
-        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
-            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
-            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
-                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
-            if (!is) continue;
-            delete this[Len], proto.length -= 1, proto.value = resStr;
-        }
-        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
-    };
-    window.DOMTokenList = DOMTokenList;
-    function whenPropChanges(){
-        var evt = window.event, prop = evt.propertyName;
-        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;
-            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
-                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
-            if(prop !== "classList") return;
-            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
-            skipPropChange = 0, resTokenList.length = tokens.length - sub;
-        }
-    }
-    function polyfillClassList(ele){
-        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
-        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
-        allowTokenListConstruction = 1;
-        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
-        finally { allowTokenListConstruction = 0 }
-        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
-        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
-            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
-            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
-            enumerable:   1, get: function(){return resTokenList},
-            configurable: 0, set: function(newVal){
-                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
-                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
-                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
-                    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
-            }
-        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
-            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
-        }); defineProperty(protoObjProto, " uCL", {
-            enumerable: 0, configurable: 0, writeable: 0, value: ele
-        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
-        ele.attachEvent( "onpropertychange", whenPropChanges );
-    }
-    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){
-                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
-                                 return this.classList;
-                             },
-            configurable: 0, set: function(val){this.className = val}
-        });
-    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
-        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
-        );
-    }
-})(window);
-// 3. Patch in unsupported methods in DOMTokenList
-(function(DOMTokenListProto, testClass){
-    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
-        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]);
-        var oldValue = this.value;
-        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));
-        };
-    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
-        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
-        return false;
-    };
-    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
-        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
-        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
-    };
-    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};
-        }};
-    };
-    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
-        var nextIndex = 0, that = this;
-        return {next: function() {
-            return nextIndex<that.length ? {value: that[nextIndex++], done: false} : {done: true};
-        }};
-    };
-    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
-        var nextIndex = 0, that = this;
-        return {next: function() {
-            return nextIndex<that.length ? {value: nextIndex++, done: false} : {done: true};
-        }};
-    };
-})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
-})(window);
-
- -

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

- - diff --git a/files/fr/web/api/element/classlist/index.md b/files/fr/web/api/element/classlist/index.md new file mode 100644 index 0000000000..62a8048b85 --- /dev/null +++ b/files/fr/web/api/element/classlist/index.md @@ -0,0 +1,284 @@ +--- +title: element.classList +slug: Web/API/Element/classList +tags: + - API + - Classe + - DOM + - Element + - Liste + - Propriétés +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

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.

+ +

Syntaxe

+ +
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().

+ +

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.
+
+ +

Exemples

+ +
const div = document.createElement('div');
+div.className = 'foo';
+
+// notre point de départ: <div class="foo"></div>
+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 );
+
+console.log(div.classList.contains("foo"));
+
+// ajouter ou supprimer plusieurs classes
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// remplacer la classe "foo" par la classe "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

+
+ +

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é.

+ +

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
+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;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        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;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                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
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            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
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    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
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    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){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        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
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        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]);
+        var oldValue = this.value;
+        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));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    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};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: that[nextIndex++], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: nextIndex++, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+
+ +

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

+ + diff --git a/files/fr/web/api/element/classname/index.html b/files/fr/web/api/element/classname/index.html deleted file mode 100644 index 125374a9db..0000000000 --- a/files/fr/web/api/element/classname/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: element.className -slug: Web/API/Element/className -tags: - - API - - Classe - - DOM - - Element - - Propriétés -translation_of: Web/API/Element/className ---- -

{{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é.

- -

Syntaxe

- -
var cName = elementNodeReference.className;
-elementNodeReference.className = cName;
- - - -

Exemple

- -
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

- - diff --git a/files/fr/web/api/element/classname/index.md b/files/fr/web/api/element/classname/index.md new file mode 100644 index 0000000000..125374a9db --- /dev/null +++ b/files/fr/web/api/element/classname/index.md @@ -0,0 +1,79 @@ +--- +title: element.className +slug: Web/API/Element/className +tags: + - API + - Classe + - DOM + - Element + - Propriétés +translation_of: Web/API/Element/className +--- +

{{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é.

+ +

Syntaxe

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Exemple

+ +
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

+ + diff --git a/files/fr/web/api/element/click_event/index.html b/files/fr/web/api/element/click_event/index.html deleted file mode 100644 index 8e18c242d9..0000000000 --- a/files/fr/web/api/element/click_event/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: 'Element : évènement click' -slug: Web/API/Element/click_event -tags: - - API - - DOM - - Element - - Reference - - click -translation_of: Web/API/Element/click_event ---- -
{{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.

- - - - - - - - - - - - - - - - - - - - -
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.

- -

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

- -

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é).

- -

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.

- -

Quelques méthodes de contournement pour ce bug :

- - - -

Safari Mobile

- -

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.

- -

Méthodes de contournement connues :

- - - -

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

- - - -

Exemples

- -

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

- -

HTML

- -
<button>Cliquer ici</button>
- -

JavaScript

- -
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')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/click_event/index.md b/files/fr/web/api/element/click_event/index.md new file mode 100644 index 0000000000..8e18c242d9 --- /dev/null +++ b/files/fr/web/api/element/click_event/index.md @@ -0,0 +1,153 @@ +--- +title: 'Element : évènement click' +slug: Web/API/Element/click_event +tags: + - API + - DOM + - Element + - Reference + - click +translation_of: Web/API/Element/click_event +--- +
{{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.

+ + + + + + + + + + + + + + + + + + + + +
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.

+ +

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

+ +

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é).

+ +

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.

+ +

Quelques méthodes de contournement pour ce bug :

+ + + +

Safari Mobile

+ +

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.

+ +

Méthodes de contournement connues :

+ + + +

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

+ + + +

Exemples

+ +

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

+ +

HTML

+ +
<button>Cliquer ici</button>
+ +

JavaScript

+ +
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')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/clientheight/index.html b/files/fr/web/api/element/clientheight/index.html deleted file mode 100644 index 3e88e1a801..0000000000 --- a/files/fr/web/api/element/clientheight/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Element.clientHeight -slug: Web/API/Element/clientHeight -translation_of: Web/API/Element/clientHeight -browser-compat: api.Element.clientHeight ---- -
{{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.

- -

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.

- -
-

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

-
- -

Syntaxe

- -
-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.

- -

Exemples

- -

- -

Spécifications

- -

{{Specifications}}

- -

Notes

- -

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

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/clientheight/index.md b/files/fr/web/api/element/clientheight/index.md new file mode 100644 index 0000000000..3e88e1a801 --- /dev/null +++ b/files/fr/web/api/element/clientheight/index.md @@ -0,0 +1,49 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +translation_of: Web/API/Element/clientHeight +browser-compat: api.Element.clientHeight +--- +
{{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.

+ +

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.

+ +
+

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

+
+ +

Syntaxe

+ +
+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.

+ +

Exemples

+ +

+ +

Spécifications

+ +

{{Specifications}}

+ +

Notes

+ +

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

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/clientleft/index.html b/files/fr/web/api/element/clientleft/index.html deleted file mode 100644 index 72f3d71689..0000000000 --- a/files/fr/web/api/element/clientleft/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Element.clientLeft -slug: Web/API/Element/clientLeft -translation_of: Web/API/Element/clientLeft -browser-compat: api.Element.clientLeft ---- -
{{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.

- -

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.

- -
-

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 : Lorsqu'un élément se voit appliquer display: inline, clientLeft renvoie 0, quelle que soit la bordure de l'élément.

-
- -

Syntaxe

- -
-var left = element.clientLeft;
-
- -

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.

- -

HTML

- -
-<div id="container">
-  <div id="contained">
-    <p>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>
-
- -

CSS

- -
-
-#container {
-	margin: 3rem;
-	background-color: rgb(255, 255, 204);
-	border: 4px dashed black;
-}
-
-#contained {
-	margin: 1rem;
-	border-left: 24px black solid;
-	padding: 0px 28px;
-	overflow: auto;
-	background-color: white;
-}
-
- -

Résultat

- -{{EmbedLiveSample("Exemple", 400, 350)}} - -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Notes

- -

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.

- -

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.

diff --git a/files/fr/web/api/element/clientleft/index.md b/files/fr/web/api/element/clientleft/index.md new file mode 100644 index 0000000000..72f3d71689 --- /dev/null +++ b/files/fr/web/api/element/clientleft/index.md @@ -0,0 +1,80 @@ +--- +title: Element.clientLeft +slug: Web/API/Element/clientLeft +translation_of: Web/API/Element/clientLeft +browser-compat: api.Element.clientLeft +--- +
{{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.

+ +

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.

+ +
+

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 : Lorsqu'un élément se voit appliquer display: inline, clientLeft renvoie 0, quelle que soit la bordure de l'élément.

+
+ +

Syntaxe

+ +
+var left = element.clientLeft;
+
+ +

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.

+ +

HTML

+ +
+<div id="container">
+  <div id="contained">
+    <p>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>
+
+ +

CSS

+ +
+
+#container {
+	margin: 3rem;
+	background-color: rgb(255, 255, 204);
+	border: 4px dashed black;
+}
+
+#contained {
+	margin: 1rem;
+	border-left: 24px black solid;
+	padding: 0px 28px;
+	overflow: auto;
+	background-color: white;
+}
+
+ +

Résultat

+ +{{EmbedLiveSample("Exemple", 400, 350)}} + +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Notes

+ +

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.

+ +

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.

diff --git a/files/fr/web/api/element/clientwidth/index.html b/files/fr/web/api/element/clientwidth/index.html deleted file mode 100644 index 9a3bd1012c..0000000000 --- a/files/fr/web/api/element/clientwidth/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: element.clientWidth -slug: Web/API/Element/clientWidth -tags: - - API - - CSSOM View - - Propriété - - Reference -translation_of: Web/API/Element/clientWidth ---- -
{{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.

- -

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.

- -
-

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

- -
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.

- -

Exemple

- -

- -

Spécifications

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

Notes

- -

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

- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/clientwidth/index.md b/files/fr/web/api/element/clientwidth/index.md new file mode 100644 index 0000000000..9a3bd1012c --- /dev/null +++ b/files/fr/web/api/element/clientwidth/index.md @@ -0,0 +1,66 @@ +--- +title: element.clientWidth +slug: Web/API/Element/clientWidth +tags: + - API + - CSSOM View + - Propriété + - Reference +translation_of: Web/API/Element/clientWidth +--- +
{{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.

+ +

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.

+ +
+

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

+ +
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.

+ +

Exemple

+ +

+ +

Spécifications

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

Notes

+ +

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

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/closest/index.html b/files/fr/web/api/element/closest/index.html deleted file mode 100644 index 61a0e9f93f..0000000000 --- a/files/fr/web/api/element/closest/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Element.closest() -slug: Web/API/Element/closest -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/closest ---- -

{{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.

- -

Syntaxe

- -
var elt = element.closest(selecteurs);
-
- -

Paramètres

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

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.

- -

Exceptions

- - - -

Exemples

- -

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>
- -

JavaScript

- -
var el = document.getElementById('div-03');
-
-var r1 = el.closest("#div-02");
-// Renvoie l'élément avec l'identifiant id=div-02
-
-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");
-// 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.
- -

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 :

- -
if (!Element.prototype.matches)
-    Element.prototype.matches = Element.prototype.msMatchesSelector ||
-                                Element.prototype.webkitMatchesSelector;
-
-if (!Element.prototype.closest)
-    Element.prototype.closest = function(s) {
-        var el = this;
-        if (!document.documentElement.contains(el)) return null;
-        do {
-            if (el.matches(s)) return el;
-            el = el.parentElement || el.parentNode;
-        } 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 :

- -
if (window.Element && !Element.prototype.closest) {
-  Element.prototype.closest =
-  function(s) {
-    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-        i,
-        el = this;
-    do {
-      i = matches.length;
-      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é

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/element/closest/index.md b/files/fr/web/api/element/closest/index.md new file mode 100644 index 0000000000..61a0e9f93f --- /dev/null +++ b/files/fr/web/api/element/closest/index.md @@ -0,0 +1,138 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/closest +--- +

{{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.

+ +

Syntaxe

+ +
var elt = element.closest(selecteurs);
+
+ +

Paramètres

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

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.

+ +

Exceptions

+ + + +

Exemples

+ +

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>
+ +

JavaScript

+ +
var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// Renvoie l'élément avec l'identifiant id=div-02
+
+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");
+// 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.
+ +

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 :

+ +
if (!Element.prototype.matches)
+    Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                                Element.prototype.webkitMatchesSelector;
+
+if (!Element.prototype.closest)
+    Element.prototype.closest = function(s) {
+        var el = this;
+        if (!document.documentElement.contains(el)) return null;
+        do {
+            if (el.matches(s)) return el;
+            el = el.parentElement || el.parentNode;
+        } 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 :

+ +
if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      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é

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/element/compositionend_event/index.html b/files/fr/web/api/element/compositionend_event/index.html deleted file mode 100644 index 546f6b3c5f..0000000000 --- a/files/fr/web/api/element/compositionend_event/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: compositionend -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).

- -

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.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("CompositionEvent")}}
Propriété pour la gestion d'évènementAucune
- -

Exemple

- -

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>
-
-<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

- -
const inputElement = document.querySelector('input[type="text"]');
-const log = document.querySelector('.event-log-contents');
-const clearLog = document.querySelector('.clear-log');
-
-clearLog.addEventListener('click', () => {
-    log.textContent = '';
-});
-
-function handleEvent(event) {
-    log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
-}
-
-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')}}
- -

Compatibilités navigateurs

- -

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

- -

Evénements liés

- - diff --git a/files/fr/web/api/element/compositionend_event/index.md b/files/fr/web/api/element/compositionend_event/index.md new file mode 100644 index 0000000000..546f6b3c5f --- /dev/null +++ b/files/fr/web/api/element/compositionend_event/index.md @@ -0,0 +1,128 @@ +--- +title: compositionend +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).

+ +

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.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("CompositionEvent")}}
Propriété pour la gestion d'évènementAucune
+ +

Exemple

+ +

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>
+
+<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

+ +
const inputElement = document.querySelector('input[type="text"]');
+const log = document.querySelector('.event-log-contents');
+const clearLog = document.querySelector('.clear-log');
+
+clearLog.addEventListener('click', () => {
+    log.textContent = '';
+});
+
+function handleEvent(event) {
+    log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
+}
+
+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')}}
+ +

Compatibilités navigateurs

+ +

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

+ +

Evénements liés

+ + diff --git a/files/fr/web/api/element/compositionstart_event/index.html b/files/fr/web/api/element/compositionstart_event/index.html deleted file mode 100644 index 4de27018bc..0000000000 --- a/files/fr/web/api/element/compositionstart_event/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: compositionstart -slug: Web/API/Element/compositionstart_event -tags: - - Element - - Event - - Input method - - Reference - - compositionstart -translation_of: Web/API/Element/compositionstart_event -original_slug: Web/Events/compositionstart ---- -
{{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.

- -

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.

- - - - - - - - - - - - - - - - - - - - -
PropagationOui
AnnulableOui
Interface{{domxref("CompositionEvent")}}
Propriété du gestionnaire d'événementsAucune
- -

Exemples

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

Exemple concret

- -

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>
-
-<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

- -
const inputElement = document.querySelector('input[type="text"]');
-const log = document.querySelector('.event-log-contents');
-const clearLog = document.querySelector('.clear-log');
-
-clearLog.addEventListener('click', () => {
-  log.textContent = '';
-});
-
-function handleEvent(event) {
-  log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
-}
-
-inputElement.addEventListener('compositionstart', handleEvent);
-inputElement.addEventListener('compositionupdate', handleEvent);
-inputElement.addEventListener('compositionend', handleEvent);
-
- -

Résultat

- -

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

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('UI Events', '#event-type-compositionstart')}}{{Spec2('UI Events')}}
- -

Compatibilités navigateur

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/compositionstart_event/index.md b/files/fr/web/api/element/compositionstart_event/index.md new file mode 100644 index 0000000000..4de27018bc --- /dev/null +++ b/files/fr/web/api/element/compositionstart_event/index.md @@ -0,0 +1,144 @@ +--- +title: compositionstart +slug: Web/API/Element/compositionstart_event +tags: + - Element + - Event + - Input method + - Reference + - compositionstart +translation_of: Web/API/Element/compositionstart_event +original_slug: Web/Events/compositionstart +--- +
{{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.

+ +

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.

+ + + + + + + + + + + + + + + + + + + + +
PropagationOui
AnnulableOui
Interface{{domxref("CompositionEvent")}}
Propriété du gestionnaire d'événementsAucune
+ +

Exemples

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

Exemple concret

+ +

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>
+
+<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

+ +
const inputElement = document.querySelector('input[type="text"]');
+const log = document.querySelector('.event-log-contents');
+const clearLog = document.querySelector('.clear-log');
+
+clearLog.addEventListener('click', () => {
+  log.textContent = '';
+});
+
+function handleEvent(event) {
+  log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
+}
+
+inputElement.addEventListener('compositionstart', handleEvent);
+inputElement.addEventListener('compositionupdate', handleEvent);
+inputElement.addEventListener('compositionend', handleEvent);
+
+ +

Résultat

+ +

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

+ +

Spécifications

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

Compatibilités navigateur

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/compositionupdate_event/index.html b/files/fr/web/api/element/compositionupdate_event/index.html deleted file mode 100644 index f0ae9bc134..0000000000 --- a/files/fr/web/api/element/compositionupdate_event/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: compositionupdate -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).

- -

Informations générales

- -
-
Interface
-
{{domxref("TouchEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
{{domxref("Element")}}
-
- -

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.
- -

Compatibilités navigateur

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/compositionupdate_event/index.md b/files/fr/web/api/element/compositionupdate_event/index.md new file mode 100644 index 0000000000..f0ae9bc134 --- /dev/null +++ b/files/fr/web/api/element/compositionupdate_event/index.md @@ -0,0 +1,86 @@ +--- +title: compositionupdate +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).

+ +

Informations générales

+ +
+
Interface
+
{{domxref("TouchEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Element")}}
+
+ +

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.
+ +

Compatibilités navigateur

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/contextmenu_event/index.html b/files/fr/web/api/element/contextmenu_event/index.html deleted file mode 100644 index 28b416e62e..0000000000 --- a/files/fr/web/api/element/contextmenu_event/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 'Element : évènement contextmenu' -slug: Web/API/Element/contextmenu_event -tags: - - API - - DOM - - Element - - Event - - Reference - - contextemenu -translation_of: Web/API/Element/contextmenu_event ---- -
{{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.

- -

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.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{DOMxRef("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}
- -

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.

- -

HTML

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

JavaScript

- -
noContext = document.getElementById('noContextMenu');
-
-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')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/contextmenu_event/index.md b/files/fr/web/api/element/contextmenu_event/index.md new file mode 100644 index 0000000000..28b416e62e --- /dev/null +++ b/files/fr/web/api/element/contextmenu_event/index.md @@ -0,0 +1,104 @@ +--- +title: 'Element : évènement contextmenu' +slug: Web/API/Element/contextmenu_event +tags: + - API + - DOM + - Element + - Event + - Reference + - contextemenu +translation_of: Web/API/Element/contextmenu_event +--- +
{{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.

+ +

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.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{DOMxRef("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}
+ +

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.

+ +

HTML

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

JavaScript

+ +
noContext = document.getElementById('noContextMenu');
+
+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')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/copy_event/index.html b/files/fr/web/api/element/copy_event/index.html deleted file mode 100644 index d4b370823a..0000000000 --- a/files/fr/web/api/element/copy_event/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: copy -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é.

- -

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
-
- -

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){
-    e.clipboardData.setData('text/plain', 'Hello, world!');
-    e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
-    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()")}}.

- -

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

- - - -

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.
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('Clipboard API', '#clipboard-event-copy')}}{{Spec2('Clipboard API')}}
- -

Compatibilités navigateur

- -

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

- -

Voir aussi

- - - \ No newline at end of file diff --git a/files/fr/web/api/element/copy_event/index.md b/files/fr/web/api/element/copy_event/index.md new file mode 100644 index 0000000000..d4b370823a --- /dev/null +++ b/files/fr/web/api/element/copy_event/index.md @@ -0,0 +1,107 @@ +--- +title: copy +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é.

+ +

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
+
+ +

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){
+    e.clipboardData.setData('text/plain', 'Hello, world!');
+    e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
+    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()")}}.

+ +

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

+ + + +

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.
+ +

Spécifications

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

Compatibilités navigateur

+ +

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

+ +

Voir aussi

+ + + \ No newline at end of file diff --git a/files/fr/web/api/element/dblclick_event/index.html b/files/fr/web/api/element/dblclick_event/index.html deleted file mode 100644 index 9f82b49bd9..0000000000 --- a/files/fr/web/api/element/dblclick_event/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: 'Element : évènement dblclick' -slug: Web/API/Element/dblclick_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - dblclick -translation_of: Web/API/Element/dblclick_event ---- -
{{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).

- -

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")}}
- -

Exemples

- -

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

- -

JavaScript

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

HTML

- -
<aside>
-  <h3>Une tuile</h3>
-  <p>Double-cliquer pour redimensionner cet objet.</p>
-</aside>
- -

CSS

- -
aside {
-  background: #fe9;
-  border-radius: 1em;
-  display: inline-block;
-  padding: 1em;
-  transform: scale(.9);
-  transform-origin: 0 0;
-  transition: transform .6s;
-}
-
-.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')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/dblclick_event/index.md b/files/fr/web/api/element/dblclick_event/index.md new file mode 100644 index 0000000000..9f82b49bd9 --- /dev/null +++ b/files/fr/web/api/element/dblclick_event/index.md @@ -0,0 +1,119 @@ +--- +title: 'Element : évènement dblclick' +slug: Web/API/Element/dblclick_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - dblclick +translation_of: Web/API/Element/dblclick_event +--- +
{{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).

+ +

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")}}
+ +

Exemples

+ +

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

+ +

JavaScript

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

HTML

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

CSS

+ +
aside {
+  background: #fe9;
+  border-radius: 1em;
+  display: inline-block;
+  padding: 1em;
+  transform: scale(.9);
+  transform-origin: 0 0;
+  transition: transform .6s;
+}
+
+.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')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/error_event/index.html b/files/fr/web/api/element/error_event/index.html deleted file mode 100644 index 8c17b86401..0000000000 --- a/files/fr/web/api/element/error_event/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: error -slug: Web/API/Element/error_event -tags: - - DOM - - Erreurs - - Gestionnaire d'erreurs - - Interface - - évènements -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")}}
-
diff --git a/files/fr/web/api/element/error_event/index.md b/files/fr/web/api/element/error_event/index.md new file mode 100644 index 0000000000..8c17b86401 --- /dev/null +++ b/files/fr/web/api/element/error_event/index.md @@ -0,0 +1,91 @@ +--- +title: error +slug: Web/API/Element/error_event +tags: + - DOM + - Erreurs + - Gestionnaire d'erreurs + - Interface + - évènements +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")}}
+
diff --git a/files/fr/web/api/element/focusin_event/index.html b/files/fr/web/api/element/focusin_event/index.html deleted file mode 100644 index 4930d87a2e..0000000000 --- a/files/fr/web/api/element/focusin_event/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: focusin -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

- - diff --git a/files/fr/web/api/element/focusin_event/index.md b/files/fr/web/api/element/focusin_event/index.md new file mode 100644 index 0000000000..4930d87a2e --- /dev/null +++ b/files/fr/web/api/element/focusin_event/index.md @@ -0,0 +1,76 @@ +--- +title: focusin +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

+ + diff --git a/files/fr/web/api/element/focusout_event/index.html b/files/fr/web/api/element/focusout_event/index.html deleted file mode 100644 index 382060c404..0000000000 --- a/files/fr/web/api/element/focusout_event/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: focusout -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

- - diff --git a/files/fr/web/api/element/focusout_event/index.md b/files/fr/web/api/element/focusout_event/index.md new file mode 100644 index 0000000000..382060c404 --- /dev/null +++ b/files/fr/web/api/element/focusout_event/index.md @@ -0,0 +1,76 @@ +--- +title: focusout +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

+ + diff --git a/files/fr/web/api/element/getattribute/index.html b/files/fr/web/api/element/getattribute/index.html deleted file mode 100644 index e0aa50f459..0000000000 --- a/files/fr/web/api/element/getattribute/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: element.getAttribute -slug: Web/API/Element/getAttribute -tags: - - API - - DOM - - Element - - Method - - Méthode - - Reference -translation_of: Web/API/Element/getAttribute ---- -

{{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.

- -

Syntaxe

- -
let attribut = element.getAttribute(nom_attribut)
-
- -

où

- - - -

Exemple

- -

Soit l'HTML :

- -
const div1 = document.getElementById("div1");
- -

Exemple de JavaScript :

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

Description

- -

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.

- -

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é.

- -

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.

- -
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")}} :

- -
let nonce = script.nonce;
- -

Spécifications

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

Compatibilité des navigateurs

- -
{{Compat("api.Element.getAttribute")}}
diff --git a/files/fr/web/api/element/getattribute/index.md b/files/fr/web/api/element/getattribute/index.md new file mode 100644 index 0000000000..e0aa50f459 --- /dev/null +++ b/files/fr/web/api/element/getattribute/index.md @@ -0,0 +1,85 @@ +--- +title: element.getAttribute +slug: Web/API/Element/getAttribute +tags: + - API + - DOM + - Element + - Method + - Méthode + - Reference +translation_of: Web/API/Element/getAttribute +--- +

{{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.

+ +

Syntaxe

+ +
let attribut = element.getAttribute(nom_attribut)
+
+ +

où

+ + + +

Exemple

+ +

Soit l'HTML :

+ +
const div1 = document.getElementById("div1");
+ +

Exemple de JavaScript :

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

Description

+ +

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.

+ +

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é.

+ +

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.

+ +
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")}} :

+ +
let nonce = script.nonce;
+ +

Spécifications

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

Compatibilité des navigateurs

+ +
{{Compat("api.Element.getAttribute")}}
diff --git a/files/fr/web/api/element/getattributenames/index.html b/files/fr/web/api/element/getattributenames/index.html deleted file mode 100644 index d99f4465fe..0000000000 --- a/files/fr/web/api/element/getattributenames/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Element.getAttributeNames() -slug: Web/API/Element/getAttributeNames -tags: - - API - - Attributs - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/getAttributeNames ---- -

{{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.

- -

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

- -
let attributeNames = element.getAttributeNames();
-
- -

Exemple

- -
// 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

- -
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++) {
-      result[i] = attributes[i].name;
-    }
-    return result;
-  };
-}
- -

Spécifications

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

Compatibilité des navigateurs

- -

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

diff --git a/files/fr/web/api/element/getattributenames/index.md b/files/fr/web/api/element/getattributenames/index.md new file mode 100644 index 0000000000..d99f4465fe --- /dev/null +++ b/files/fr/web/api/element/getattributenames/index.md @@ -0,0 +1,66 @@ +--- +title: Element.getAttributeNames() +slug: Web/API/Element/getAttributeNames +tags: + - API + - Attributs + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/getAttributeNames +--- +

{{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.

+ +

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

+ +
let attributeNames = element.getAttributeNames();
+
+ +

Exemple

+ +
// 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

+ +
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++) {
+      result[i] = attributes[i].name;
+    }
+    return result;
+  };
+}
+ +

Spécifications

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

Compatibilité des navigateurs

+ +

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

diff --git a/files/fr/web/api/element/getattributenode/index.html b/files/fr/web/api/element/getattributenode/index.html deleted file mode 100644 index 3fd3fd508d..0000000000 --- a/files/fr/web/api/element/getattributenode/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: element.getAttributeNode -slug: Web/API/Element/getAttributeNode -tags: - - API - - Attributs - - DOM - - Element - - Méthodes - - Noeud -translation_of: Web/API/Element/getAttributeNode ---- -

{{ APIRef("DOM") }}

- -

Résumé

- -

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

- -

Syntaxe

- -
var attrNode = element.getAttributeNode(attrName);
- - - -

Exemple

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

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.

- -

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.

- -

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

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - \ No newline at end of file diff --git a/files/fr/web/api/element/getattributenode/index.md b/files/fr/web/api/element/getattributenode/index.md new file mode 100644 index 0000000000..3fd3fd508d --- /dev/null +++ b/files/fr/web/api/element/getattributenode/index.md @@ -0,0 +1,51 @@ +--- +title: element.getAttributeNode +slug: Web/API/Element/getAttributeNode +tags: + - API + - Attributs + - DOM + - Element + - Méthodes + - Noeud +translation_of: Web/API/Element/getAttributeNode +--- +

{{ APIRef("DOM") }}

+ +

Résumé

+ +

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

+ +

Syntaxe

+ +
var attrNode = element.getAttributeNode(attrName);
+ + + +

Exemple

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

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.

+ +

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.

+ +

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

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + \ No newline at end of file diff --git a/files/fr/web/api/element/getattributenodens/index.html b/files/fr/web/api/element/getattributenodens/index.html deleted file mode 100644 index a9a9a56f60..0000000000 --- a/files/fr/web/api/element/getattributenodens/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: element.getAttributeNodeNS -slug: Web/API/Element/getAttributeNodeNS -translation_of: Web/API/Element/getAttributeNodeNS ---- -

{{ ApiRef() }}

- -

Résumé

- -

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

- -

Syntaxe

- -
attributeNode = element.getAttributeNodeNS(namespace,nodeName)
-
- -

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.
-
- -

== 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"

- -

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") }}.

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - \ No newline at end of file diff --git a/files/fr/web/api/element/getattributenodens/index.md b/files/fr/web/api/element/getattributenodens/index.md new file mode 100644 index 0000000000..a9a9a56f60 --- /dev/null +++ b/files/fr/web/api/element/getattributenodens/index.md @@ -0,0 +1,40 @@ +--- +title: element.getAttributeNodeNS +slug: Web/API/Element/getAttributeNodeNS +translation_of: Web/API/Element/getAttributeNodeNS +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

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

+ +

Syntaxe

+ +
attributeNode = element.getAttributeNodeNS(namespace,nodeName)
+
+ +

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.
+
+ +

== 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"

+ +

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") }}.

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + \ No newline at end of file diff --git a/files/fr/web/api/element/getattributens/index.html b/files/fr/web/api/element/getattributens/index.html deleted file mode 100644 index 6a5d33ddb7..0000000000 --- a/files/fr/web/api/element/getattributens/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: element.getAttributeNS -slug: Web/API/Element/getAttributeNS -tags: - - API - - DOM - - Méthode - - Reference -translation_of: Web/API/Element/getAttributeNS ---- -

{{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.

- -

Syntaxe

- -
attrVal =element.getAttributeNS(namespace,name)
-
- -

Paramètres

- -
-
namespace
-
L'espace de noms dans lequel rechercher l'attribut spécifié.
-
name
-
Le nom de l'attribut à chercher.
-
- -

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.

- -
-

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

- -

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">
-
-  <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">
-    var ns = 'http://www.example.com/2014/test';
-    var circle = document.getElementById( 'target' );
-
-    console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' );
-  </script>
-</svg>
-
- -

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>
-
-<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">
-  var ns = 'http://www.example.com/2014/test';
-  var circle = document.getElementById( 'target' );
-  console.log('Attribute value: ' + circle.getAttribute('test:foo'));
-</script>
-
-</body>
-</html>
- -

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ÉtatCommentaire
{{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

- - diff --git a/files/fr/web/api/element/getattributens/index.md b/files/fr/web/api/element/getattributens/index.md new file mode 100644 index 0000000000..6a5d33ddb7 --- /dev/null +++ b/files/fr/web/api/element/getattributens/index.md @@ -0,0 +1,124 @@ +--- +title: element.getAttributeNS +slug: Web/API/Element/getAttributeNS +tags: + - API + - DOM + - Méthode + - Reference +translation_of: Web/API/Element/getAttributeNS +--- +

{{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.

+ +

Syntaxe

+ +
attrVal =element.getAttributeNS(namespace,name)
+
+ +

Paramètres

+ +
+
namespace
+
L'espace de noms dans lequel rechercher l'attribut spécifié.
+
name
+
Le nom de l'attribut à chercher.
+
+ +

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.

+ +
+

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

+ +

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">
+
+  <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">
+    var ns = 'http://www.example.com/2014/test';
+    var circle = document.getElementById( 'target' );
+
+    console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' );
+  </script>
+</svg>
+
+ +

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>
+
+<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">
+  var ns = 'http://www.example.com/2014/test';
+  var circle = document.getElementById( 'target' );
+  console.log('Attribute value: ' + circle.getAttribute('test:foo'));
+</script>
+
+</body>
+</html>
+ +

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ÉtatCommentaire
{{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

+ + diff --git a/files/fr/web/api/element/getboundingclientrect/index.html b/files/fr/web/api/element/getboundingclientrect/index.html deleted file mode 100644 index 7fef648005..0000000000 --- a/files/fr/web/api/element/getboundingclientrect/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Element.getBoundingClientRect() -slug: Web/API/Element/getBoundingClientRect -tags: - - API - - Boundary - - Bounding - - Bounds - - CSSOM View - - Client - - Containing - - DOM - - Element - - Enclosing - - Method - - Méthode - - Minimum - - Rectangle - - Reference - - Smallest - - clientHeight - - getBoundingClientRect - - getClientRects - - offsetHeight - - scrollHeight -translation_of: Web/API/Element/getBoundingClientRect ---- -
{{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.

- -

Syntaxe

- -
objetRect = object.getBoundingClientRect();
- -

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.

- -

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.

- -

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.

- -

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.

- -

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 :

- -
// Pour scrollX
-(((t = document.documentElement) || (t = document.body.parentNode))
-  && 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
-
- -

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.

- -
<div></div>
- -
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) {
-  if(typeof rect[key] !== 'function') {
-    let para = document.createElement('p');
-    para.textContent  = `${ key } : ${ rect[key] }`;
-    document.body.appendChild(para);
-  }
-}
- -

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

- -

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.

- -

Spécifications

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

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.

- -

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.

- -
rect = elt.getBoundingClientRect()
-// The result in emptyObj is {}
-emptyObj = Object.assign({}, rect)
-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.

- -

Compatibilité des navigateurs

- -
{{Compat("api.Element.getBoundingClientRect")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/element/getboundingclientrect/index.md b/files/fr/web/api/element/getboundingclientrect/index.md new file mode 100644 index 0000000000..7fef648005 --- /dev/null +++ b/files/fr/web/api/element/getboundingclientrect/index.md @@ -0,0 +1,139 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Boundary + - Bounding + - Bounds + - CSSOM View + - Client + - Containing + - DOM + - Element + - Enclosing + - Method + - Méthode + - Minimum + - Rectangle + - Reference + - Smallest + - clientHeight + - getBoundingClientRect + - getClientRects + - offsetHeight + - scrollHeight +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{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.

+ +

Syntaxe

+ +
objetRect = object.getBoundingClientRect();
+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

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 :

+ +
// Pour scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && 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
+
+ +

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.

+ +
<div></div>
+ +
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) {
+  if(typeof rect[key] !== 'function') {
+    let para = document.createElement('p');
+    para.textContent  = `${ key } : ${ rect[key] }`;
+    document.body.appendChild(para);
+  }
+}
+ +

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

+ +

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.

+ +

Spécifications

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

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.

+ +

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.

+ +
rect = elt.getBoundingClientRect()
+// The result in emptyObj is {}
+emptyObj = Object.assign({}, rect)
+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.

+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Element.getBoundingClientRect")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/getelementsbyclassname/index.html b/files/fr/web/api/element/getelementsbyclassname/index.html deleted file mode 100644 index 016d94535a..0000000000 --- a/files/fr/web/api/element/getelementsbyclassname/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Element.getElementsByClassName() -slug: Web/API/Element/getElementsByClassName -tags: - - API - - Classes - - Element - - Method - - Reference - - getElementByClassName -translation_of: Web/API/Element/getElementsByClassName ---- -

{{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.

- -

À 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

- -
var elements = element.getElementsByClassName(names);
- - - -

Exemples

- -

Obtient tous les élements ayant une classe test:

- -
element.getElementsByClassName('test');
- -

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

- -
element.getElementsByClassName('red test');
- -

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');
- -

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');
-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")}}

diff --git a/files/fr/web/api/element/getelementsbyclassname/index.md b/files/fr/web/api/element/getelementsbyclassname/index.md new file mode 100644 index 0000000000..016d94535a --- /dev/null +++ b/files/fr/web/api/element/getelementsbyclassname/index.md @@ -0,0 +1,69 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +tags: + - API + - Classes + - Element + - Method + - Reference + - getElementByClassName +translation_of: Web/API/Element/getElementsByClassName +--- +

{{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.

+ +

À 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

+ +
var elements = element.getElementsByClassName(names);
+ + + +

Exemples

+ +

Obtient tous les élements ayant une classe test:

+ +
element.getElementsByClassName('test');
+ +

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

+ +
element.getElementsByClassName('red test');
+ +

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');
+ +

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');
+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")}}

diff --git a/files/fr/web/api/element/getelementsbytagname/index.html b/files/fr/web/api/element/getelementsbytagname/index.html deleted file mode 100644 index 8cbef3215e..0000000000 --- a/files/fr/web/api/element/getelementsbytagname/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: element.getElementsByTagName -slug: Web/API/Element/getElementsByTagName -tags: - - API - - DOM - - Element - - Méthode - - Reference -translation_of: Web/API/Element/getElementsByTagName ---- -

{{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.

- -

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é.

- -

Syntaxe

- -
elements = element.getElementsByTagName(tagName)
- - - -

Exemple

- -
// 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++) {
-    var status = cells[i].getAttribute("data-status");
-    if ( status == "open" ) {
-        // saisit les données 
-    }
-}
- -

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
- -

Compatibilité des navigateurs

- -

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

diff --git a/files/fr/web/api/element/getelementsbytagname/index.md b/files/fr/web/api/element/getelementsbytagname/index.md new file mode 100644 index 0000000000..8cbef3215e --- /dev/null +++ b/files/fr/web/api/element/getelementsbytagname/index.md @@ -0,0 +1,76 @@ +--- +title: element.getElementsByTagName +slug: Web/API/Element/getElementsByTagName +tags: + - API + - DOM + - Element + - Méthode + - Reference +translation_of: Web/API/Element/getElementsByTagName +--- +

{{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.

+ +

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é.

+ +

Syntaxe

+ +
elements = element.getElementsByTagName(tagName)
+ + + +

Exemple

+ +
// 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++) {
+    var status = cells[i].getAttribute("data-status");
+    if ( status == "open" ) {
+        // saisit les données 
+    }
+}
+ +

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
+ +

Compatibilité des navigateurs

+ +

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

diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.html b/files/fr/web/api/element/getelementsbytagnamens/index.html deleted file mode 100644 index 3bb1bbba96..0000000000 --- a/files/fr/web/api/element/getelementsbytagnamens/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Element.getElementsByTagNameNS() -slug: Web/API/Element/getElementsByTagNameNS -tags: - - API - - DOM - - Element - - Méthode - - Reference -translation_of: Web/API/Element/getElementsByTagNameNS ---- -

{{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.

- -

Syntaxe

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

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")}}.
-
- -

Valeur de retour

- -

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

- -

Exemples

- -
// 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++) {
-  var axis = cells[i].getAttribute("axis");
-  if (axis == "year") {
-    // saisit les données
-  }
-}
-
- -

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.
- -

Compatibilité des navigateurs

- -

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

diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.md b/files/fr/web/api/element/getelementsbytagnamens/index.md new file mode 100644 index 0000000000..3bb1bbba96 --- /dev/null +++ b/files/fr/web/api/element/getelementsbytagnamens/index.md @@ -0,0 +1,75 @@ +--- +title: Element.getElementsByTagNameNS() +slug: Web/API/Element/getElementsByTagNameNS +tags: + - API + - DOM + - Element + - Méthode + - Reference +translation_of: Web/API/Element/getElementsByTagNameNS +--- +

{{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.

+ +

Syntaxe

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

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")}}.
+
+ +

Valeur de retour

+ +

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

+ +

Exemples

+ +
// 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++) {
+  var axis = cells[i].getAttribute("axis");
+  if (axis == "year") {
+    // saisit les données
+  }
+}
+
+ +

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.
+ +

Compatibilité des navigateurs

+ +

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

diff --git a/files/fr/web/api/element/hasattribute/index.html b/files/fr/web/api/element/hasattribute/index.html deleted file mode 100644 index 5c90c03771..0000000000 --- a/files/fr/web/api/element/hasattribute/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: element.hasAttribute -slug: Web/API/Element/hasAttribute -tags: - - API - - DOM - - Element - - Méthode - - Reference -translation_of: Web/API/Element/hasAttribute ---- -

{{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.

- -

Syntaxe

- -
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.
-
- -

Exemple

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

Polyfill

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

Notes

- -

{{DOMAttributeMethods}}

- -

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.
- -

Browser compatibility

- -

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

diff --git a/files/fr/web/api/element/hasattribute/index.md b/files/fr/web/api/element/hasattribute/index.md new file mode 100644 index 0000000000..5c90c03771 --- /dev/null +++ b/files/fr/web/api/element/hasattribute/index.md @@ -0,0 +1,77 @@ +--- +title: element.hasAttribute +slug: Web/API/Element/hasAttribute +tags: + - API + - DOM + - Element + - Méthode + - Reference +translation_of: Web/API/Element/hasAttribute +--- +

{{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.

+ +

Syntaxe

+ +
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.
+
+ +

Exemple

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

Polyfill

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

Notes

+ +

{{DOMAttributeMethods}}

+ +

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.
+ +

Browser compatibility

+ +

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

diff --git a/files/fr/web/api/element/hasattributens/index.html b/files/fr/web/api/element/hasattributens/index.html deleted file mode 100644 index d30aca00e1..0000000000 --- a/files/fr/web/api/element/hasattributens/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: element.hasAttributeNS -slug: Web/API/Element/hasAttributeNS -tags: - - API - - Attributs - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/hasAttributeNS ---- -

{{ APIRef("DOM") }}

- -

Résumé

- -

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

- -

Syntaxe

- -
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

- - diff --git a/files/fr/web/api/element/hasattributens/index.md b/files/fr/web/api/element/hasattributens/index.md new file mode 100644 index 0000000000..d30aca00e1 --- /dev/null +++ b/files/fr/web/api/element/hasattributens/index.md @@ -0,0 +1,54 @@ +--- +title: element.hasAttributeNS +slug: Web/API/Element/hasAttributeNS +tags: + - API + - Attributs + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/hasAttributeNS +--- +

{{ APIRef("DOM") }}

+ +

Résumé

+ +

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

+ +

Syntaxe

+ +
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

+ + diff --git a/files/fr/web/api/element/hasattributes/index.html b/files/fr/web/api/element/hasattributes/index.html deleted file mode 100644 index ec7c62931f..0000000000 --- a/files/fr/web/api/element/hasattributes/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: element.hasAttributes -slug: Web/API/Element/hasAttributes -tags: - - API - - DOM - - Element - - Méthode - - Reference - - polyfill -translation_of: Web/API/Element/hasAttributes ---- -
{{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.

- -

Syntaxe

- -
var result = element.hasAttributes();
- -

Valeur de retour

- -
-
result
-
contient la valeur de retour true ou false.
-
- -

Exemple

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

Polyfill

- -
;(function(prototype) {
-    prototype.hasAttributes = prototype.hasAttributes || function() {
-        return (this.attributes.length > 0);
-    }
-})(Element.prototype);
- -

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")}}.
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/hasattributes/index.md b/files/fr/web/api/element/hasattributes/index.md new file mode 100644 index 0000000000..ec7c62931f --- /dev/null +++ b/files/fr/web/api/element/hasattributes/index.md @@ -0,0 +1,79 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - API + - DOM + - Element + - Méthode + - Reference + - polyfill +translation_of: Web/API/Element/hasAttributes +--- +
{{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.

+ +

Syntaxe

+ +
var result = element.hasAttributes();
+ +

Valeur de retour

+ +
+
result
+
contient la valeur de retour true ou false.
+
+ +

Exemple

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

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttributes = prototype.hasAttributes || function() {
+        return (this.attributes.length > 0);
+    }
+})(Element.prototype);
+ +

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")}}.
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/id/index.html b/files/fr/web/api/element/id/index.html deleted file mode 100644 index 29e4752a20..0000000000 --- a/files/fr/web/api/element/id/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: element.id -slug: Web/API/Element/id -tags: - - API - - DOM - - Element - - Propriété - - Reference -translation_of: Web/API/Element/id ---- -

{{ApiRef("DOM")}}

- -

La propriété Element.id représente l'identifiant de l'élément, reflétant l' 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.

- -
-

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).

-
- -

Syntaxe

- -
var idStr = elt.id; // Obtenez l'identifiant
-elt.id = idStr; // Définir l'identifiant
- - - -

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.
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/id/index.md b/files/fr/web/api/element/id/index.md new file mode 100644 index 0000000000..29e4752a20 --- /dev/null +++ b/files/fr/web/api/element/id/index.md @@ -0,0 +1,68 @@ +--- +title: element.id +slug: Web/API/Element/id +tags: + - API + - DOM + - Element + - Propriété + - Reference +translation_of: Web/API/Element/id +--- +

{{ApiRef("DOM")}}

+ +

La propriété Element.id représente l'identifiant de l'élément, reflétant l' 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.

+ +
+

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).

+
+ +

Syntaxe

+ +
var idStr = elt.id; // Obtenez l'identifiant
+elt.id = idStr; // Définir l'identifiant
+ + + +

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.
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/index.html b/files/fr/web/api/element/index.html deleted file mode 100644 index ac94a2ffc9..0000000000 --- a/files/fr/web/api/element/index.html +++ /dev/null @@ -1,425 +0,0 @@ ---- -title: Element -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}}

diff --git a/files/fr/web/api/element/index.md b/files/fr/web/api/element/index.md new file mode 100644 index 0000000000..ac94a2ffc9 --- /dev/null +++ b/files/fr/web/api/element/index.md @@ -0,0 +1,425 @@ +--- +title: Element +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}}

diff --git a/files/fr/web/api/element/innerhtml/index.html b/files/fr/web/api/element/innerhtml/index.html deleted file mode 100644 index 91ab29da37..0000000000 --- a/files/fr/web/api/element/innerhtml/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: element.innerHTML -slug: Web/API/Element/innerHTML -tags: - - API - - DOM - - Elements - - HTML - - Propriétés -translation_of: Web/API/Element/innerHTML -original_slug: Web/API/Element/innertHTML ---- -
{{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.

- -
-

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.

-
- -

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

- -
const content = element.innerHTML;
-
-element.innerHTML = htmlString;
-
- -

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.

- -

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")}}.
-
- -

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.

- -

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.

- -
let contents = myElement.innerHTML;
- -

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.

-
- -

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.

- -

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 = "";
- -

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>";
- -

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 :

- -
    -
  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. -
  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 <template> est remplacé par le nouveau DocumentFragment créé à l'étape 1.
    3. -
  3. Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau DocumentFragment.
    4. -
- -

Considérations de sécurité

- -

Il n'est pas rare de voir innerHTML utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité.

- -
const name = "John";
-// en supposant que 'el' est un élément de document HTML
-el.innerHTML = name; // inoffensif dans ce cas
-
-// ...
-
-name = "<script>alert('I am John in an annoying alert!')</script>";
-el.innerHTML = name; // inoffensif dans ce cas
- -

Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec innerHTML ne doit pas s'exécuter.

- -

Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez innerHTML pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :

- -
const name = "<img src='x' onerror='alert(1)'>";
-el.innerHTML = name; // affiche l'alerte
- -

Pour cette raison, il est recommandé de ne pas utiliser innerHTML pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.

- -
-

Attention : Si votre projet est soumis à une vérification de sécurité, l'utilisation de innerHTML entraînera probablement le rejet de votre code. Par exemple, si vous utilisez innerHTML dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.

-
- -

Exemple

- -

Cet exemple utilise innerHTML pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.

- -

JavaScript

- -
function log(msg) {
-  var logElem = document.querySelector(".log");
-
-  var time = new Date();
-  var timeStr = time.toLocaleTimeString();
-  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
-}
-
-log("Logging mouse events inside this container...");
- -

La fonction log() crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe "log".

- -

Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) :

- -
function logEvent(event) {
-  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
-            event.clientX + ", " + event.clientY + "</em>";
-  log(msg);
-}
- -

Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal.

- -
var boxElem = document.querySelector(".box");
-
-boxElem.addEventListener("mousedown", logEvent);
-boxElem.addEventListener("mouseup", logEvent);
-boxElem.addEventListener("click", logEvent);
-boxElem.addEventListener("mouseenter", logEvent);
-boxElem.addEventListener("mouseleave", logEvent);
- -

HTML

- -

Le HTML est assez simple pour notre exemple.

- -
<div class="box">
-  <div><strong>Log:</strong></div>
-  <div class="log"></div>
-</div>
- -

Le {{HTMLElement ("div")}} avec la classe "box" est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui. Le <div> dont la classe est "log" est le conteneur pour le texte du journal lui-même.

- -

CSS

- -

Les styles CSS suivants pour notre exemple de contenu.

- -
.box {
-  width: 600px;
-  height: 300px;
-  border: 1px solid black;
-  padding: 2px 4px;
-  overflow-y: scroll;
-  overflow-x: auto;
-}
-
-.log {
-  margin-top: 8px;
-  font-family: monospace;
-}
- -

Résultat

- -

Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite.

- -

{{EmbedLiveSample("Exemple", 640, 350)}}

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#innerhtml', 'Element.innerHTML')}}{{ Spec2('DOM Parsing') }}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/api/element/innerhtml/index.md b/files/fr/web/api/element/innerhtml/index.md new file mode 100644 index 0000000000..91ab29da37 --- /dev/null +++ b/files/fr/web/api/element/innerhtml/index.md @@ -0,0 +1,206 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - Elements + - HTML + - Propriétés +translation_of: Web/API/Element/innerHTML +original_slug: Web/API/Element/innertHTML +--- +
{{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.

+ +
+

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.

+
+ +

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

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

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.

+ +

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")}}.
+
+ +

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.

+ +

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.

+ +
let contents = myElement.innerHTML;
+ +

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.

+
+ +

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.

+ +

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 = "";
+ +

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>";
+ +

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 :

+ +
    +
  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. +
  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 <template> est remplacé par le nouveau DocumentFragment créé à l'étape 1.
    3. +
  3. Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau DocumentFragment.
    4. +
+ +

Considérations de sécurité

+ +

Il n'est pas rare de voir innerHTML utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité.

+ +
const name = "John";
+// en supposant que 'el' est un élément de document HTML
+el.innerHTML = name; // inoffensif dans ce cas
+
+// ...
+
+name = "<script>alert('I am John in an annoying alert!')</script>";
+el.innerHTML = name; // inoffensif dans ce cas
+ +

Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec innerHTML ne doit pas s'exécuter.

+ +

Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez innerHTML pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // affiche l'alerte
+ +

Pour cette raison, il est recommandé de ne pas utiliser innerHTML pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.

+ +
+

Attention : Si votre projet est soumis à une vérification de sécurité, l'utilisation de innerHTML entraînera probablement le rejet de votre code. Par exemple, si vous utilisez innerHTML dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.

+
+ +

Exemple

+ +

Cet exemple utilise innerHTML pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Logging mouse events inside this container...");
+ +

La fonction log() crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe "log".

+ +

Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) :

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal.

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

Le HTML est assez simple pour notre exemple.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

Le {{HTMLElement ("div")}} avec la classe "box" est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui. Le <div> dont la classe est "log" est le conteneur pour le texte du journal lui-même.

+ +

CSS

+ +

Les styles CSS suivants pour notre exemple de contenu.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Résultat

+ +

Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite.

+ +

{{EmbedLiveSample("Exemple", 640, 350)}}

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#innerhtml', 'Element.innerHTML')}}{{ Spec2('DOM Parsing') }}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/insertadjacentelement/index.html b/files/fr/web/api/element/insertadjacentelement/index.html deleted file mode 100644 index 8587eb5de0..0000000000 --- a/files/fr/web/api/element/insertadjacentelement/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Element.insertAdjacentElement() -slug: Web/API/Element/insertAdjacentElement -tags: - - API - - DOM - - Element - - Insertion - - Méthodes -translation_of: Web/API/Element/insertAdjacentElement ---- -

{{APIRef("DOM")}}

- -

La méthode insertAdjacentElement() insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.

- -

Syntaxe

- -
targetElement.insertAdjacentElement(position, element);
- -

Paramètres

- -
-
position
-
Un objet {{domxref("DOMString")}} (chaîne de caractères) représentant la position par rapport à targetElement ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : -
    -
  • 'beforebegin' : Avant targetElement lui-même.
    • -
  • 'afterbegin' : A l'intérieur de targetElement, avant son premier enfant.
    • -
  • 'beforeend' : A l'intérieur de targetElement, après son dernier enfant.
    • -
  • 'afterend' : Après targetElement lui-même.
    • -
-
-
element
-
L'élément à insérer dans l'arbre.
-
- -

Valeur retournée

- -

L'élément inséré ou null si l'insertion a échouée.

- -

Exceptions

- - - - - - - - - - - - - - - - - - -
ExceptionExplications
SyntaxErrorLa position donnée n'est pas une valeur reconnue.
TypeErrorL'element spécifié n'est pas un élément valide.
- -

Visualisation des positionnements

- -
<!-- beforebegin -->
-<p>
-<!-- afterbegin -->
-foo
-<!-- beforeend -->
-</p>
-<!-- afterend -->
- -
-

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.

-
- -

Exemple

- -
beforeBtn.addEventListener('click', function() {
-  var tempDiv = document.createElement('div');
-  tempDiv.style.backgroundColor = randomColor();
-  if (activeElem) {
-    activeElem.insertAdjacentElement('beforebegin',tempDiv);
-  }
-  setListener(tempDiv);
-});
-
-afterBtn.addEventListener('click', function() {
-  var tempDiv = document.createElement('div');
-  tempDiv.style.backgroundColor = randomColor();
-  if (activeElem) {
-    activeElem.insertAdjacentElement('afterend',tempDiv);
-  }
-  setListener(tempDiv);
-});
- -

Une démo de notre insertAdjacentElement.html est disponible sur Github ( avec le code source ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons Insert before (insérer avant) et Insert after (insérer après) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant insertAdjacentElement().

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}{{ Spec2('DOM WHATWG') }}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/insertadjacentelement/index.md b/files/fr/web/api/element/insertadjacentelement/index.md new file mode 100644 index 0000000000..8587eb5de0 --- /dev/null +++ b/files/fr/web/api/element/insertadjacentelement/index.md @@ -0,0 +1,127 @@ +--- +title: Element.insertAdjacentElement() +slug: Web/API/Element/insertAdjacentElement +tags: + - API + - DOM + - Element + - Insertion + - Méthodes +translation_of: Web/API/Element/insertAdjacentElement +--- +

{{APIRef("DOM")}}

+ +

La méthode insertAdjacentElement() insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.

+ +

Syntaxe

+ +
targetElement.insertAdjacentElement(position, element);
+ +

Paramètres

+ +
+
position
+
Un objet {{domxref("DOMString")}} (chaîne de caractères) représentant la position par rapport à targetElement ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : +
    +
  • 'beforebegin' : Avant targetElement lui-même.
    • +
  • 'afterbegin' : A l'intérieur de targetElement, avant son premier enfant.
    • +
  • 'beforeend' : A l'intérieur de targetElement, après son dernier enfant.
    • +
  • 'afterend' : Après targetElement lui-même.
    • +
+
+
element
+
L'élément à insérer dans l'arbre.
+
+ +

Valeur retournée

+ +

L'élément inséré ou null si l'insertion a échouée.

+ +

Exceptions

+ + + + + + + + + + + + + + + + + + +
ExceptionExplications
SyntaxErrorLa position donnée n'est pas une valeur reconnue.
TypeErrorL'element spécifié n'est pas un élément valide.
+ +

Visualisation des positionnements

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
+

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.

+
+ +

Exemple

+ +
beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  }
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('afterend',tempDiv);
+  }
+  setListener(tempDiv);
+});
+ +

Une démo de notre insertAdjacentElement.html est disponible sur Github ( avec le code source ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons Insert before (insérer avant) et Insert after (insérer après) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant insertAdjacentElement().

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}{{ Spec2('DOM WHATWG') }}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/insertadjacenthtml/index.html b/files/fr/web/api/element/insertadjacenthtml/index.html deleted file mode 100644 index e1f0ffa06a..0000000000 --- a/files/fr/web/api/element/insertadjacenthtml/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: element.insertAdjacentHTML -slug: Web/API/Element/insertAdjacentHTML -tags: - - API - - DOM - - Méthode - - Reference -translation_of: Web/API/Element/insertAdjacentHTML ---- -
{{APIRef("DOM")}}
- -

insertAdjacentHTML() analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que innerHTML.

- -

Syntaxe

- -
element.insertAdjacentHTML(position, text);
- -

Paramètres

- -
-
position 
-
une {{domxref("DOMString")}}  représentant la position relative à l'element, et doit être une des chaînes de caractères suivantes :
-
- - - -
-
text
-
 est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.
-
- -

Visualisation des noms de position

- - -
<!-- beforebegin -->
-<p>
-  <!-- afterbegin -->
-  foo
-  <!-- beforeend -->
-</p>
-<!-- afterend -->
- -
-

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est un arbre et a un élément parent.

-
- -

Exemple

- -
// <div id="one">one</div>
-var d1 = document.getElementById('one');
-d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
-
-// Ici la nouvelle structure est :
-// <div id="one">one</div><div id="two">two</div>
- -

Notes

- -

Considérations de sécurité

- -

Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.

- -

Il est recommandé de ne pas utiliser insertAdjacentHTML lors de l'insertion de texte brut; à la place, utilisez la propriété node.textContent ou la méthode node.insertAdjacentText(). Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/insertadjacenthtml/index.md b/files/fr/web/api/element/insertadjacenthtml/index.md new file mode 100644 index 0000000000..e1f0ffa06a --- /dev/null +++ b/files/fr/web/api/element/insertadjacenthtml/index.md @@ -0,0 +1,99 @@ +--- +title: element.insertAdjacentHTML +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - DOM + - Méthode + - Reference +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

insertAdjacentHTML() analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que innerHTML.

+ +

Syntaxe

+ +
element.insertAdjacentHTML(position, text);
+ +

Paramètres

+ +
+
position 
+
une {{domxref("DOMString")}}  représentant la position relative à l'element, et doit être une des chaînes de caractères suivantes :
+
+ + + +
+
text
+
 est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.
+
+ +

Visualisation des noms de position

+ + +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
+

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est un arbre et a un élément parent.

+
+ +

Exemple

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// Ici la nouvelle structure est :
+// <div id="one">one</div><div id="two">two</div>
+ +

Notes

+ +

Considérations de sécurité

+ +

Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.

+ +

Il est recommandé de ne pas utiliser insertAdjacentHTML lors de l'insertion de texte brut; à la place, utilisez la propriété node.textContent ou la méthode node.insertAdjacentText(). Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/insertadjacenttext/index.html b/files/fr/web/api/element/insertadjacenttext/index.html deleted file mode 100644 index f0ab71ddad..0000000000 --- a/files/fr/web/api/element/insertadjacenttext/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Element.insertAdjacentText() -slug: Web/API/Element/insertAdjacentText -tags: - - API - - DOM - - Element - - Insertion - - Méthodes - - Texte -translation_of: Web/API/Element/insertAdjacentText ---- -

{{APIRef("DOM")}}

- -

La méthode insertAdjacentText() insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.

- -

Syntaxe

- -
element.insertAdjacentText(position, element);
- -

Paramètres

- -
-
position
-
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la position par rapport à l'element ; elle doit être l'une des chaînes suivantes : -
    -
  • 'beforebegin' : avant l'element lui-même ;
    • -
  • 'afterbegin' : à l'intérieur de l'element, avant son premier enfant ;
    • -
  • 'beforeend' : à l'intérieur de l'element, avant son dernier enfant ;
    • -
  • 'afterend' : après l'element lui-même.
    • -
-
-
element
-
Une {{domxref("DOMString")}} (chaîne de caractères) représentant le texte à insérer dans l'arbre.
-
- -

Valeur renvoyée

- -

Vide.

- -

Exceptions

- - - - - - - - - - - - - - -
ExceptionExplication
SyntaxErrorLa position indiquée n'est pas une valeur reconnue.
- -

Visualisation des noms de position

- -
<!-- beforebegin -->
-<p>
-<!-- afterbegin> -->
-machin
-<!-- beforeend -->
-</p>
-<!-- afterend -->
- -
-

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.

-
- -

Exemple

- -
beforeBtn.addEventListener('click', function() {
-  para.insertAdjacentText('afterbegin',textInput.value);
-});
-
-afterBtn.addEventListener('click', function() {
-  para.insertAdjacentText('beforeend',textInput.value);
-});
- -

Jetez un œil à notre démo insertAdjacentText.html sur GitHub (voir le code source aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons Insert before (insère avant) et Insert after (insère après) pour l'insérer avant ou après le texte de paragraphe existant en utilisant insertAdjacentText(). Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.

- -

Émulation

- -

Vous pouvez utiliser une émulation de la méthode insertAdjacentText() dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :

- -
if (!Element.prototype.insertAdjacentText)
-  Element.prototype.insertAdjacentText = function(type, txt){
-    this.insertAdjacentHTML(
-      type,
-      (txt+'') // convertir en chaîne de caractères
-        .replace(/&/g, '&amp;') // intégrer des symboles d'esperluette
-        .replace(/</g, '&lt;') // intégrer les symboles "plus petit que"
-    )
-  }
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}{{ Spec2('DOM WHATWG') }}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/insertadjacenttext/index.md b/files/fr/web/api/element/insertadjacenttext/index.md new file mode 100644 index 0000000000..f0ab71ddad --- /dev/null +++ b/files/fr/web/api/element/insertadjacenttext/index.md @@ -0,0 +1,127 @@ +--- +title: Element.insertAdjacentText() +slug: Web/API/Element/insertAdjacentText +tags: + - API + - DOM + - Element + - Insertion + - Méthodes + - Texte +translation_of: Web/API/Element/insertAdjacentText +--- +

{{APIRef("DOM")}}

+ +

La méthode insertAdjacentText() insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.

+ +

Syntaxe

+ +
element.insertAdjacentText(position, element);
+ +

Paramètres

+ +
+
position
+
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la position par rapport à l'element ; elle doit être l'une des chaînes suivantes : +
    +
  • 'beforebegin' : avant l'element lui-même ;
    • +
  • 'afterbegin' : à l'intérieur de l'element, avant son premier enfant ;
    • +
  • 'beforeend' : à l'intérieur de l'element, avant son dernier enfant ;
    • +
  • 'afterend' : après l'element lui-même.
    • +
+
+
element
+
Une {{domxref("DOMString")}} (chaîne de caractères) représentant le texte à insérer dans l'arbre.
+
+ +

Valeur renvoyée

+ +

Vide.

+ +

Exceptions

+ + + + + + + + + + + + + + +
ExceptionExplication
SyntaxErrorLa position indiquée n'est pas une valeur reconnue.
+ +

Visualisation des noms de position

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin> -->
+machin
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
+

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.

+
+ +

Exemple

+ +
beforeBtn.addEventListener('click', function() {
+  para.insertAdjacentText('afterbegin',textInput.value);
+});
+
+afterBtn.addEventListener('click', function() {
+  para.insertAdjacentText('beforeend',textInput.value);
+});
+ +

Jetez un œil à notre démo insertAdjacentText.html sur GitHub (voir le code source aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons Insert before (insère avant) et Insert after (insère après) pour l'insérer avant ou après le texte de paragraphe existant en utilisant insertAdjacentText(). Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.

+ +

Émulation

+ +

Vous pouvez utiliser une émulation de la méthode insertAdjacentText() dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :

+ +
if (!Element.prototype.insertAdjacentText)
+  Element.prototype.insertAdjacentText = function(type, txt){
+    this.insertAdjacentHTML(
+      type,
+      (txt+'') // convertir en chaîne de caractères
+        .replace(/&/g, '&amp;') // intégrer des symboles d'esperluette
+        .replace(/</g, '&lt;') // intégrer les symboles "plus petit que"
+    )
+  }
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}{{ Spec2('DOM WHATWG') }}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/localname/index.html b/files/fr/web/api/element/localname/index.html deleted file mode 100644 index d64738b272..0000000000 --- a/files/fr/web/api/element/localname/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Element.localName -slug: Web/API/Element/localName -tags: - - API - - DOM - - Element - - Nom - - Propriétés - - XML - - local -translation_of: Web/API/Element/localName ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule Element.localName renvoie la partie locale du nom qualifié d'un élément.

- -
-

Note : Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.

-
- -

Syntaxe

- -
name = element.localName
-
- -

Valeur renvoyée

- -

Une {{domxref("DOMString")}} (chaîne de caractères) représentant la partie locale du nom qualifié de l'élément.

- -

Exemple

- -

(Doit être servi avec un type de contenu XML, tel que text/xml ou application/xhtml+xml.)

- -
<html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:svg="http://www.w3.org/2000/svg">
-<head>
-  <script type="application/javascript"><![CDATA[
-  function test() {
-    var text = document.getElementById('text');
-    var circle = document.getElementById('circle');
-
-    text.value = "<svg:circle> has:\n" +
-                 "localName = '" + circle.localName + "'\n" +
-                 "namespaceURI = '" + circle.namespaceURI + "'";
-  }
-  ]]></script>
-</head>
-<body onload="test()">
-  <svg:svg version="1.1"
-    width="100px" height="100px"
-    viewBox="0 0 100 100">
-    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
-  </svg:svg>
-  <textarea id="text" rows="4" cols="55"/>
-</body>
-</html>
-
- -

Notes

- -

Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié ecomm:partners, partners est le nom local et ecomm est le préfixe :

- -
<ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
-  <ecomm:partners>
-    <ecomm:partner id="1001">Tony's Syrup Warehouse
-    </ecomm:partner>
-  </ecomm:partner>
-</ecomm:business>
-
- -
-

Note : Dans {{Gecko("1.9.2")}} et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.

-
- -

Spécifications

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

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/localname/index.md b/files/fr/web/api/element/localname/index.md new file mode 100644 index 0000000000..d64738b272 --- /dev/null +++ b/files/fr/web/api/element/localname/index.md @@ -0,0 +1,106 @@ +--- +title: Element.localName +slug: Web/API/Element/localName +tags: + - API + - DOM + - Element + - Nom + - Propriétés + - XML + - local +translation_of: Web/API/Element/localName +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule Element.localName renvoie la partie locale du nom qualifié d'un élément.

+ +
+

Note : Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.

+
+ +

Syntaxe

+ +
name = element.localName
+
+ +

Valeur renvoyée

+ +

Une {{domxref("DOMString")}} (chaîne de caractères) représentant la partie locale du nom qualifié de l'élément.

+ +

Exemple

+ +

(Doit être servi avec un type de contenu XML, tel que text/xml ou application/xhtml+xml.)

+ +
<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script type="application/javascript"><![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "<svg:circle> has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]></script>
+</head>
+<body onload="test()">
+  <svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+  <textarea id="text" rows="4" cols="55"/>
+</body>
+</html>
+
+ +

Notes

+ +

Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié ecomm:partners, partners est le nom local et ecomm est le préfixe :

+ +
<ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
+  <ecomm:partners>
+    <ecomm:partner id="1001">Tony's Syrup Warehouse
+    </ecomm:partner>
+  </ecomm:partner>
+</ecomm:business>
+
+ +
+

Note : Dans {{Gecko("1.9.2")}} et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.

+
+ +

Spécifications

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

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/matches/index.html b/files/fr/web/api/element/matches/index.html deleted file mode 100644 index 21e4a2ee68..0000000000 --- a/files/fr/web/api/element/matches/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Element.matches() -slug: Web/API/Element/matches -tags: - - API - - DOM - - Selector -translation_of: Web/API/Element/matches ---- -

{{ APIRef("DOM") }}

- -

La méthode element.matches() renvoie true lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie false.

- -
-

Attention : Certains navigateurs implémentent cette méthode sous le nom matchesSelector() non-standardisé et préfixé.

-
- -

Syntaxe

- -
var result = element.matches(selectorString);
-
- - - -

Exemple

- -
<ul id="birds">
-  <li>perroquet amazone</li>
-  <li class="endangered">aigle des Philippines</li>
-  <li>pélican blanc</li>
-</ul>
-
-<script type="text/javascript">
-  var birds = document.getElementsByTagName('li');
-
-  for (var i = 0; i < birds.length; i++) {
-    if (birds[i].matches('.endangered')) {
-      console.log('Le - ' + birds[i].textContent + '- est en voie de disparition !');
-    }
-  }
-</script>
- -

Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut class de valeur endangered.

- -

Exceptions

- -
-
SYNTAX_ERR
-
Lorsque la chaîne passée en paramêtre défini sélecteur invalide.
-
- -

Polyfill

- -

Pour les navigateurs qui ne supportent pas Element.matches() ou Element.matchesSelector(), mais fournissent le support de document.querySelectorAll(), il existe un polyfill :

- -
if (!Element.prototype.matches) {
-    Element.prototype.matches =
-        Element.prototype.matchesSelector ||
-        Element.prototype.mozMatchesSelector ||
-        Element.prototype.msMatchesSelector ||
-        Element.prototype.oMatchesSelector ||
-        Element.prototype.webkitMatchesSelector ||
-        function(s) {
-            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-                i = matches.length;
-            while (--i >= 0 && matches.item(i) !== this) {}
-            return i > -1;
-        };
-}
- -

Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).

- -
if (!Element.prototype.matches) {
-    Element.prototype.matches = Element.prototype.msMatchesSelector;
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatus
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/matches/index.md b/files/fr/web/api/element/matches/index.md new file mode 100644 index 0000000000..21e4a2ee68 --- /dev/null +++ b/files/fr/web/api/element/matches/index.md @@ -0,0 +1,108 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +tags: + - API + - DOM + - Selector +translation_of: Web/API/Element/matches +--- +

{{ APIRef("DOM") }}

+ +

La méthode element.matches() renvoie true lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie false.

+ +
+

Attention : Certains navigateurs implémentent cette méthode sous le nom matchesSelector() non-standardisé et préfixé.

+
+ +

Syntaxe

+ +
var result = element.matches(selectorString);
+
+ + + +

Exemple

+ +
<ul id="birds">
+  <li>perroquet amazone</li>
+  <li class="endangered">aigle des Philippines</li>
+  <li>pélican blanc</li>
+</ul>
+
+<script type="text/javascript">
+  var birds = document.getElementsByTagName('li');
+
+  for (var i = 0; i < birds.length; i++) {
+    if (birds[i].matches('.endangered')) {
+      console.log('Le - ' + birds[i].textContent + '- est en voie de disparition !');
+    }
+  }
+</script>
+ +

Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut class de valeur endangered.

+ +

Exceptions

+ +
+
SYNTAX_ERR
+
Lorsque la chaîne passée en paramêtre défini sélecteur invalide.
+
+ +

Polyfill

+ +

Pour les navigateurs qui ne supportent pas Element.matches() ou Element.matchesSelector(), mais fournissent le support de document.querySelectorAll(), il existe un polyfill :

+ +
if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function(s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i = matches.length;
+            while (--i >= 0 && matches.item(i) !== this) {}
+            return i > -1;
+        };
+}
+ +

Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).

+ +
if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector;
+}
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatus
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mousedown_event/index.html b/files/fr/web/api/element/mousedown_event/index.html deleted file mode 100644 index 98ab94299d..0000000000 --- a/files/fr/web/api/element/mousedown_event/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'Element : évènement mousedown' -slug: Web/API/Element/mousedown_event -tags: - - API - - DOM - - Interface - - Reference - - events - - mousedown -translation_of: Web/API/Element/mousedown_event ---- -
{{APIRef}}
- -

L'évènement mousedown est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.

- -
-

Note : Cet évènement est différent de {{domxref("Element/click_event", "click")}}. click est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). mousedown est déclenché dès qu'on appuie sur le bouton.

-
- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}
- -

Exemples

- -

{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mousedown_event/index.md b/files/fr/web/api/element/mousedown_event/index.md new file mode 100644 index 0000000000..98ab94299d --- /dev/null +++ b/files/fr/web/api/element/mousedown_event/index.md @@ -0,0 +1,88 @@ +--- +title: 'Element : évènement mousedown' +slug: Web/API/Element/mousedown_event +tags: + - API + - DOM + - Interface + - Reference + - events + - mousedown +translation_of: Web/API/Element/mousedown_event +--- +
{{APIRef}}
+ +

L'évènement mousedown est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.

+ +
+

Note : Cet évènement est différent de {{domxref("Element/click_event", "click")}}. click est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). mousedown est déclenché dès qu'on appuie sur le bouton.

+
+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}
+ +

Exemples

+ +

{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mouseenter_event/index.html b/files/fr/web/api/element/mouseenter_event/index.html deleted file mode 100644 index ba2623f7c6..0000000000 --- a/files/fr/web/api/element/mouseenter_event/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: 'Element : évènement mouseenter' -slug: Web/API/Element/mouseenter_event -tags: - - API - - DOM - - Element - - Interface - - Reference - - mouseenter -translation_of: Web/API/Element/mouseenter_event ---- -
{{APIRef}}
- -

L'évènement mouseenter est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
- -

Notes d'utilisation

- -

Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, mouseenter est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.

- - - -

mouseenter est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.

- - -

Un seul évènement mouseover est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.

- -

Avec des hiérarchies profondes, le nombre d'évènements mouseenter envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements mouseover.

- -

Avec la combinaison de mouseenter et mouseleave (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.

- -

Exemples

- -

La documentation mouseover illustre la différence entre mouseover et mouseenter.

- -

Ici, on utilise mouseenter pour modifier la bordure d'un div lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements mouseenter ouor mouseleave event.

- -

HTML

- -
<div id='mouseTarget'>
- <ul id="unorderedList">
-  <li>No events yet!</li>
- </ul>
-</div>
- -

CSS

- -

On met en forme le div pour le rendre plus visible.

- -
#mouseTarget {
-  box-sizing: border-box;
-  width:15rem;
-  border:1px solid #333;
-}
- -

JavaScript

- -
var enterEventCount = 0;
-var leaveEventCount = 0;
-const mouseTarget = document.getElementById('mouseTarget');
-const unorderedList = document.getElementById('unorderedList');
-
-mouseTarget.addEventListener('mouseenter', e => {
-  mouseTarget.style.border = '5px dotted orange';
-  enterEventCount++;
-  addListItem("C'est le " + enterEventCount + "ème mouseenter.");
-});
-
-mouseTarget.addEventListener('mouseleave', e => {
-  mouseTarget.style.border = '1px solid #333';
-  leaveEventCount++;
-  addListItem("C'est le " + leaveEventCount + "ème mouseleave.");
-});
-
-function addListItem(text) {
-  // On crée un nouveau noeud text avec le texte fourni
-  var newTextNode = document.createTextNode(text);
-
-  // On crée un élément li
-  var newListItem = document.createElement("li");
-
-  // On ajoute le noeud texte à l'élément li
-  newListItem.appendChild(newTextNode);
-
-  // On ajoute l'élément de liste à la liste
-  unorderedList.appendChild(newListItem);
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mouseenter_event/index.md b/files/fr/web/api/element/mouseenter_event/index.md new file mode 100644 index 0000000000..ba2623f7c6 --- /dev/null +++ b/files/fr/web/api/element/mouseenter_event/index.md @@ -0,0 +1,157 @@ +--- +title: 'Element : évènement mouseenter' +slug: Web/API/Element/mouseenter_event +tags: + - API + - DOM + - Element + - Interface + - Reference + - mouseenter +translation_of: Web/API/Element/mouseenter_event +--- +
{{APIRef}}
+ +

L'évènement mouseenter est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
+ +

Notes d'utilisation

+ +

Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, mouseenter est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.

+ + + +

mouseenter est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.

+ + +

Un seul évènement mouseover est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.

+ +

Avec des hiérarchies profondes, le nombre d'évènements mouseenter envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements mouseover.

+ +

Avec la combinaison de mouseenter et mouseleave (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.

+ +

Exemples

+ +

La documentation mouseover illustre la différence entre mouseover et mouseenter.

+ +

Ici, on utilise mouseenter pour modifier la bordure d'un div lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements mouseenter ouor mouseleave event.

+ +

HTML

+ +
<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>No events yet!</li>
+ </ul>
+</div>
+ +

CSS

+ +

On met en forme le div pour le rendre plus visible.

+ +
#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}
+ +

JavaScript

+ +
var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e => {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem("C'est le " + enterEventCount + "ème mouseenter.");
+});
+
+mouseTarget.addEventListener('mouseleave', e => {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem("C'est le " + leaveEventCount + "ème mouseleave.");
+});
+
+function addListItem(text) {
+  // On crée un nouveau noeud text avec le texte fourni
+  var newTextNode = document.createTextNode(text);
+
+  // On crée un élément li
+  var newListItem = document.createElement("li");
+
+  // On ajoute le noeud texte à l'élément li
+  newListItem.appendChild(newTextNode);
+
+  // On ajoute l'élément de liste à la liste
+  unorderedList.appendChild(newListItem);
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mouseleave_event/index.html b/files/fr/web/api/element/mouseleave_event/index.html deleted file mode 100644 index 2c9ee0d534..0000000000 --- a/files/fr/web/api/element/mouseleave_event/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: 'Element : évènement mouseleave' -slug: Web/API/Element/mouseleave_event -tags: - - API - - DOM - - Element - - Event - - Reference - - mouseleave -translation_of: Web/API/Element/mouseleave_event ---- -

{{APIRef}}

- -

L'évènement mouseleave est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}
- -

mouseleave et {{event('mouseout')}} se ressemblent mais mouseleave ne remonte pas dans le DOM tandis que mouseout remonte. mouseleave est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que mouseout est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).

- - -

Un évènement mouseleave est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <div> le plus haut dans la hiérarchie.

- - -

Un seul évènement mouseout est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.

- -

Exemples

- -

Voir la documentation de mouseout pour un exemple sur les différences entre mouseout et mouseleave.

- -

Ici, on utilise l'évènement mouseenter pour modifier la bordure d'un élément div lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements mouseenter et mouseleave.

- -

HTML

- -
<div id='mouseTarget'>
- <ul id="unorderedList">
-  <li>Pas encore d'évènement !</li>
- </ul>
-</div>
- -

CSS

- -

On met le div en forme afin de le rendre plus visible.

- -
#mouseTarget {
-  box-sizing: border-box;
-  width:15rem;
-  border:1px solid #333;
-}
- -

JavaScript

- -
var enterEventCount = 0;
-var leaveEventCount = 0;
-const mouseTarget = document.getElementById('mouseTarget');
-const unorderedList = document.getElementById('unorderedList');
-
-mouseTarget.addEventListener('mouseenter', e => {
-  mouseTarget.style.border = '5px dotted orange';
-  enterEventCount++;
-  addListItem("Voici le nombre d'évènements mouseenter : " + enterEventCount + ".");
-});
-
-mouseTarget.addEventListener('mouseleave', e => {
-  mouseTarget.style.border = '1px solid #333';
-  leaveEventCount++;
-  addListItem("Voici le nombre d'évènements mouseleave : " + leaveEventCount + ".");
-});
-
-function addListItem(text) {
-  //  On crée un noeud texte avec le texte passé en argument
-  var newTextNode = document.createTextNode(text);
-
-  // On crée un nouvel élément li
-  var newListItem = document.createElement("li");
-
-  // On ajoute le noeud texte à l'élément li
-  newListItem.appendChild(newTextNode);
-
-  // On ajoute le nouvel élément à la liste
-  unorderedList.appendChild(newListItem);
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mouseleave_event/index.md b/files/fr/web/api/element/mouseleave_event/index.md new file mode 100644 index 0000000000..2c9ee0d534 --- /dev/null +++ b/files/fr/web/api/element/mouseleave_event/index.md @@ -0,0 +1,147 @@ +--- +title: 'Element : évènement mouseleave' +slug: Web/API/Element/mouseleave_event +tags: + - API + - DOM + - Element + - Event + - Reference + - mouseleave +translation_of: Web/API/Element/mouseleave_event +--- +

{{APIRef}}

+ +

L'évènement mouseleave est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}
+ +

mouseleave et {{event('mouseout')}} se ressemblent mais mouseleave ne remonte pas dans le DOM tandis que mouseout remonte. mouseleave est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que mouseout est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).

+ + +

Un évènement mouseleave est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <div> le plus haut dans la hiérarchie.

+ + +

Un seul évènement mouseout est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.

+ +

Exemples

+ +

Voir la documentation de mouseout pour un exemple sur les différences entre mouseout et mouseleave.

+ +

Ici, on utilise l'évènement mouseenter pour modifier la bordure d'un élément div lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements mouseenter et mouseleave.

+ +

HTML

+ +
<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>Pas encore d'évènement !</li>
+ </ul>
+</div>
+ +

CSS

+ +

On met le div en forme afin de le rendre plus visible.

+ +
#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}
+ +

JavaScript

+ +
var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e => {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem("Voici le nombre d'évènements mouseenter : " + enterEventCount + ".");
+});
+
+mouseTarget.addEventListener('mouseleave', e => {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem("Voici le nombre d'évènements mouseleave : " + leaveEventCount + ".");
+});
+
+function addListItem(text) {
+  //  On crée un noeud texte avec le texte passé en argument
+  var newTextNode = document.createTextNode(text);
+
+  // On crée un nouvel élément li
+  var newListItem = document.createElement("li");
+
+  // On ajoute le noeud texte à l'élément li
+  newListItem.appendChild(newTextNode);
+
+  // On ajoute le nouvel élément à la liste
+  unorderedList.appendChild(newListItem);
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mousemove_event/index.html b/files/fr/web/api/element/mousemove_event/index.html deleted file mode 100644 index d848446fb1..0000000000 --- a/files/fr/web/api/element/mousemove_event/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: 'Element : évènement mousemove' -slug: Web/API/Element/mousemove_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - events - - mousemove -translation_of: Web/API/Element/mousemove_event ---- -
{{APIRef}}
- -

L'évènement mousemove est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}
- -

Exemples

- -

Dans l'exemple suivant, on utilise les évènements mousedown, mousemove et mouseup pour permettre à l'utilisateur de dessiner sur un canevas HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).

- -

Lors du chargement de la page, les constantes myPics et context sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante rect permet de stocker les coordonnées relatives du canevas par rapport à la page.

- -

Le dessin commence quand l'évènement mousedown est déclenché. On stocke les coordonnées du pointeur dans les variables x et y puis on passe la variable isDrawing à true pour indiquer qu'un dessin est en cours.

- -

Lorsque le pointeur se déplace sur la page, l'évènement mousemove est déclenché. Si isDrawing vaut true, le gestionnaire d'évènement appelle la fonction drawLine() afin de dessiner une ligne entre le point de coordonnées x et y (stockées dans ces variables) et la position actuelle (N.B. les coordonnées x et y sont "corrigées" avec la constante rect pour tenir compte du décalage entre le canevas et la page).

- -

Lorsque la fonction drawLine() a fini son exécution, on ajuste les coordonnées courante en les stockant dans x et y.

- -

Lorsque l'évènement mouseup est déclenché, on dessine le segment final du dessin en cours, on passe x et y à 0 puis on arrête le dessin en passant isDrawing à false.

- -

HTML

- -
<h1>Dessiner grâce aux évènements de souris</h1>
-<canvas id="myPics" width="560" height="360"></canvas>
-
- -

CSS

- -
canvas {
-  border: 1px solid black;
-  width: 560px;
-  height: 360px;
-}
- -

JavaScript

- -
// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
-// la souris entraîne un dessin sur le canevas
-let isDrawing = false;
-let x = 0;
-let y = 0;
-
-const myPics = document.getElementById('myPics');
-const context = myPics.getContext('2d');
-
-// On récupère le décalage du canevas en x et y par rapport aux bords
-// de la page
-const rect = myPics.getBoundingClientRect();
-
-// On ajoute les gestionnaires d'évènements pour mousedown, mousemove
-// et mouseup
-myPics.addEventListener('mousedown', e => {
-  x = e.clientX - rect.left;
-  y = e.clientY - rect.top;
-  isDrawing = true;
-});
-
-myPics.addEventListener('mousemove', e => {
-  if (isDrawing === true) {
-    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
-    x = e.clientX - rect.left;
-    y = e.clientY - rect.top;
-  }
-});
-
-window.addEventListener('mouseup', e => {
-  if (isDrawing === true) {
-    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
-    x = 0;
-    y = 0;
-    isDrawing = false;
-  }
-});
-
-function drawLine(context, x1, y1, x2, y2) {
-  context.beginPath();
-  context.strokeStyle = 'black';
-  context.lineWidth = 1;
-  context.moveTo(x1, y1);
-  context.lineTo(x2, y2);
-  context.stroke();
-  context.closePath();
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 640, 450)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mousemove_event/index.md b/files/fr/web/api/element/mousemove_event/index.md new file mode 100644 index 0000000000..d848446fb1 --- /dev/null +++ b/files/fr/web/api/element/mousemove_event/index.md @@ -0,0 +1,161 @@ +--- +title: 'Element : évènement mousemove' +slug: Web/API/Element/mousemove_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - events + - mousemove +translation_of: Web/API/Element/mousemove_event +--- +
{{APIRef}}
+ +

L'évènement mousemove est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}
+ +

Exemples

+ +

Dans l'exemple suivant, on utilise les évènements mousedown, mousemove et mouseup pour permettre à l'utilisateur de dessiner sur un canevas HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).

+ +

Lors du chargement de la page, les constantes myPics et context sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante rect permet de stocker les coordonnées relatives du canevas par rapport à la page.

+ +

Le dessin commence quand l'évènement mousedown est déclenché. On stocke les coordonnées du pointeur dans les variables x et y puis on passe la variable isDrawing à true pour indiquer qu'un dessin est en cours.

+ +

Lorsque le pointeur se déplace sur la page, l'évènement mousemove est déclenché. Si isDrawing vaut true, le gestionnaire d'évènement appelle la fonction drawLine() afin de dessiner une ligne entre le point de coordonnées x et y (stockées dans ces variables) et la position actuelle (N.B. les coordonnées x et y sont "corrigées" avec la constante rect pour tenir compte du décalage entre le canevas et la page).

+ +

Lorsque la fonction drawLine() a fini son exécution, on ajuste les coordonnées courante en les stockant dans x et y.

+ +

Lorsque l'évènement mouseup est déclenché, on dessine le segment final du dessin en cours, on passe x et y à 0 puis on arrête le dessin en passant isDrawing à false.

+ +

HTML

+ +
<h1>Dessiner grâce aux évènements de souris</h1>
+<canvas id="myPics" width="560" height="360"></canvas>
+
+ +

CSS

+ +
canvas {
+  border: 1px solid black;
+  width: 560px;
+  height: 360px;
+}
+ +

JavaScript

+ +
// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
+// la souris entraîne un dessin sur le canevas
+let isDrawing = false;
+let x = 0;
+let y = 0;
+
+const myPics = document.getElementById('myPics');
+const context = myPics.getContext('2d');
+
+// On récupère le décalage du canevas en x et y par rapport aux bords
+// de la page
+const rect = myPics.getBoundingClientRect();
+
+// On ajoute les gestionnaires d'évènements pour mousedown, mousemove
+// et mouseup
+myPics.addEventListener('mousedown', e => {
+  x = e.clientX - rect.left;
+  y = e.clientY - rect.top;
+  isDrawing = true;
+});
+
+myPics.addEventListener('mousemove', e => {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = e.clientX - rect.left;
+    y = e.clientY - rect.top;
+  }
+});
+
+window.addEventListener('mouseup', e => {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = 0;
+    y = 0;
+    isDrawing = false;
+  }
+});
+
+function drawLine(context, x1, y1, x2, y2) {
+  context.beginPath();
+  context.strokeStyle = 'black';
+  context.lineWidth = 1;
+  context.moveTo(x1, y1);
+  context.lineTo(x2, y2);
+  context.stroke();
+  context.closePath();
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 640, 450)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mouseout_event/index.html b/files/fr/web/api/element/mouseout_event/index.html deleted file mode 100644 index 0e44a3ae9f..0000000000 --- a/files/fr/web/api/element/mouseout_event/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: 'Element : évènement mouseout' -slug: Web/API/Element/mouseout_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - mouseout -translation_of: Web/API/Element/mouseout_event ---- -
{{APIRef}}
- -

L'évènement mouseout est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils. mouseout est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènements{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}
- -

Exemples

- -

Dans l'exemple suivant, on illustre la différence entre mouseout et mouseleave. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <ul>. mouseout est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.

- -

En essayant cet exemple, vous pourrez voir que mouseout est envoyé aux éléments individuels de la liste tandis que mouseleave est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.

- -

HTML

- -
<ul id="test">
-  <li>élément 1</li>
-  <li>élément 2</li>
-  <li>élément 3</li>
-</ul>
-
- -

JavaScript

- -
let test = document.getElementById("test");
-
-// On affiche la liste en violet lorsque le curseur quitte
-// l'élément <ul>
-test.addEventListener("mouseleave", function( event ) {
-  // on cible la cible de mouseleave
-  event.target.style.color = "purple";
-
-  // on réinitialise la couleur après quelques instants
-  setTimeout(function() {
-    event.target.style.color = "";
-  }, 1000);
-}, false);
-
-// On affiche les éléments <li> en orange lorsque la souris
-// les quitte
-test.addEventListener("mouseout", function( event ) {
-  // on cible la cible de mouseout
-  event.target.style.color = "orange";
-
- // on réinitialise la couleur après quelques instants
-  setTimeout(function() {
-    event.target.style.color = "";
-  }, 500);
-}, false);
- -

Résultat

- -

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

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mouseout_event/index.md b/files/fr/web/api/element/mouseout_event/index.md new file mode 100644 index 0000000000..0e44a3ae9f --- /dev/null +++ b/files/fr/web/api/element/mouseout_event/index.md @@ -0,0 +1,125 @@ +--- +title: 'Element : évènement mouseout' +slug: Web/API/Element/mouseout_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - mouseout +translation_of: Web/API/Element/mouseout_event +--- +
{{APIRef}}
+ +

L'évènement mouseout est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils. mouseout est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènements{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}
+ +

Exemples

+ +

Dans l'exemple suivant, on illustre la différence entre mouseout et mouseleave. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <ul>. mouseout est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.

+ +

En essayant cet exemple, vous pourrez voir que mouseout est envoyé aux éléments individuels de la liste tandis que mouseleave est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.

+ +

HTML

+ +
<ul id="test">
+  <li>élément 1</li>
+  <li>élément 2</li>
+  <li>élément 3</li>
+</ul>
+
+ +

JavaScript

+ +
let test = document.getElementById("test");
+
+// On affiche la liste en violet lorsque le curseur quitte
+// l'élément <ul>
+test.addEventListener("mouseleave", function( event ) {
+  // on cible la cible de mouseleave
+  event.target.style.color = "purple";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 1000);
+}, false);
+
+// On affiche les éléments <li> en orange lorsque la souris
+// les quitte
+test.addEventListener("mouseout", function( event ) {
+  // on cible la cible de mouseout
+  event.target.style.color = "orange";
+
+ // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mouseover_event/index.html b/files/fr/web/api/element/mouseover_event/index.html deleted file mode 100644 index 368e39ddfe..0000000000 --- a/files/fr/web/api/element/mouseover_event/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: 'Element : évènement mouseover' -slug: Web/API/Element/mouseover_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - mouseover -translation_of: Web/API/Element/mouseover_event ---- -
{{APIRef}}
- -

L'évènement mouseover est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}
- -

Exemples

- -

L'exemple suivant illustre la différence entre les évènements mouseover et mouseenter.

- -

HTML

- -
<ul id="test">
-  <li>item 1</li>
-  <li>item 2</li>
-  <li>item 3</li>
-</ul>
-
- -

JavaScript

- -
let test = document.getElementById("test");
-
-// Ce gestionnaire ne sera exécuté qu'une fois
-// lorsque le curseur se déplace sur la liste
-test.addEventListener("mouseenter", function( event ) {
-  // on met l'accent sur la cible de mouseenter
-  event.target.style.color = "purple";
-
-  // on réinitialise la couleur après quelques instants
-  setTimeout(function() {
-    event.target.style.color = "";
-  }, 500);
-}, false);
-
-// Ce gestionnaire sera exécuté à chaque fois que le curseur
-// se déplacera sur un autre élément de la liste
-test.addEventListener("mouseover", function( event ) {
-  // on met l'accent sur la cible de mouseover
-  event.target.style.color = "orange";
-
-  // on réinitialise la couleur après quelques instants
-  setTimeout(function() {
-    event.target.style.color = "";
-  }, 500);
-}, false);
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mouseover_event/index.md b/files/fr/web/api/element/mouseover_event/index.md new file mode 100644 index 0000000000..368e39ddfe --- /dev/null +++ b/files/fr/web/api/element/mouseover_event/index.md @@ -0,0 +1,123 @@ +--- +title: 'Element : évènement mouseover' +slug: Web/API/Element/mouseover_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - mouseover +translation_of: Web/API/Element/mouseover_event +--- +
{{APIRef}}
+ +

L'évènement mouseover est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}
+ +

Exemples

+ +

L'exemple suivant illustre la différence entre les évènements mouseover et mouseenter.

+ +

HTML

+ +
<ul id="test">
+  <li>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+</ul>
+
+ +

JavaScript

+ +
let test = document.getElementById("test");
+
+// Ce gestionnaire ne sera exécuté qu'une fois
+// lorsque le curseur se déplace sur la liste
+test.addEventListener("mouseenter", function( event ) {
+  // on met l'accent sur la cible de mouseenter
+  event.target.style.color = "purple";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+
+// Ce gestionnaire sera exécuté à chaque fois que le curseur
+// se déplacera sur un autre élément de la liste
+test.addEventListener("mouseover", function( event ) {
+  // on met l'accent sur la cible de mouseover
+  event.target.style.color = "orange";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mouseup_event/index.html b/files/fr/web/api/element/mouseup_event/index.html deleted file mode 100644 index 8dcab880a9..0000000000 --- a/files/fr/web/api/element/mouseup_event/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 'Element : évènement mouseup' -slug: Web/API/Element/mouseup_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - events - - mouseup -translation_of: Web/API/Element/mouseup_event ---- -
{{APIRef}}
- -

L'évènement mouseup est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.

- -

Les évènements mouseup peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on appuie sur un bouton.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}
- -

Exemples

- -

{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mouseup_event/index.md b/files/fr/web/api/element/mouseup_event/index.md new file mode 100644 index 0000000000..8dcab880a9 --- /dev/null +++ b/files/fr/web/api/element/mouseup_event/index.md @@ -0,0 +1,85 @@ +--- +title: 'Element : évènement mouseup' +slug: Web/API/Element/mouseup_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - events + - mouseup +translation_of: Web/API/Element/mouseup_event +--- +
{{APIRef}}
+ +

L'évènement mouseup est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.

+ +

Les évènements mouseup peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on appuie sur un bouton.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}
+ +

Exemples

+ +

{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/namespaceuri/index.html b/files/fr/web/api/element/namespaceuri/index.html deleted file mode 100644 index 998f6a875e..0000000000 --- a/files/fr/web/api/element/namespaceuri/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Element.namespaceURI -slug: Web/API/Element/namespaceURI -tags: - - API - - DOM - - Element - - Espace de noms - - Propriétés - - URI -translation_of: Web/API/Element/namespaceURI ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule Element.namespaceURI renvoie l'URI d'espace de noms de l'élément ou null si l'élément n'est pas dans un espace de nom.

- -
-

Note : Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.

-
- -

Syntaxe

- -
namespace = element.namespaceURI
- -

Exemple

- -

Dans cet extrait, un élément est examiné pour son {{domxref("localName")}} et son namespaceURI. Si le namespaceURI renvoie l'espace de noms XUL et le localName retourne "browser" (navigateur), alors le noeud est compris comme étant un <browser/> XUL.

- -
if (element.localName == "browser" &&
-    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
-  // c'est un navigateur XUL
-}
- -

Notes

- -

Ce n'est pas une valeur calculée qui est le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un nœud est fixé au moment de la création du nœud.

- -

Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est null. Dans les versions postérieures, en conformité avec HTML5, c'est http://www.w3.org/1999/xhtml comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}

- -

Vous pouvez créer un élément avec l'namespaceURI spécifié en utilisant la méthode DOM niveau 2 document.createElementNS.

- -

Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un élément particulier, ne peut pas être modifié.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}{{Spec2("DOM4")}}Définition initiale
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/namespaceuri/index.md b/files/fr/web/api/element/namespaceuri/index.md new file mode 100644 index 0000000000..998f6a875e --- /dev/null +++ b/files/fr/web/api/element/namespaceuri/index.md @@ -0,0 +1,74 @@ +--- +title: Element.namespaceURI +slug: Web/API/Element/namespaceURI +tags: + - API + - DOM + - Element + - Espace de noms + - Propriétés + - URI +translation_of: Web/API/Element/namespaceURI +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule Element.namespaceURI renvoie l'URI d'espace de noms de l'élément ou null si l'élément n'est pas dans un espace de nom.

+ +
+

Note : Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.

+
+ +

Syntaxe

+ +
namespace = element.namespaceURI
+ +

Exemple

+ +

Dans cet extrait, un élément est examiné pour son {{domxref("localName")}} et son namespaceURI. Si le namespaceURI renvoie l'espace de noms XUL et le localName retourne "browser" (navigateur), alors le noeud est compris comme étant un <browser/> XUL.

+ +
if (element.localName == "browser" &&
+    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // c'est un navigateur XUL
+}
+ +

Notes

+ +

Ce n'est pas une valeur calculée qui est le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un nœud est fixé au moment de la création du nœud.

+ +

Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est null. Dans les versions postérieures, en conformité avec HTML5, c'est http://www.w3.org/1999/xhtml comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}

+ +

Vous pouvez créer un élément avec l'namespaceURI spécifié en utilisant la méthode DOM niveau 2 document.createElementNS.

+ +

Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un élément particulier, ne peut pas être modifié.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}{{Spec2("DOM4")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/outerhtml/index.html b/files/fr/web/api/element/outerhtml/index.html deleted file mode 100644 index 243fac13e5..0000000000 --- a/files/fr/web/api/element/outerhtml/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Element.outerHTML -slug: Web/API/Element/outerHTML -tags: - - API - - DOM - - Privacy - - Propriétés -translation_of: Web/API/Element/outerHTML ---- -
{{APIRef("DOM")}}
- -

L'attribut outerHTML de l'interface DOM {{domxref("element")}} récupère le fragment HTML sérialisé décrivant l'élément ainsi que ses descendants. Il peut aussi être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.

- -

Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété {{domxref ("Element.innerHTML", "innerHTML")}}.

- -

Syntaxe

- -
var content = element.outerHTML;
-
-element.outerHTML = htmlString;
- -

Valeur

- -

La lecture de la valeur de outerHTML renvoie 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

- -
-
SyntaxError
-
Une tentative a été faite de définir la valeur de outerHTML en utilisant une chaîne qui n'est pas correctement formée HTML.
-
NoModificationAllowedError
-
Une tentative a été faite de définir  outerHTML  sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.
-
- -

Exemples

- -

Récupérer la valeur de la propriété outerHTML d'un élément :

- -
// HTML:
-// <div id="d"><p>Contenu</p><p>Plus Complexe</p></div>
-
-d = document.getElementById("d");
-dump(d.outerHTML);
-
-// la chaîne '<div id="d"><p>Contenu</p><p>Plus Complexe</p></div>'
-// est affichée dans la fenêtre console
-
- -

Remplacer un noeud en modifiant la propriété outerHTML :

- -
// HTML:
-// <div id="container"><div id="d">Ceci est un div.</div></div>
-
-container = document.getElementById("container");
-d = document.getElementById("d");
-console.log(container.firstChild.nodeName); // affiche "DIV"
-
-d.outerHTML = "<p>Ce paragraphe remplace le div original.</p>";
-console.log(container.firstChild.nodeName); // affiche "P"
-
-// Le div #d ne fait plus partie de l'arbre décrivant le document,
-// le nouveau paragraphe l'ayant remplacé.
-
- -

Notes

- -

Si un élément n'a pas de noeud parent, définir sa propriété outerHTML ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :

- -
var div = document.createElement("div");
-div.outerHTML = "<div class=\"test\">test</div>";
-console.log(div.outerHTML); // output: "<div></div>"
- -

Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété outerHTML a été modifiée contiendra toujours une référence à l'élément initial :

- -
var p = document.getElementsByTagName("p")[0];
-console.log(p.nodeName); // affiche: "P"
-p.outerHTML = "<div>Ce div remplace un paragraph.</div>";
-console.log(p.nodeName); // toujours "P";
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/outerhtml/index.md b/files/fr/web/api/element/outerhtml/index.md new file mode 100644 index 0000000000..243fac13e5 --- /dev/null +++ b/files/fr/web/api/element/outerhtml/index.md @@ -0,0 +1,111 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +tags: + - API + - DOM + - Privacy + - Propriétés +translation_of: Web/API/Element/outerHTML +--- +
{{APIRef("DOM")}}
+ +

L'attribut outerHTML de l'interface DOM {{domxref("element")}} récupère le fragment HTML sérialisé décrivant l'élément ainsi que ses descendants. Il peut aussi être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.

+ +

Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété {{domxref ("Element.innerHTML", "innerHTML")}}.

+ +

Syntaxe

+ +
var content = element.outerHTML;
+
+element.outerHTML = htmlString;
+ +

Valeur

+ +

La lecture de la valeur de outerHTML renvoie 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

+ +
+
SyntaxError
+
Une tentative a été faite de définir la valeur de outerHTML en utilisant une chaîne qui n'est pas correctement formée HTML.
+
NoModificationAllowedError
+
Une tentative a été faite de définir  outerHTML  sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.
+
+ +

Exemples

+ +

Récupérer la valeur de la propriété outerHTML d'un élément :

+ +
// HTML:
+// <div id="d"><p>Contenu</p><p>Plus Complexe</p></div>
+
+d = document.getElementById("d");
+dump(d.outerHTML);
+
+// la chaîne '<div id="d"><p>Contenu</p><p>Plus Complexe</p></div>'
+// est affichée dans la fenêtre console
+
+ +

Remplacer un noeud en modifiant la propriété outerHTML :

+ +
// HTML:
+// <div id="container"><div id="d">Ceci est un div.</div></div>
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // affiche "DIV"
+
+d.outerHTML = "<p>Ce paragraphe remplace le div original.</p>";
+console.log(container.firstChild.nodeName); // affiche "P"
+
+// Le div #d ne fait plus partie de l'arbre décrivant le document,
+// le nouveau paragraphe l'ayant remplacé.
+
+ +

Notes

+ +

Si un élément n'a pas de noeud parent, définir sa propriété outerHTML ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :

+ +
var div = document.createElement("div");
+div.outerHTML = "<div class=\"test\">test</div>";
+console.log(div.outerHTML); // output: "<div></div>"
+ +

Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété outerHTML a été modifiée contiendra toujours une référence à l'élément initial :

+ +
var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // affiche: "P"
+p.outerHTML = "<div>Ce div remplace un paragraph.</div>";
+console.log(p.nodeName); // toujours "P";
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/prefix/index.html b/files/fr/web/api/element/prefix/index.html deleted file mode 100644 index 638e979793..0000000000 --- a/files/fr/web/api/element/prefix/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Element.prefix -slug: Web/API/Element/prefix -tags: - - API - - DOM - - Element - - Propriétés - - Préfixe -translation_of: Web/API/Element/prefix ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule Element.prefix renvoie le préfixe d'espace de noms de l'élément spécifié ou null si aucun préfixe n'est précisé.

- -
-

Note : Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.

-
- -

Syntaxe

- -
string = element.prefix
-
- -

Exemples

- -

Les logs "x" suivants à la console.

- -
<x:div onclick="console.log(this.prefix)"/>
-
- -

Notes

- -

Cela fonctionnera uniquement lorsqu'un analyseur connaissant l'espace de noms est utilisé, c'est-à-dire lorsqu'un document est servi avec un type XML MIME. Cela ne fonctionnera pas pour les documents HTML.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-element-prefix", "Element.prefix")}}{{Spec2("DOM4")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/prefix/index.md b/files/fr/web/api/element/prefix/index.md new file mode 100644 index 0000000000..638e979793 --- /dev/null +++ b/files/fr/web/api/element/prefix/index.md @@ -0,0 +1,66 @@ +--- +title: Element.prefix +slug: Web/API/Element/prefix +tags: + - API + - DOM + - Element + - Propriétés + - Préfixe +translation_of: Web/API/Element/prefix +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule Element.prefix renvoie le préfixe d'espace de noms de l'élément spécifié ou null si aucun préfixe n'est précisé.

+ +
+

Note : Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.

+
+ +

Syntaxe

+ +
string = element.prefix
+
+ +

Exemples

+ +

Les logs "x" suivants à la console.

+ +
<x:div onclick="console.log(this.prefix)"/>
+
+ +

Notes

+ +

Cela fonctionnera uniquement lorsqu'un analyseur connaissant l'espace de noms est utilisé, c'est-à-dire lorsqu'un document est servi avec un type XML MIME. Cela ne fonctionnera pas pour les documents HTML.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-element-prefix", "Element.prefix")}}{{Spec2("DOM4")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/queryselector/index.html b/files/fr/web/api/element/queryselector/index.html deleted file mode 100644 index 44325a3547..0000000000 --- a/files/fr/web/api/element/queryselector/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Element.querySelector() -slug: Web/API/Element/querySelector -tags: - - API - - CSS - - CSS Selectors - - DOM - - Element - - Elements - - Finding Elements - - Locating Elements - - Method - - Reference - - Searching Elements - - Selecting Elements - - Selectors - - querySelector -translation_of: Web/API/Element/querySelector ---- -
{{APIRef("DOM")}}
- -

La méthode querySelector() de l'interface Element renvoie le premier élément descendant de l'élément sur lequel elle est invoquée qui correspond au groupe de sélecteurs spécifié.

- -

Syntaxe

- -
element = baseElement.querySelector(selectors);
- -

Paramètres

- -
-
selectors
-
est un groupe de sélecteurs à faire correspondre aux éléments descendants du Element baseElement ; cette syntaxe CSS doit être valide ou une exception SyntaxError se produit. Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.
-
- -

Valeur retournée

- -

Le premier élément descendant de baseElement qui correspond au groupe de selectors « sélecteurs » spécifié. La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris baseElement et ses descendants ; En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels. Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de baseElement. La première correspondance de ces éléments restants est renvoyée par la méthode querySelector().

- -

Si aucune correspondance n'est trouvée, la valeur retournée est null.

- -

Exceptions

- -
-
SyntaxError
-
Les selectors spécifiés sont invalides.
-
- -

Exemple

- -

Dans ce premier exemple, est retourné le premier élément <style> dans le corps du document HTML qui, soit n'a pas de type, soit a le type text/css:

- -
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
- -

La hiérarchie entière compte

- -

Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des selectors, de sorte que les niveaux en dehors du baseElement spécifié sont toujours pris en compte lors de la recherche des correspondances.

- -

HTML

- -
<div>
-  <h5>Original content</h5>
-  <p>
-    inside paragraph
-    <span>inside span</span>
-    inside paragraph
-  </p>
-</div>
-<div>
-  <h5>Output</h5>
-  <div id="output"></div>
-</div>
- -

JavaScript

- -
var baseElement = document.querySelector("p");
-document.getElementById("output").innerHTML = (baseElement.querySelector("div span").innerHTML);
- -

Résultat

- -

Le résultat ressemble à ceci :

- -
{{EmbedLiveSample('the_entire_hierarchy_counts', '', 200)}}
- -

Plus d'exemples

- -

Voir Document.querySelector() pour des exemples supplémentaires du format approprié pour les sélecteurs.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}{{Spec2('DOM WHATWG')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/queryselector/index.md b/files/fr/web/api/element/queryselector/index.md new file mode 100644 index 0000000000..44325a3547 --- /dev/null +++ b/files/fr/web/api/element/queryselector/index.md @@ -0,0 +1,134 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +tags: + - API + - CSS + - CSS Selectors + - DOM + - Element + - Elements + - Finding Elements + - Locating Elements + - Method + - Reference + - Searching Elements + - Selecting Elements + - Selectors + - querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +

La méthode querySelector() de l'interface Element renvoie le premier élément descendant de l'élément sur lequel elle est invoquée qui correspond au groupe de sélecteurs spécifié.

+ +

Syntaxe

+ +
element = baseElement.querySelector(selectors);
+ +

Paramètres

+ +
+
selectors
+
est un groupe de sélecteurs à faire correspondre aux éléments descendants du Element baseElement ; cette syntaxe CSS doit être valide ou une exception SyntaxError se produit. Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.
+
+ +

Valeur retournée

+ +

Le premier élément descendant de baseElement qui correspond au groupe de selectors « sélecteurs » spécifié. La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris baseElement et ses descendants ; En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels. Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de baseElement. La première correspondance de ces éléments restants est renvoyée par la méthode querySelector().

+ +

Si aucune correspondance n'est trouvée, la valeur retournée est null.

+ +

Exceptions

+ +
+
SyntaxError
+
Les selectors spécifiés sont invalides.
+
+ +

Exemple

+ +

Dans ce premier exemple, est retourné le premier élément <style> dans le corps du document HTML qui, soit n'a pas de type, soit a le type text/css:

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+ +

La hiérarchie entière compte

+ +

Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des selectors, de sorte que les niveaux en dehors du baseElement spécifié sont toujours pris en compte lors de la recherche des correspondances.

+ +

HTML

+ +
<div>
+  <h5>Original content</h5>
+  <p>
+    inside paragraph
+    <span>inside span</span>
+    inside paragraph
+  </p>
+</div>
+<div>
+  <h5>Output</h5>
+  <div id="output"></div>
+</div>
+ +

JavaScript

+ +
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML = (baseElement.querySelector("div span").innerHTML);
+ +

Résultat

+ +

Le résultat ressemble à ceci :

+ +
{{EmbedLiveSample('the_entire_hierarchy_counts', '', 200)}}
+ +

Plus d'exemples

+ +

Voir Document.querySelector() pour des exemples supplémentaires du format approprié pour les sélecteurs.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}{{Spec2('DOM WHATWG')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/queryselectorall/index.html b/files/fr/web/api/element/queryselectorall/index.html deleted file mode 100644 index cab55d02fe..0000000000 --- a/files/fr/web/api/element/queryselectorall/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Element.querySelectorAll() -slug: Web/API/Element/querySelectorAll -tags: - - API - - DOM - - Element - - Méthode - - Reference -translation_of: Web/API/Element/querySelectorAll ---- -
{{APIRef("DOM")}}
- -

La méthode  querySelectorAll() de {{domxref("Element")}} retourne une  {{domxref("NodeList")}} non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée.

- -
-

Note : La définition de cet API a été déplacée vers l'interface {{domxref("ParentNode")}} .

-
- -

Syntaxe

- -
elementList = baseElement.querySelectorAll(selectors);
-
- -

Paramètres

- -
-
selectors 
-
une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les sélecteurs CSS ; si ce n'est pas le cas, une exception SyntaxError est levée. Voir Localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.
-
- -
-

Note : Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères.

-
- -

Valeur retournée

- -

Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.

- -
-

Note : Si le selectors spécifié inclus un pseudo-element CSS, la liste renvoyée est toujours vide.

-
- -

Exception

- -
-
SyntaxError
-
La syntaxe de la chaîne du selectors spécifié n'est pas correcte.
-
- -

Exemples

- -

Obtention d'une liste de correspondances

- -

Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément "myBox" :

- -
var matches = myBox.querySelectorAll("p");
- -

Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans "myBox"  avec une classe  "note" ou  "alert" :

- -
var matches = myBox.querySelectorAll("div.note, div.alert");
- -

Ici, nous obtenons une liste d'éléments p du document, dont le parent immédiat est un {{domxref("div")}}  qui a la classe 'highlighted' et qui sont inclus dans un conteneur dont l'ID est "test" :

- -
var container = document.querySelector("#test");
-var matches = container.querySelectorAll("div.highlighted > p");
- -

Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé 'data-src':

- -
var matches = document.querySelectorAll("iframe[data-src]");
- -

Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est "userlist" et qui ont un attribut "data-active" dont la valeur est "1":

- -
var container = document.querySelector("#userlist");
-var matches = container.querySelectorAll("li[data-active=1]");
- -

Accès aux correspondances

- -

Une fois que la {{domxref("NodeList")}} des éléments correspondants est retournée, vous pouvez l'examiner pour n'importe quel tableau (array). Si le tableau est vide (sa propriété length est 0), alors aucune correspondance n'a été trouvée.

- -

Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :

- -
var highlightedItems = userList.querySelectorAll(".highlighted");
-
-highlightedItems.forEach(function(userItem) {
-  deleteUser(userItem);
-});
- -

Notes d'utilisation

- -

queryselectorAll se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.

- -

HTML

- -

Considérons ce code HTML, avec ses trois blocs {{HTMLElement ("div")}} imbriqués.

- -
<div class="outer">
-  <div class="select">
-    <div class="inner">
-    </div>
-  </div>
-</div>
- -

JavaScript

- -
var select = document.querySelector('.select');
-var inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1, pas 0!
- -

Dans cet exemple, en sélectionnant ".outer .inner" dans le contexte <div> avec la classe "select", l'élément avec la classe ".inner" est toujours trouvé, même si .outer n'est pas un descendant de l'élément sur lequel la recherche est effectuée (".select"). Par défaut, querySelectorAll() vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.

- -

La pseudo-classe {{cssxref (": scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :

- -
var select = document.querySelector('.select');
-var inner = select.querySelectorAll(':scope .outer .inner');
-inner.length; // 0
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}norme actuelle
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Pas de changement
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Définition initiale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition originale
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - - diff --git a/files/fr/web/api/element/queryselectorall/index.md b/files/fr/web/api/element/queryselectorall/index.md new file mode 100644 index 0000000000..cab55d02fe --- /dev/null +++ b/files/fr/web/api/element/queryselectorall/index.md @@ -0,0 +1,166 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +tags: + - API + - DOM + - Element + - Méthode + - Reference +translation_of: Web/API/Element/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

La méthode  querySelectorAll() de {{domxref("Element")}} retourne une  {{domxref("NodeList")}} non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée.

+ +
+

Note : La définition de cet API a été déplacée vers l'interface {{domxref("ParentNode")}} .

+
+ +

Syntaxe

+ +
elementList = baseElement.querySelectorAll(selectors);
+
+ +

Paramètres

+ +
+
selectors 
+
une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les sélecteurs CSS ; si ce n'est pas le cas, une exception SyntaxError est levée. Voir Localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.
+
+ +
+

Note : Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères.

+
+ +

Valeur retournée

+ +

Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.

+ +
+

Note : Si le selectors spécifié inclus un pseudo-element CSS, la liste renvoyée est toujours vide.

+
+ +

Exception

+ +
+
SyntaxError
+
La syntaxe de la chaîne du selectors spécifié n'est pas correcte.
+
+ +

Exemples

+ +

Obtention d'une liste de correspondances

+ +

Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément "myBox" :

+ +
var matches = myBox.querySelectorAll("p");
+ +

Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans "myBox"  avec une classe  "note" ou  "alert" :

+ +
var matches = myBox.querySelectorAll("div.note, div.alert");
+ +

Ici, nous obtenons une liste d'éléments p du document, dont le parent immédiat est un {{domxref("div")}}  qui a la classe 'highlighted' et qui sont inclus dans un conteneur dont l'ID est "test" :

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé 'data-src':

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est "userlist" et qui ont un attribut "data-active" dont la valeur est "1":

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active=1]");
+ +

Accès aux correspondances

+ +

Une fois que la {{domxref("NodeList")}} des éléments correspondants est retournée, vous pouvez l'examiner pour n'importe quel tableau (array). Si le tableau est vide (sa propriété length est 0), alors aucune correspondance n'a été trouvée.

+ +

Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Notes d'utilisation

+ +

queryselectorAll se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.

+ +

HTML

+ +

Considérons ce code HTML, avec ses trois blocs {{HTMLElement ("div")}} imbriqués.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, pas 0!
+ +

Dans cet exemple, en sélectionnant ".outer .inner" dans le contexte <div> avec la classe "select", l'élément avec la classe ".inner" est toujours trouvé, même si .outer n'est pas un descendant de l'élément sur lequel la recherche est effectuée (".select"). Par défaut, querySelectorAll() vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.

+ +

La pseudo-classe {{cssxref (": scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}norme actuelle
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Pas de changement
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Définition initiale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition originale
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + + diff --git a/files/fr/web/api/element/releasepointercapture/index.html b/files/fr/web/api/element/releasepointercapture/index.html deleted file mode 100644 index 22be0475ac..0000000000 --- a/files/fr/web/api/element/releasepointercapture/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Element.releasePointerCapture() -slug: Web/API/Element/releasePointerCapture -tags: - - API - - DOM - - Element - - Méthodes - - Pointeur -translation_of: Web/API/Element/releasePointerCapture ---- -

{{APIRef("DOM")}}

- -

Relâche (arrête) la capture de pointeur précédemment définie pour un pointer ({{domxref("PointerEvent")}}) spécifique.

- -

Voir la méthode {{domxref("Element.setPointerCapture","Element.setPointerCapture()")}} pour une description de pointer capture et la façon de le définir pour un élément particulier.

- -

Syntaxe

- -
targetElement.releasePointerCapture(pointerId);
-
- -

Arguments

- -
-
pointerId
-
L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","pointer event")}}.
-
- -

Valeur retournée

- -

Si pointerId ne correspond à aucun pointeur actif, cette méthode renvoie void (vide) et déclenche une {{domxref("DOMException")}} avec le nom InvalidPointerId.

- -

Exemple

- -
<html>
-<script>
-function downHandler(ev) {
- var el=document.getElementById("target");
- // L'élément "target" va recevoir/capturer d'autres évènements
- el.setPointerCapture(ev.pointerId);
-}
-function cancelHandler(ev) {
- var el=document.getElementById("target");
- // Relâche la capture du pointeur
- el.releasePointerCapture(ev.pointerId);
-}
-function init() {
- var el=document.getElementById("target");
- // Enregistre les gestionnaires du pointeur
- el.onpointerdown = downHandler;
- el.onpointercancel = cancelHandler;
-}
-</script>
-<body onload="init();">
-<div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Pointer Events 2','#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}{{Spec2('Pointer Events 2')}}Version non stable.
{{SpecName('Pointer Events', '#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}{{Spec2('Pointer Events')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/releasepointercapture/index.md b/files/fr/web/api/element/releasepointercapture/index.md new file mode 100644 index 0000000000..22be0475ac --- /dev/null +++ b/files/fr/web/api/element/releasepointercapture/index.md @@ -0,0 +1,92 @@ +--- +title: Element.releasePointerCapture() +slug: Web/API/Element/releasePointerCapture +tags: + - API + - DOM + - Element + - Méthodes + - Pointeur +translation_of: Web/API/Element/releasePointerCapture +--- +

{{APIRef("DOM")}}

+ +

Relâche (arrête) la capture de pointeur précédemment définie pour un pointer ({{domxref("PointerEvent")}}) spécifique.

+ +

Voir la méthode {{domxref("Element.setPointerCapture","Element.setPointerCapture()")}} pour une description de pointer capture et la façon de le définir pour un élément particulier.

+ +

Syntaxe

+ +
targetElement.releasePointerCapture(pointerId);
+
+ +

Arguments

+ +
+
pointerId
+
L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","pointer event")}}.
+
+ +

Valeur retournée

+ +

Si pointerId ne correspond à aucun pointeur actif, cette méthode renvoie void (vide) et déclenche une {{domxref("DOMException")}} avec le nom InvalidPointerId.

+ +

Exemple

+ +
<html>
+<script>
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ // L'élément "target" va recevoir/capturer d'autres évènements
+ el.setPointerCapture(ev.pointerId);
+}
+function cancelHandler(ev) {
+ var el=document.getElementById("target");
+ // Relâche la capture du pointeur
+ el.releasePointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ // Enregistre les gestionnaires du pointeur
+ el.onpointerdown = downHandler;
+ el.onpointercancel = cancelHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Pointer Events 2','#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}{{Spec2('Pointer Events 2')}}Version non stable.
{{SpecName('Pointer Events', '#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}{{Spec2('Pointer Events')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/removeattribute/index.html b/files/fr/web/api/element/removeattribute/index.html deleted file mode 100644 index b27f3eb813..0000000000 --- a/files/fr/web/api/element/removeattribute/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: element.removeAttribute -slug: Web/API/Element/removeAttribute -tags: - - API - - Attributs - - DOM - - Element - - Méthodes - - Suppression -translation_of: Web/API/Element/removeAttribute ---- -

{{ APIRef("DOM") }}

- -

removeAttribute supprime un attribut de l'élément spécifié.

- -

Syntaxe

- -
element.removeAttribute(nomAttribut);
-
- - - -

Exemple

- -
// avant : <div id="div1" align="left" width="200">
-document.getElementById("div1").removeAttribute("align");
-// maintenant : <div id="div1" width="200">
-
- -

Notes

- -

Il vaut mieux utiliser removeAttribute plutôt que de définir la valeur de l'attribut à null avec setAttribute.

- -

Tenter d'effacer un attribut que l'élément ne possède pas ne provoque aucune exception.

- -

removeAttribute ne renvoie rien, donc vous ne pouvez supprimer plusieurs attributs par enchaînement de cette méthode.

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - diff --git a/files/fr/web/api/element/removeattribute/index.md b/files/fr/web/api/element/removeattribute/index.md new file mode 100644 index 0000000000..b27f3eb813 --- /dev/null +++ b/files/fr/web/api/element/removeattribute/index.md @@ -0,0 +1,47 @@ +--- +title: element.removeAttribute +slug: Web/API/Element/removeAttribute +tags: + - API + - Attributs + - DOM + - Element + - Méthodes + - Suppression +translation_of: Web/API/Element/removeAttribute +--- +

{{ APIRef("DOM") }}

+ +

removeAttribute supprime un attribut de l'élément spécifié.

+ +

Syntaxe

+ +
element.removeAttribute(nomAttribut);
+
+ + + +

Exemple

+ +
// avant : <div id="div1" align="left" width="200">
+document.getElementById("div1").removeAttribute("align");
+// maintenant : <div id="div1" width="200">
+
+ +

Notes

+ +

Il vaut mieux utiliser removeAttribute plutôt que de définir la valeur de l'attribut à null avec setAttribute.

+ +

Tenter d'effacer un attribut que l'élément ne possède pas ne provoque aucune exception.

+ +

removeAttribute ne renvoie rien, donc vous ne pouvez supprimer plusieurs attributs par enchaînement de cette méthode.

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/removeattributenode/index.html b/files/fr/web/api/element/removeattributenode/index.html deleted file mode 100644 index 4ecd896414..0000000000 --- a/files/fr/web/api/element/removeattributenode/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: element.removeAttributeNode -slug: Web/API/Element/removeAttributeNode -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/removeAttributeNode ---- -

{{ APIRef("DOM") }}

- -

removeAttributeNode enlève l'attribut spécifié de l'élément courant.

- -

Syntaxe

- -
removedAttr =element.removeAttributeNode(attributeNode)
-
- - - -

Exemple

- -
// <div id="top" align="center" />
-var d = document.getElementById("top");
-var d_align = d.getAttributeNode("align");
-d.removeAttributeNode(d_align);
-// align est maintenant supprimé : <div id="top" />
- -

Notes

- -

Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.

- -

Il n'y a pas de removeAttributeNodeNS (contrairement à la paire setAttributeNode et setAttributeNodeNS pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant),  removeAttributeNode n'a pas cette exigence.  removeAttributeNode peut supprimer des attributs, qu'ils soient d'espace de noms ou pas.

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - diff --git a/files/fr/web/api/element/removeattributenode/index.md b/files/fr/web/api/element/removeattributenode/index.md new file mode 100644 index 0000000000..4ecd896414 --- /dev/null +++ b/files/fr/web/api/element/removeattributenode/index.md @@ -0,0 +1,45 @@ +--- +title: element.removeAttributeNode +slug: Web/API/Element/removeAttributeNode +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/removeAttributeNode +--- +

{{ APIRef("DOM") }}

+ +

removeAttributeNode enlève l'attribut spécifié de l'élément courant.

+ +

Syntaxe

+ +
removedAttr =element.removeAttributeNode(attributeNode)
+
+ + + +

Exemple

+ +
// <div id="top" align="center" />
+var d = document.getElementById("top");
+var d_align = d.getAttributeNode("align");
+d.removeAttributeNode(d_align);
+// align est maintenant supprimé : <div id="top" />
+ +

Notes

+ +

Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.

+ +

Il n'y a pas de removeAttributeNodeNS (contrairement à la paire setAttributeNode et setAttributeNodeNS pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant),  removeAttributeNode n'a pas cette exigence.  removeAttributeNode peut supprimer des attributs, qu'ils soient d'espace de noms ou pas.

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/removeattributens/index.html b/files/fr/web/api/element/removeattributens/index.html deleted file mode 100644 index 457c552bb9..0000000000 --- a/files/fr/web/api/element/removeattributens/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: element.removeAttributeNS -slug: Web/API/Element/removeAttributeNS -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/removeAttributeNS ---- -

{{ APIRef("DOM") }}

- -

removeAttributeNS supprime l'attribut spécifié d'un élément.

- -

Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.

- -

Syntaxe

- -
element.removeAttributeNS(namespace,attrName);
-
- - - -

Exemple

- -
// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
-//      special:specialAlign="utterleft" width="200px" />
-d = document.getElementById("div1");
-d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
-// l'élément est devenu : <div id="div1" width="200px" />
-
- -

Notes

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - diff --git a/files/fr/web/api/element/removeattributens/index.md b/files/fr/web/api/element/removeattributens/index.md new file mode 100644 index 0000000000..457c552bb9 --- /dev/null +++ b/files/fr/web/api/element/removeattributens/index.md @@ -0,0 +1,44 @@ +--- +title: element.removeAttributeNS +slug: Web/API/Element/removeAttributeNS +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/removeAttributeNS +--- +

{{ APIRef("DOM") }}

+ +

removeAttributeNS supprime l'attribut spécifié d'un élément.

+ +

Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.

+ +

Syntaxe

+ +
element.removeAttributeNS(namespace,attrName);
+
+ + + +

Exemple

+ +
// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
+//      special:specialAlign="utterleft" width="200px" />
+d = document.getElementById("div1");
+d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
+// l'élément est devenu : <div id="div1" width="200px" />
+
+ +

Notes

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/requestfullscreen/index.html b/files/fr/web/api/element/requestfullscreen/index.html deleted file mode 100644 index ad1dbf6456..0000000000 --- a/files/fr/web/api/element/requestfullscreen/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Element.requestFullscreen() -slug: Web/API/Element/requestFullScreen -tags: - - Méthode - - Plein écran -translation_of: Web/API/Element/requestFullScreen ---- -
{{APIRef("Fullscreen API")}}
- -

La méthode Element.requestFullscreen() envoie une requête asynchrone pour que l'élément soit affiché en plein écran.

- -

Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place.

- -

Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.

- -
-

Note : Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.

-
- -

Syntaxe

- -
Element.requestFullscreen();
-
- -

Exemple

- -

Avant d'appeler requestFullScreen(), mettez en place des gestionnaires (handlers) pour les évenements  {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée).

- -

tbd

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/requestfullscreen/index.md b/files/fr/web/api/element/requestfullscreen/index.md new file mode 100644 index 0000000000..ad1dbf6456 --- /dev/null +++ b/files/fr/web/api/element/requestfullscreen/index.md @@ -0,0 +1,65 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +tags: + - Méthode + - Plein écran +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("Fullscreen API")}}
+ +

La méthode Element.requestFullscreen() envoie une requête asynchrone pour que l'élément soit affiché en plein écran.

+ +

Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place.

+ +

Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.

+ +
+

Note : Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.

+
+ +

Syntaxe

+ +
Element.requestFullscreen();
+
+ +

Exemple

+ +

Avant d'appeler requestFullScreen(), mettez en place des gestionnaires (handlers) pour les évenements  {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée).

+ +

tbd

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollheight/index.html b/files/fr/web/api/element/scrollheight/index.html deleted file mode 100644 index 80bddbcd99..0000000000 --- a/files/fr/web/api/element/scrollheight/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Element.scrollHeight -slug: Web/API/Element/scrollHeight -translation_of: Web/API/Element/scrollHeight ---- -

{{ ApiRef() }}

- -

L'attribut en lecture seule element.scrollHeight est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur scrollHeight est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.

- -
-

Note : Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez element.getBoundingClientRect().

-
- -

Syntaxe

- -
var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
-
- -

intElemScrollHeight est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. scrollHeight est une propriété en lecture seule.

- -

Exemple

- -

Exemple

- -

Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}).

- -

La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé.

- -

HTML

- -
<form name="registration">
-  <p>
-    <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
-Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
-neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
-velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
-ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
-Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
-mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
-at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
-dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
-luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
-sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
-turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
-Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
-ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
-platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
-consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
-a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
-pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
-ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
-interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
-laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
-nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
-    </textarea>
-  </p>
-  <p>
-    <input type="checkbox" id="agree" name="accept" />
-    <label for="agree">I agree</label>
-    <input type="submit" id="nextstep" value="Next" />
-  </p>
-</form>
- -

CSS

- -
#notice {
-  display: inline-block;
-  margin-bottom: 12px;
-  border-radius: 5px;
-  width: 600px;
-  padding: 5px;
-  border: 2px #7FDF55 solid;
-}
-
-#rules {
-  width: 600px;
-  height: 130px;
-  padding: 5px;
-  border: #2A9F00 solid 2px;
-  border-radius: 5px;
-}
- -

JavaScript

- -
function checkReading () {
-  if (checkReading.read) {
-    return;
-  }
-  checkReading.read = this.scrollHeight - Math.round(this.scrollTop) === this.clientHeight;
-  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
-  checkReading.noticeBox.textContent = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
-}
-
-onload = function () {
-  var oToBeRead = document.getElementById("rules");
-  checkReading.noticeBox = document.createElement("span");
-  document.registration.accept.checked = false;
-  checkReading.noticeBox.id = "notice";
-  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
-  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
-  oToBeRead.onscroll = checkReading;
-  checkReading.call(oToBeRead);
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemple', '640', '400')}}

- -

Problèmes et solutions

- -

Déterminer si un élément a complètement été défilé

- -

L'expression suivante renvoie true si l'élément est à la fin du défilement, false si ça ne l'est pas.

- -
element.scrollHeight - element.scrollTop === element.clientHeight
- -

Associée à l'événement element.onscroll, l'expression peut être utile pour déterminer si un utilisateur a lu un texte ou non (voir aussi les propriétés element.scrollTop et element.clientHeight. Par exemple :

- -
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>MDN Example</title>
-<script type="text/javascript">
-function checkReading () {
-  if (checkReading.read) { return; }
-  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
-  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
-  checkReading.noticeBox.innerHTML = checkReading.read ?
-    "Merci." :
-    "Veuillez faire défiler la page et lire le texte qui suit.";
-}
-
-onload = function () {
-  var oToBeRead = document.getElementById("rules");
-  checkReading.noticeBox = document.createElement("span");
-  document.registration.accept.checked = false;
-  checkReading.noticeBox.id = "notice";
-  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
-  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
-  oToBeRead.onscroll = checkReading;
-  checkReading.call(oToBeRead);
-}
- -

Voir l'exemple en action

- -

Spécification

- -

scrollHeight fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.

- -

Compatibilité des navigateurs

- - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurVersion
Internet Explorer8.0
Firefox (Gecko)3.0 (1.9)
Opera?
Safari | Chrome | Webkit4.0 | 4.0 | ?
- -

Dans les versions inférieures à Firefox 21 : quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété scrollHeight est égale à sa propriété clientHeight. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS {{ cssxref("overflow") }} de l'élément a pour valeur visible.

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrollheight/index.md b/files/fr/web/api/element/scrollheight/index.md new file mode 100644 index 0000000000..80bddbcd99 --- /dev/null +++ b/files/fr/web/api/element/scrollheight/index.md @@ -0,0 +1,188 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +translation_of: Web/API/Element/scrollHeight +--- +

{{ ApiRef() }}

+ +

L'attribut en lecture seule element.scrollHeight est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur scrollHeight est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.

+ +
+

Note : Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez element.getBoundingClientRect().

+
+ +

Syntaxe

+ +
var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
+
+ +

intElemScrollHeight est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. scrollHeight est une propriété en lecture seule.

+ +

Exemple

+ +

Exemple

+ +

Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}).

+ +

La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé.

+ +

HTML

+ +
<form name="registration">
+  <p>
+    <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
+neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
+velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
+ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
+Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
+mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
+at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
+dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
+luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
+sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
+turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
+Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
+ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
+platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
+consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
+a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
+pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
+ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
+interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
+laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
+nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
+    </textarea>
+  </p>
+  <p>
+    <input type="checkbox" id="agree" name="accept" />
+    <label for="agree">I agree</label>
+    <input type="submit" id="nextstep" value="Next" />
+  </p>
+</form>
+ +

CSS

+ +
#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}
+ +

JavaScript

+ +
function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - Math.round(this.scrollTop) === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.textContent = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple', '640', '400')}}

+ +

Problèmes et solutions

+ +

Déterminer si un élément a complètement été défilé

+ +

L'expression suivante renvoie true si l'élément est à la fin du défilement, false si ça ne l'est pas.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

Associée à l'événement element.onscroll, l'expression peut être utile pour déterminer si un utilisateur a lu un texte ou non (voir aussi les propriétés element.scrollTop et element.clientHeight. Par exemple :

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+function checkReading () {
+  if (checkReading.read) { return; }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ?
+    "Merci." :
+    "Veuillez faire défiler la page et lire le texte qui suit.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+ +

Voir l'exemple en action

+ +

Spécification

+ +

scrollHeight fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.

+ +

Compatibilité des navigateurs

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurVersion
Internet Explorer8.0
Firefox (Gecko)3.0 (1.9)
Opera?
Safari | Chrome | Webkit4.0 | 4.0 | ?
+ +

Dans les versions inférieures à Firefox 21 : quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété scrollHeight est égale à sa propriété clientHeight. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS {{ cssxref("overflow") }} de l'élément a pour valeur visible.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollintoview/index.html b/files/fr/web/api/element/scrollintoview/index.html deleted file mode 100644 index 3dfbb5504a..0000000000 --- a/files/fr/web/api/element/scrollintoview/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: element.scrollIntoView -slug: Web/API/Element/scrollIntoView -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/scrollIntoView ---- -
{{ APIRef("DOM")}}{{SeeCompatTable}}
- -

La méthode Element.scrollIntoView() fait défiler la page de manière à rendre l'élément visible.

- -

Syntaxe

- -
element.scrollIntoView();
-element.scrollIntoView(alignToTop); // Paramètre booléen
-element.scrollIntoView(scrollIntoViewOptions); // Paramètre d'objet
-
- -

Paramètres

- -
-
alignToTop {{ optional_inline() }}
-

est une valeur {{jsxref("Boolean")}} optionnelle qui :

-
    -
  • si elle vaut true (vrai), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "start", inline: "nearest"}. C'est la valeur par défaut.
    • -
  • Si elle vaut false (faux), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "end", inline: "nearest"}.
    • -
-
-
scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
-
Est un objet qui a les propriétés suivantes :
-
behavior {{optional_inline}}
-
Définit l'animation de transition qui peut être "auto", "instant" ou "smooth". Par défaut : "auto".
-
block {{optional_inline}}
-
L'une des options  "start", "center", "end" ou"nearest". Par défaut : "center".
-
inline {{optional_inline}}
-
L'une des options "start", "center", "end" ou "nearest". Par défaut : "nearest".
-
- -

Exemple

- -
var element = document.getElementById("box");
-
-element.scrollIntoView();
-element.scrollIntoView(false);
-element.scrollIntoView({block: "end"});
-element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
-
- -

Notes

- -

L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Définition initiale
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrollintoview/index.md b/files/fr/web/api/element/scrollintoview/index.md new file mode 100644 index 0000000000..3dfbb5504a --- /dev/null +++ b/files/fr/web/api/element/scrollintoview/index.md @@ -0,0 +1,81 @@ +--- +title: element.scrollIntoView +slug: Web/API/Element/scrollIntoView +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/scrollIntoView +--- +
{{ APIRef("DOM")}}{{SeeCompatTable}}
+ +

La méthode Element.scrollIntoView() fait défiler la page de manière à rendre l'élément visible.

+ +

Syntaxe

+ +
element.scrollIntoView();
+element.scrollIntoView(alignToTop); // Paramètre booléen
+element.scrollIntoView(scrollIntoViewOptions); // Paramètre d'objet
+
+ +

Paramètres

+ +
+
alignToTop {{ optional_inline() }}
+

est une valeur {{jsxref("Boolean")}} optionnelle qui :

+
    +
  • si elle vaut true (vrai), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "start", inline: "nearest"}. C'est la valeur par défaut.
    • +
  • Si elle vaut false (faux), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "end", inline: "nearest"}.
    • +
+
+
scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
+
Est un objet qui a les propriétés suivantes :
+
behavior {{optional_inline}}
+
Définit l'animation de transition qui peut être "auto", "instant" ou "smooth". Par défaut : "auto".
+
block {{optional_inline}}
+
L'une des options  "start", "center", "end" ou"nearest". Par défaut : "center".
+
inline {{optional_inline}}
+
L'une des options "start", "center", "end" ou "nearest". Par défaut : "nearest".
+
+ +

Exemple

+ +
var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
+
+ +

Notes

+ +

L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollintoviewifneeded/index.html b/files/fr/web/api/element/scrollintoviewifneeded/index.html deleted file mode 100644 index c03e499120..0000000000 --- a/files/fr/web/api/element/scrollintoviewifneeded/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Element.scrollIntoViewIfNeeded() -slug: Web/API/Element/scrollIntoViewIfNeeded -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/scrollIntoViewIfNeeded ---- -
{{APIRef("DOM")}}{{Non-standard_header}}
- -

La méthode Element.scrollIntoViewIfNeeded() fait défiler l'élément en cours dans la zone visible de la fenêtre du navigateur s'il n'y est pas déjà. Si l'élément est déjà dans la zone visible de la fenêtre du navigateur, aucun défilement n'a lieu. Cette méthode est une variante propriétaire de la méthode standard Element.scrollIntoView().

- -

Syntaxe

- -

À faire.

- -

Paramètres

- -
-
opt_center
-
Est une valeur {{jsxref("Boolean")}} facultative avec la valeur true par défaut : -
    -
  • Si true (vrai), l'élément sera aligné sur le centre de la zone visible de l'ancêtre défilable.
    • -
  • Si false (faux), l'élément sera aligné sur le bord le plus proche de la zone visible de l'ancêtre défilable. Selon le bord de la zone visible le plus proche de l'élément, soit le haut de l'élément sera aligné sur le bord supérieur de la zone visible, soit le bord inférieur de l'élément sera aligné sur le bord inférieur de la zone visible .
    • -
-
-
- -

Exemple

- -

À faire

- -

Spécifications

- -

Ne fait partie d'aucune spécification. C'est une méthode propriétaire propre à WebKit.

- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrollintoviewifneeded/index.md b/files/fr/web/api/element/scrollintoviewifneeded/index.md new file mode 100644 index 0000000000..c03e499120 --- /dev/null +++ b/files/fr/web/api/element/scrollintoviewifneeded/index.md @@ -0,0 +1,47 @@ +--- +title: Element.scrollIntoViewIfNeeded() +slug: Web/API/Element/scrollIntoViewIfNeeded +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/scrollIntoViewIfNeeded +--- +
{{APIRef("DOM")}}{{Non-standard_header}}
+ +

La méthode Element.scrollIntoViewIfNeeded() fait défiler l'élément en cours dans la zone visible de la fenêtre du navigateur s'il n'y est pas déjà. Si l'élément est déjà dans la zone visible de la fenêtre du navigateur, aucun défilement n'a lieu. Cette méthode est une variante propriétaire de la méthode standard Element.scrollIntoView().

+ +

Syntaxe

+ +

À faire.

+ +

Paramètres

+ +
+
opt_center
+
Est une valeur {{jsxref("Boolean")}} facultative avec la valeur true par défaut : +
    +
  • Si true (vrai), l'élément sera aligné sur le centre de la zone visible de l'ancêtre défilable.
    • +
  • Si false (faux), l'élément sera aligné sur le bord le plus proche de la zone visible de l'ancêtre défilable. Selon le bord de la zone visible le plus proche de l'élément, soit le haut de l'élément sera aligné sur le bord supérieur de la zone visible, soit le bord inférieur de l'élément sera aligné sur le bord inférieur de la zone visible .
    • +
+
+
+ +

Exemple

+ +

À faire

+ +

Spécifications

+ +

Ne fait partie d'aucune spécification. C'est une méthode propriétaire propre à WebKit.

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollleft/index.html b/files/fr/web/api/element/scrollleft/index.html deleted file mode 100644 index 1d408aae3c..0000000000 --- a/files/fr/web/api/element/scrollleft/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: element.scrollLeft -slug: Web/API/Element/scrollLeft -tags: - - DOM - - DOM_0 -translation_of: Web/API/Element/scrollLeft ---- -

{{ ApiRef() }}

- -

Résumé

- -

Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.

- -

Syntaxe

- -
// Obtient le nombre de pixels défilés
-var sLeft = element.scrollLeft;
-
- -

sLeft est un entier représentant le nombre de pixels dont element a été défilé vers la gauche.

- -
// Définit le nombre de pixels défilés
-element.scrollLeft = 10;
-
- -

scrollLeft peut être n'importe quelle valeur entière, cependant :

- - - -

Exemple

- -
<script type="text/javascript">
-
-function doScrollLeft(el, p)
-{
-  el.scrollLeft = p;
-}
-
-</script>
-
-<div id="aDiv"
-     style="width: 100px; height: 200px; overflow: auto;"
->
-<script type="text/javascript">
-for (var i=0; i<100; ++i){
-  document.write(i + '-FooBar-FooBar-FooBar<br>');
-}
-</script>
-</div>
-<br>
-<input type="button" value="Défile de 50 pixels"
-       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
->
-
- -

Spécification

- -

{{ DOM0() }}

- -

Références

- - \ No newline at end of file diff --git a/files/fr/web/api/element/scrollleft/index.md b/files/fr/web/api/element/scrollleft/index.md new file mode 100644 index 0000000000..1d408aae3c --- /dev/null +++ b/files/fr/web/api/element/scrollleft/index.md @@ -0,0 +1,69 @@ +--- +title: element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - DOM + - DOM_0 +translation_of: Web/API/Element/scrollLeft +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.

+ +

Syntaxe

+ +
// Obtient le nombre de pixels défilés
+var sLeft = element.scrollLeft;
+
+ +

sLeft est un entier représentant le nombre de pixels dont element a été défilé vers la gauche.

+ +
// Définit le nombre de pixels défilés
+element.scrollLeft = 10;
+
+ +

scrollLeft peut être n'importe quelle valeur entière, cependant :

+ + + +

Exemple

+ +
<script type="text/javascript">
+
+function doScrollLeft(el, p)
+{
+  el.scrollLeft = p;
+}
+
+</script>
+
+<div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+>
+<script type="text/javascript">
+for (var i=0; i<100; ++i){
+  document.write(i + '-FooBar-FooBar-FooBar<br>');
+}
+</script>
+</div>
+<br>
+<input type="button" value="Défile de 50 pixels"
+       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
+>
+
+ +

Spécification

+ +

{{ DOM0() }}

+ +

Références

+ + \ No newline at end of file diff --git a/files/fr/web/api/element/scrollleftmax/index.html b/files/fr/web/api/element/scrollleftmax/index.html deleted file mode 100644 index cbf25a3745..0000000000 --- a/files/fr/web/api/element/scrollleftmax/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Element.scrollLeftMax -slug: Web/API/Element/scrollLeftMax -translation_of: Web/API/Element/scrollLeftMax ---- -

{{APIRef("DOM")}}{{Non-standard_header}}

- -

La propriété non modifiable  Element.scrollLeftMax renvoie un  {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément.

- -

Syntaxe

- -
var pxl = elt.scrollLeftMax;
- -

Spécifications

- -

Cette propriété ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrollleftmax/index.md b/files/fr/web/api/element/scrollleftmax/index.md new file mode 100644 index 0000000000..cbf25a3745 --- /dev/null +++ b/files/fr/web/api/element/scrollleftmax/index.md @@ -0,0 +1,26 @@ +--- +title: Element.scrollLeftMax +slug: Web/API/Element/scrollLeftMax +translation_of: Web/API/Element/scrollLeftMax +--- +

{{APIRef("DOM")}}{{Non-standard_header}}

+ +

La propriété non modifiable  Element.scrollLeftMax renvoie un  {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément.

+ +

Syntaxe

+ +
var pxl = elt.scrollLeftMax;
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollto/index.html b/files/fr/web/api/element/scrollto/index.html deleted file mode 100644 index ba30e5fecb..0000000000 --- a/files/fr/web/api/element/scrollto/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Element.scrollTo() -slug: Web/API/Element/scrollTo -tags: - - API - - Element - - Méthode - - Reference - - scrollTo -translation_of: Web/API/Element/scrollTo ---- -
{{ APIRef }}
- -

La méthode scrollTo() de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.

- -

Syntaxe

- -
element.scrollTo(x-coord, y-coord)
-element.scrollTo(options)
-
- -

Paramètres

- - - -

- ou -

- - - -

Exemples

- -

En utilisant des coordonnées :

- -
element.scrollTo(0, 1000);
-
- -

Ou en utilisant options :

- -
element.scrollTo({
-  top: 100,
-  left: 100,
-  behavior: 'smooth'
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}{{ Spec2('CSSOM View') }}Définition initiale.
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrollto/index.md b/files/fr/web/api/element/scrollto/index.md new file mode 100644 index 0000000000..ba30e5fecb --- /dev/null +++ b/files/fr/web/api/element/scrollto/index.md @@ -0,0 +1,78 @@ +--- +title: Element.scrollTo() +slug: Web/API/Element/scrollTo +tags: + - API + - Element + - Méthode + - Reference + - scrollTo +translation_of: Web/API/Element/scrollTo +--- +
{{ APIRef }}
+ +

La méthode scrollTo() de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.

+ +

Syntaxe

+ +
element.scrollTo(x-coord, y-coord)
+element.scrollTo(options)
+
+ +

Paramètres

+ + + +

- ou -

+ + + +

Exemples

+ +

En utilisant des coordonnées :

+ +
element.scrollTo(0, 1000);
+
+ +

Ou en utilisant options :

+ +
element.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}{{ Spec2('CSSOM View') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrolltop/index.html b/files/fr/web/api/element/scrolltop/index.html deleted file mode 100644 index 4b3d0ef24b..0000000000 --- a/files/fr/web/api/element/scrolltop/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Element.scrollTop -slug: Web/API/Element/scrollTop -tags: - - API - - CSSOM View - - Property - - Reference -translation_of: Web/API/Element/scrollTop ---- -
{{APIRef("DOM")}}
- -

La propriété Element.scrollTop permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.

- -

La valeur scrollTop d'un élément correspond à la distance entre le haut de l'élément et la partie la plus haute de son contenu visible. Lorsque le contenu d'un élément n'entraîne pas la création d'une barre de défilement verticale, la valeur de scrollTop est 0.

- -

Lorsque scrollTop est utilisé sur l'élément racine (c'est-à-dire l'élément <html>), c'est la valeur de scrollY pour la fenêtre qui est renvoyée. Il s'agit d'un cas aux limites pour scrollTop.

- -
-

Attention : Pour les systèmes qui utilisent un affichage mis à l'échelle (display scaling), scrollTop peut fournir une valeur décimale.

-
- -

Syntaxe

- -
// Obtenir le nombre de pixels qui ont défilé.
-var intElemScrollTop = someElement.scrollTop;
-
- -

Après avoir exécuté le code ci-dessus, intElemScrollTop sera un entier correspondant au nombre de pixels pour lesquels le contenu de l'élément a défilé vers le haut.

- -
// Définir le nombre de pixels à faire défiler.
-element.scrollTop = intValue;
-
- -

scrollTop peut être défini avec n'importe quelle valeur entière. Cependant :

- - - -

Exemple

- -

HTML

- -
<div id="container">
-  <div id="content">Utilisez le bouton :) Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!!</div>
-</div>
-
-<button id="slide" type="button">Défilez vers le bas</button>
- -

CSS

- -
#container {
-  height: 100px;
-  border: 1px solid #ccc;
-  overflow-y: scroll;
-}
-
-#content {
-  background-color: #ccc;
-}
- -

JavaScript

- -
const button = document.getElementById('slide');
-
-button.onclick = function () {
-  document.getElementById('container').scrollTop += 20;
-};
- -

Résultat

- -

{{EmbedLiveSample("Example")}}

- - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrolltop/index.md b/files/fr/web/api/element/scrolltop/index.md new file mode 100644 index 0000000000..4b3d0ef24b --- /dev/null +++ b/files/fr/web/api/element/scrolltop/index.md @@ -0,0 +1,106 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +tags: + - API + - CSSOM View + - Property + - Reference +translation_of: Web/API/Element/scrollTop +--- +
{{APIRef("DOM")}}
+ +

La propriété Element.scrollTop permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.

+ +

La valeur scrollTop d'un élément correspond à la distance entre le haut de l'élément et la partie la plus haute de son contenu visible. Lorsque le contenu d'un élément n'entraîne pas la création d'une barre de défilement verticale, la valeur de scrollTop est 0.

+ +

Lorsque scrollTop est utilisé sur l'élément racine (c'est-à-dire l'élément <html>), c'est la valeur de scrollY pour la fenêtre qui est renvoyée. Il s'agit d'un cas aux limites pour scrollTop.

+ +
+

Attention : Pour les systèmes qui utilisent un affichage mis à l'échelle (display scaling), scrollTop peut fournir une valeur décimale.

+
+ +

Syntaxe

+ +
// Obtenir le nombre de pixels qui ont défilé.
+var intElemScrollTop = someElement.scrollTop;
+
+ +

Après avoir exécuté le code ci-dessus, intElemScrollTop sera un entier correspondant au nombre de pixels pour lesquels le contenu de l'élément a défilé vers le haut.

+ +
// Définir le nombre de pixels à faire défiler.
+element.scrollTop = intValue;
+
+ +

scrollTop peut être défini avec n'importe quelle valeur entière. Cependant :

+ + + +

Exemple

+ +

HTML

+ +
<div id="container">
+  <div id="content">Utilisez le bouton :) Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!!</div>
+</div>
+
+<button id="slide" type="button">Défilez vers le bas</button>
+ +

CSS

+ +
#container {
+  height: 100px;
+  border: 1px solid #ccc;
+  overflow-y: scroll;
+}
+
+#content {
+  background-color: #ccc;
+}
+ +

JavaScript

+ +
const button = document.getElementById('slide');
+
+button.onclick = function () {
+  document.getElementById('container').scrollTop += 20;
+};
+ +

Résultat

+ +

{{EmbedLiveSample("Example")}}

+ + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollwidth/index.html b/files/fr/web/api/element/scrollwidth/index.html deleted file mode 100644 index 9297b2f417..0000000000 --- a/files/fr/web/api/element/scrollwidth/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: element.scrollWidth -slug: Web/API/Element/scrollWidth -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Element/scrollWidth ---- -

{{ ApiRef() }}

-

Résumé

-

scrollWidth est une propriété en lecture seule qui renvoie, parmi la largeur en pixels du contenu d'un élément, et la largeur de l'élément, celle qui est la plus grande.

-

Syntaxe

-
var xScrollWidth = element.scrollWidth;
-
-

xScrollWidth est la largeur du contenu d'element en pixels.

-

Exemple

-
<div id="aDiv"
-     style="width: 100px; height: 200px; overflow: auto;"
->-FooBar-FooBar-FooBar</div>
-<br>
-<input type="button" value="Show scrollWidth"
-       onclick="alert(document.getElementById('aDiv').scrollWidth);">
-
-

Spécification

-

Il n'y a pas de spécification du W3C pour scrollWidth.

-

Un brouillon de l'éditeur existe cependant : Cascading Style Sheets Object Model (CSSOM)

-

Références

- \ No newline at end of file diff --git a/files/fr/web/api/element/scrollwidth/index.md b/files/fr/web/api/element/scrollwidth/index.md new file mode 100644 index 0000000000..9297b2f417 --- /dev/null +++ b/files/fr/web/api/element/scrollwidth/index.md @@ -0,0 +1,32 @@ +--- +title: element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Element/scrollWidth +--- +

{{ ApiRef() }}

+

Résumé

+

scrollWidth est une propriété en lecture seule qui renvoie, parmi la largeur en pixels du contenu d'un élément, et la largeur de l'élément, celle qui est la plus grande.

+

Syntaxe

+
var xScrollWidth = element.scrollWidth;
+
+

xScrollWidth est la largeur du contenu d'element en pixels.

+

Exemple

+
<div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+>-FooBar-FooBar-FooBar</div>
+<br>
+<input type="button" value="Show scrollWidth"
+       onclick="alert(document.getElementById('aDiv').scrollWidth);">
+
+

Spécification

+

Il n'y a pas de spécification du W3C pour scrollWidth.

+

Un brouillon de l'éditeur existe cependant : Cascading Style Sheets Object Model (CSSOM)

+

Références

+ \ No newline at end of file diff --git a/files/fr/web/api/element/select_event/index.html b/files/fr/web/api/element/select_event/index.html deleted file mode 100644 index f0be06d15b..0000000000 --- a/files/fr/web/api/element/select_event/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: select -slug: Web/API/Element/select_event -translation_of: Web/API/Element/select_event ---- -

L'évènement select est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en HTML5, les évènements select ne peuvent être envoyés que sur des éléments input de formulaire et textarea.

- -

Info générale

- -
-
Spécification
-
DOM L3
-
Interface
-
UIEvent si généré depuis une interface utilisateur, Event sinon.
-
Remonte
-
Oui
-
Annulable
-
Non
-
Cible
-
Élément
-
Action par Défault
-
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.
- -

Exemple

- -
<input id="test" type="text" value="Sélectionnez-moi !" />
-<script>
-  var elem = document.getElementById('test');
-  elem.addEventListener('select', function() {
-    alert('La sélection a changé !');
-  }, false);
-</script>
diff --git a/files/fr/web/api/element/select_event/index.md b/files/fr/web/api/element/select_event/index.md new file mode 100644 index 0000000000..f0be06d15b --- /dev/null +++ b/files/fr/web/api/element/select_event/index.md @@ -0,0 +1,77 @@ +--- +title: select +slug: Web/API/Element/select_event +translation_of: Web/API/Element/select_event +--- +

L'évènement select est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en HTML5, les évènements select ne peuvent être envoyés que sur des éléments input de formulaire et textarea.

+ +

Info générale

+ +
+
Spécification
+
DOM L3
+
Interface
+
UIEvent si généré depuis une interface utilisateur, Event sinon.
+
Remonte
+
Oui
+
Annulable
+
Non
+
Cible
+
Élément
+
Action par Défault
+
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.
+ +

Exemple

+ +
<input id="test" type="text" value="Sélectionnez-moi !" />
+<script>
+  var elem = document.getElementById('test');
+  elem.addEventListener('select', function() {
+    alert('La sélection a changé !');
+  }, false);
+</script>
diff --git a/files/fr/web/api/element/setattribute/index.html b/files/fr/web/api/element/setattribute/index.html deleted file mode 100644 index 2633e74e6b..0000000000 --- a/files/fr/web/api/element/setattribute/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Element.setAttribute() -slug: Web/API/Element/setAttribute -tags: - - API - - Attributs - - DOM - - Element - - Méthode -translation_of: Web/API/Element/setAttribute ---- -

{{APIRef("DOM")}}

- -

Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.

- -

Pour obtenir la valeur actuelle d'un attribut, utilisez {{domxref("Element.getAttribute", "getAttribute()")}} ; pour supprimer un attribut, appelez {{domxref("Element.removeAttribute", "removeAttribute()")}}.

- -

Syntaxe

- -
Element.setAttribute(name, value);
-
- -

Paramètres

- -
-
name
-
Une {{domxref("DOMString")}} (chaîne de caractères) spécifiant le nom de l'attribut pour lequel la valeur doit être définie. L'attribut name est automatiquement converti en minuscules quand setAttribute() est appelé sur un élément HTML dans document HTML.
-
value
-
une {{domxref("DOMString")}} contenant la valeur à affecter à l'attribut. Toute valeur spécifiée qui n'est pas une chaîne de caractères, est convertie automatiquement en chaîne.
-
- -

Les attributs booléens sont considérés être true (vrai) s'ils sont présents sur l'élément, quelle que soit leur valeur réelle ; en règle générale, vous devez spécifier la chaîne vide ("") dans value (certains utilisent le nom de l'attribut, mais ce fonctionnement n'est pas standard). Voir l' {{anch("Exemple", "exemple")}} ce-dessous pour une démonstration pratique.

- -

Puisque la valeur spécifiée est convertie en chaîne, spécifier null ne fait pas nécessairement ce que vous attendez. Au lieu de supprimer l'attribut ou de définir sa valeur comme {{jsxref("null")}} , il définit à la place la valeur de l'attribut avec la chaîne "null". Si vous souhaitez supprimer un attribut, appelez {{domxref("Element.removeAttribute","removeAttribute()")}}.

- -

Valeur retournée

- -

{{jsxref("undefined")}}.

- -

Exceptions

- -
-
InvalidCharacterError
-
Le nom d'attribut spécifié contient un ou plusieurs caractères qui ne sont pas valides dans les noms d'attribut.
-
- -

Exemple

- -

Dans l'exemple suivant, setAttribute() est utilisé pour définir des attributs sur un {{HTMLElement("button")}} (bouton).

- -

HTML

- -
<button>Hello World</button>
- -

JavaScript

- -
var b = document.querySelector("button");
-
-b.setAttribute("name", "helloButton");
-b.setAttribute("disabled", "");
- -

Ceci démontre 2 choses :

- - - -

{{ EmbedLiveSample('Example', '300', '50') }}

- -

{{DOMAttributeMethods}}

- -

Spécifications

- - - -

Compatibilité des navigateurs

- -

Gecko notes

- -

L'utilisation de setAttribute() pour modifier certains attributs, en particulier la valeur dans XUL, fonctionne de façon incohérente, car l'attribut spécifie la valeur par défaut. Pour accéder ou modifier la valeur courante, vous devez utiliser les propriétés. Par exemple, utilisez Element.value à la place de Element.setAttribute().

diff --git a/files/fr/web/api/element/setattribute/index.md b/files/fr/web/api/element/setattribute/index.md new file mode 100644 index 0000000000..2633e74e6b --- /dev/null +++ b/files/fr/web/api/element/setattribute/index.md @@ -0,0 +1,84 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +tags: + - API + - Attributs + - DOM + - Element + - Méthode +translation_of: Web/API/Element/setAttribute +--- +

{{APIRef("DOM")}}

+ +

Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.

+ +

Pour obtenir la valeur actuelle d'un attribut, utilisez {{domxref("Element.getAttribute", "getAttribute()")}} ; pour supprimer un attribut, appelez {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Syntaxe

+ +
Element.setAttribute(name, value);
+
+ +

Paramètres

+ +
+
name
+
Une {{domxref("DOMString")}} (chaîne de caractères) spécifiant le nom de l'attribut pour lequel la valeur doit être définie. L'attribut name est automatiquement converti en minuscules quand setAttribute() est appelé sur un élément HTML dans document HTML.
+
value
+
une {{domxref("DOMString")}} contenant la valeur à affecter à l'attribut. Toute valeur spécifiée qui n'est pas une chaîne de caractères, est convertie automatiquement en chaîne.
+
+ +

Les attributs booléens sont considérés être true (vrai) s'ils sont présents sur l'élément, quelle que soit leur valeur réelle ; en règle générale, vous devez spécifier la chaîne vide ("") dans value (certains utilisent le nom de l'attribut, mais ce fonctionnement n'est pas standard). Voir l' {{anch("Exemple", "exemple")}} ce-dessous pour une démonstration pratique.

+ +

Puisque la valeur spécifiée est convertie en chaîne, spécifier null ne fait pas nécessairement ce que vous attendez. Au lieu de supprimer l'attribut ou de définir sa valeur comme {{jsxref("null")}} , il définit à la place la valeur de l'attribut avec la chaîne "null". Si vous souhaitez supprimer un attribut, appelez {{domxref("Element.removeAttribute","removeAttribute()")}}.

+ +

Valeur retournée

+ +

{{jsxref("undefined")}}.

+ +

Exceptions

+ +
+
InvalidCharacterError
+
Le nom d'attribut spécifié contient un ou plusieurs caractères qui ne sont pas valides dans les noms d'attribut.
+
+ +

Exemple

+ +

Dans l'exemple suivant, setAttribute() est utilisé pour définir des attributs sur un {{HTMLElement("button")}} (bouton).

+ +

HTML

+ +
<button>Hello World</button>
+ +

JavaScript

+ +
var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+ +

Ceci démontre 2 choses :

+ + + +

{{ EmbedLiveSample('Example', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Spécifications

+ + + +

Compatibilité des navigateurs

+ +

Gecko notes

+ +

L'utilisation de setAttribute() pour modifier certains attributs, en particulier la valeur dans XUL, fonctionne de façon incohérente, car l'attribut spécifie la valeur par défaut. Pour accéder ou modifier la valeur courante, vous devez utiliser les propriétés. Par exemple, utilisez Element.value à la place de Element.setAttribute().

diff --git a/files/fr/web/api/element/setattributenode/index.html b/files/fr/web/api/element/setattributenode/index.html deleted file mode 100644 index 8f77b05d9a..0000000000 --- a/files/fr/web/api/element/setattributenode/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: element.setAttributeNode -slug: Web/API/Element/setAttributeNode -tags: - - API - - DOM - - Element - - Méthode - - Reference -translation_of: Web/API/Element/setAttributeNode ---- -

{{ APIRef("DOM") }}

- -

setAttributeNode() ajoute un nouveau nœud Attr à l'élément courant.

- -

Syntaxe

- -
var replacedAttr = element.setAttributeNode(attribute);
- - - -

Exemple

- -
// <div id="one" align="left">one</div>
-// <div id="two">two</div>
-var d1 = document.getElementById("one");
-var d2 = document.getElementById("two");
-var a = d1.getAttributeNode("align");
-d2.setAttributeNode(a);
-alert(d2.attributes[1].value)
-// retourne: `left'
-
- -

Notes

- -

Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé.

- -

Cette méthode est peu utilisée. On lui préfère souvent  {{domxref("Element.setAttribute()")}} pour modifier la valeur d'un attribut d'élément.

- -

{{DOMAttributeMethods()}}

- -

Spécification

- - diff --git a/files/fr/web/api/element/setattributenode/index.md b/files/fr/web/api/element/setattributenode/index.md new file mode 100644 index 0000000000..8f77b05d9a --- /dev/null +++ b/files/fr/web/api/element/setattributenode/index.md @@ -0,0 +1,49 @@ +--- +title: element.setAttributeNode +slug: Web/API/Element/setAttributeNode +tags: + - API + - DOM + - Element + - Méthode + - Reference +translation_of: Web/API/Element/setAttributeNode +--- +

{{ APIRef("DOM") }}

+ +

setAttributeNode() ajoute un nouveau nœud Attr à l'élément courant.

+ +

Syntaxe

+ +
var replacedAttr = element.setAttributeNode(attribute);
+ + + +

Exemple

+ +
// <div id="one" align="left">one</div>
+// <div id="two">two</div>
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNode("align");
+d2.setAttributeNode(a);
+alert(d2.attributes[1].value)
+// retourne: `left'
+
+ +

Notes

+ +

Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé.

+ +

Cette méthode est peu utilisée. On lui préfère souvent  {{domxref("Element.setAttribute()")}} pour modifier la valeur d'un attribut d'élément.

+ +

{{DOMAttributeMethods()}}

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/setattributenodens/index.html b/files/fr/web/api/element/setattributenodens/index.html deleted file mode 100644 index b2abe3c907..0000000000 --- a/files/fr/web/api/element/setattributenodens/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: element.setAttributeNodeNS -slug: Web/API/Element/setAttributeNodeNS -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/setAttributeNodeNS ---- -

{{ APIRef("DOM") }}

- -

setAttributeNodeNS ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.

- -

Syntaxe

- -
replacedAttr = element.setAttributeNodeNS(attributeNode)
-
- -
-
replacedAttr
-
Le nœud attribut remplacé, si applicable, renvoyé par cette fonction.
-
attributeNode
-
Un nœud Attr.
-
- -

Exemple

- -
// <div id="one" special-align="utterleft">one</div>
-// <div id="two">two</div>
-
-var myns = "http://www.mozilla.org/ns/specialspace";
-var d1 = document.getElementById("one");
-var d2 = document.getElementById("two");
-var a = d1.getAttributeNodeNS(myns, "special-align");
-d2.setAttributeNodeNS(a);
-
-alert(d2.attributes[1].value) // renvoie : "utterleft"
-
- -

Notes

- -

Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.

- -

Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'Attr soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - diff --git a/files/fr/web/api/element/setattributenodens/index.md b/files/fr/web/api/element/setattributenodens/index.md new file mode 100644 index 0000000000..b2abe3c907 --- /dev/null +++ b/files/fr/web/api/element/setattributenodens/index.md @@ -0,0 +1,53 @@ +--- +title: element.setAttributeNodeNS +slug: Web/API/Element/setAttributeNodeNS +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/setAttributeNodeNS +--- +

{{ APIRef("DOM") }}

+ +

setAttributeNodeNS ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.

+ +

Syntaxe

+ +
replacedAttr = element.setAttributeNodeNS(attributeNode)
+
+ +
+
replacedAttr
+
Le nœud attribut remplacé, si applicable, renvoyé par cette fonction.
+
attributeNode
+
Un nœud Attr.
+
+ +

Exemple

+ +
// <div id="one" special-align="utterleft">one</div>
+// <div id="two">two</div>
+
+var myns = "http://www.mozilla.org/ns/specialspace";
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNodeNS(myns, "special-align");
+d2.setAttributeNodeNS(a);
+
+alert(d2.attributes[1].value) // renvoie : "utterleft"
+
+ +

Notes

+ +

Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.

+ +

Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'Attr soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/setattributens/index.html b/files/fr/web/api/element/setattributens/index.html deleted file mode 100644 index 1274563722..0000000000 --- a/files/fr/web/api/element/setattributens/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: element.setAttributeNS -slug: Web/API/Element/setAttributeNS -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/setAttributeNS ---- -

{{ APIRef("DOM") }}

- -

setAttributeNS ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.

- -

Syntaxe

- -
element.setAttributeNS(
-namespace,
-name,
-value)
- - - -

Exemple

- -
var d = document.getElementById("d1");
-d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
-
- -

Notes

- -

{{ DOMAttributeMethods() }}

- -

setAttributeNS  est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire "namespace:localname".

- -

Spécification

- - diff --git a/files/fr/web/api/element/setattributens/index.md b/files/fr/web/api/element/setattributens/index.md new file mode 100644 index 0000000000..1274563722 --- /dev/null +++ b/files/fr/web/api/element/setattributens/index.md @@ -0,0 +1,45 @@ +--- +title: element.setAttributeNS +slug: Web/API/Element/setAttributeNS +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/setAttributeNS +--- +

{{ APIRef("DOM") }}

+ +

setAttributeNS ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.

+ +

Syntaxe

+ +
element.setAttributeNS(
+namespace,
+name,
+value)
+ + + +

Exemple

+ +
var d = document.getElementById("d1");
+d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
+
+ +

Notes

+ +

{{ DOMAttributeMethods() }}

+ +

setAttributeNS  est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire "namespace:localname".

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/setcapture/index.html b/files/fr/web/api/element/setcapture/index.html deleted file mode 100644 index 28c60fdf20..0000000000 --- a/files/fr/web/api/element/setcapture/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Element.setCapture() -slug: Web/API/Element/setCapture -tags: - - API - - Capture - - DOM - - Elements - - Méthodes - - Souris -translation_of: Web/API/Element/setCapture ---- -

{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}

- -

Appelez cette méthode pendant la gestion d'un évènement de la souris pour recibler tous les évènements de la souris sur cet élément jusqu'à ce que le bouton de la souris soit relâché ou que soit appelée {{ domxref("document.releaseCapture()") }}.

- -

Syntaxe

- -
element.setCapture(retargetToElement);
-
- -
-
retargetToElement
-
Si la valeur est true (vrai), tous les évènements sont ciblés directement vers cet élément ; si elle est false (faux), les évènements peuvent aussi être déclenchés sur les descendants de cet élément.
-
- -

Exemple

- -

Dans cet exemple, les coordonnées en cours de la souris sont dessinées pendant que vous passez la souris après un clic et un appui sur un élément.

- -
<html>
-<head>
-  <title>Mouse Capture Example</title>
-  <style type="text/css">
-    #myButton {
-      border: solid black 1px;
-      color: black;
-      padding: 2px;
-      box-shadow: black 2px 2px;
-    }
-  </style>
-
-  <script type="text/javascript">
-    function init() {
-      var btn = document.getElementById("myButton");
-      btn.addEventListener("mousedown", mouseDown, false);
-      btn.addEventListener("mouseup", mouseUp, false);
-    }
-
-    function mouseDown(e) {
-      //e.target.setCapture(); // cette méthode doit être définie
-      e.target.addEventListener("mousemove", mouseMoved, false);
-    }
-
-    function mouseUp(e) {
-      e.target.removeEventListener("mousemove", mouseMoved, false);
-    }
-
-    function mouseMoved(e) {
-      var output = document.getElementById("output");
-      output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
-    }
-  </script>
-</head>
-<body onload="init()">
-  <p>This is an example of how to use mouse capture on elements in Gecko 2.0.</p>
-  <p><a id="myButton" href="#">Test Me</a></p>
-  <div id="output">No events yet</div>
-</body>
-</html>
-
- -

Voir l'exemple sur une page

- -

Notes

- -

L'élément ne peut pas être entièrement déplacé vers le haut ou vers le bas, selon la disposition des autres éléments.

- -

Spécification

- -

Basé sur l'implémentation Internet Explorer.

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/setcapture/index.md b/files/fr/web/api/element/setcapture/index.md new file mode 100644 index 0000000000..28c60fdf20 --- /dev/null +++ b/files/fr/web/api/element/setcapture/index.md @@ -0,0 +1,87 @@ +--- +title: Element.setCapture() +slug: Web/API/Element/setCapture +tags: + - API + - Capture + - DOM + - Elements + - Méthodes + - Souris +translation_of: Web/API/Element/setCapture +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}

+ +

Appelez cette méthode pendant la gestion d'un évènement de la souris pour recibler tous les évènements de la souris sur cet élément jusqu'à ce que le bouton de la souris soit relâché ou que soit appelée {{ domxref("document.releaseCapture()") }}.

+ +

Syntaxe

+ +
element.setCapture(retargetToElement);
+
+ +
+
retargetToElement
+
Si la valeur est true (vrai), tous les évènements sont ciblés directement vers cet élément ; si elle est false (faux), les évènements peuvent aussi être déclenchés sur les descendants de cet élément.
+
+ +

Exemple

+ +

Dans cet exemple, les coordonnées en cours de la souris sont dessinées pendant que vous passez la souris après un clic et un appui sur un élément.

+ +
<html>
+<head>
+  <title>Mouse Capture Example</title>
+  <style type="text/css">
+    #myButton {
+      border: solid black 1px;
+      color: black;
+      padding: 2px;
+      box-shadow: black 2px 2px;
+    }
+  </style>
+
+  <script type="text/javascript">
+    function init() {
+      var btn = document.getElementById("myButton");
+      btn.addEventListener("mousedown", mouseDown, false);
+      btn.addEventListener("mouseup", mouseUp, false);
+    }
+
+    function mouseDown(e) {
+      //e.target.setCapture(); // cette méthode doit être définie
+      e.target.addEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseUp(e) {
+      e.target.removeEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseMoved(e) {
+      var output = document.getElementById("output");
+      output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
+    }
+  </script>
+</head>
+<body onload="init()">
+  <p>This is an example of how to use mouse capture on elements in Gecko 2.0.</p>
+  <p><a id="myButton" href="#">Test Me</a></p>
+  <div id="output">No events yet</div>
+</body>
+</html>
+
+ +

Voir l'exemple sur une page

+ +

Notes

+ +

L'élément ne peut pas être entièrement déplacé vers le haut ou vers le bas, selon la disposition des autres éléments.

+ +

Spécification

+ +

Basé sur l'implémentation Internet Explorer.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/setpointercapture/index.html b/files/fr/web/api/element/setpointercapture/index.html deleted file mode 100644 index a412900e39..0000000000 --- a/files/fr/web/api/element/setpointercapture/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Element.setPointerCapture() -slug: Web/API/Element/setPointerCapture -tags: - - API - - Capture - - DOM - - Element - - Méthodes - - Pointeur -translation_of: Web/API/Element/setPointerCapture ---- -

{{APIRef("DOM")}}

- -

La Pointer capture (capture de pointeur) permet de re-cibler des événements pour un événement de pointeur particulier ({{domxref ("PointerEvent")}}) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).

- -

setPointerCapture() est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme cible de capture de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).

- -
-

Note : Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.

-
- -

Syntaxe

- -
.setPointerCapture(pointerId);
-
targetElement - -

Arguments

- -
-
pointerId
-
L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","évènement de pointeur")}}.
-
- -

Valeur de retour

- -

Cette méthode renvoie void et lance une {{domxref("DOMException")}} nommée InvalidPointerId si pointerId ne correspond à aucun des pointeurs actifs.

- -

Exemple

- -
<html>
-<script>
-function downHandler(ev) {
- var el=document.getElementById("target");
- //L'élément cible  ('target') recevra/capturera d'autres évènements
- el.setPointerCapture(ev.pointerId);
-}
-function init() {
- var el=document.getElementById("target");
- el.onpointerdown = downHandler;
-}
-</script>
-<body onload="init();">
-<div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Pointer Events 2','#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}{{Spec2('Pointer Events 2')}}Version non stable.
{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}{{Spec2('Pointer Events')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/setpointercapture/index.md b/files/fr/web/api/element/setpointercapture/index.md new file mode 100644 index 0000000000..a412900e39 --- /dev/null +++ b/files/fr/web/api/element/setpointercapture/index.md @@ -0,0 +1,90 @@ +--- +title: Element.setPointerCapture() +slug: Web/API/Element/setPointerCapture +tags: + - API + - Capture + - DOM + - Element + - Méthodes + - Pointeur +translation_of: Web/API/Element/setPointerCapture +--- +

{{APIRef("DOM")}}

+ +

La Pointer capture (capture de pointeur) permet de re-cibler des événements pour un événement de pointeur particulier ({{domxref ("PointerEvent")}}) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).

+ +

setPointerCapture() est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme cible de capture de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).

+ +
+

Note : Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.

+
+ +

Syntaxe

+ +
.setPointerCapture(pointerId);
+
targetElement + +

Arguments

+ +
+
pointerId
+
L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","évènement de pointeur")}}.
+
+ +

Valeur de retour

+ +

Cette méthode renvoie void et lance une {{domxref("DOMException")}} nommée InvalidPointerId si pointerId ne correspond à aucun des pointeurs actifs.

+ +

Exemple

+ +
<html>
+<script>
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ //L'élément cible  ('target') recevra/capturera d'autres évènements
+ el.setPointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerdown = downHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Pointer Events 2','#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}{{Spec2('Pointer Events 2')}}Version non stable.
{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}{{Spec2('Pointer Events')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/tagname/index.html b/files/fr/web/api/element/tagname/index.html deleted file mode 100644 index 53bee23738..0000000000 --- a/files/fr/web/api/element/tagname/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: element.tagName -slug: Web/API/Element/tagName -tags: - - API - - DOM - - Element - - Nom - - Propriétés -translation_of: Web/API/Element/tagName ---- -

{{ApiRef("DOM")}}

- -

Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une {{HTMLElement("img")}}, sa propriété tagName est "IMG" (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).

- -

Syntaxe

- -
elementName = element.tagName;
-
- -

Valeur

- -

Une chaîne indiquant le nom de l'étiquette de l'élément. Cette chaîne comporte des majuscules selon le type de document :

- - - -

Exemple

- -

Contenu HTML

- -
<span id="naissance">Lorsque je suis né…</span>
-
- -

Contenu JavaScript

- -
var span = document.getElementById("naissance");
-console.log(span.tagName);
- -

En XHTML (ou tout autre format XML), la casse d'origine sera conservée, de sorte que "span" sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules. En HTML, "SPAN" serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}}{{Spec2("DOM3 Core")}}Pas de changement
{{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}}{{Spec2("DOM2 Core")}}Définition initiale
- -

Compatibilité des navigateurs

- -

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

diff --git a/files/fr/web/api/element/tagname/index.md b/files/fr/web/api/element/tagname/index.md new file mode 100644 index 0000000000..53bee23738 --- /dev/null +++ b/files/fr/web/api/element/tagname/index.md @@ -0,0 +1,69 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - API + - DOM + - Element + - Nom + - Propriétés +translation_of: Web/API/Element/tagName +--- +

{{ApiRef("DOM")}}

+ +

Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une {{HTMLElement("img")}}, sa propriété tagName est "IMG" (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).

+ +

Syntaxe

+ +
elementName = element.tagName;
+
+ +

Valeur

+ +

Une chaîne indiquant le nom de l'étiquette de l'élément. Cette chaîne comporte des majuscules selon le type de document :

+ + + +

Exemple

+ +

Contenu HTML

+ +
<span id="naissance">Lorsque je suis né…</span>
+
+ +

Contenu JavaScript

+ +
var span = document.getElementById("naissance");
+console.log(span.tagName);
+ +

En XHTML (ou tout autre format XML), la casse d'origine sera conservée, de sorte que "span" sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules. En HTML, "SPAN" serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}}{{Spec2("DOM3 Core")}}Pas de changement
{{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}}{{Spec2("DOM2 Core")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

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

-- cgit v1.2.3-54-g00ecf