From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/document/activeelement/index.html | 24 + files/fr/web/api/document/adoptnode/index.html | 68 +++ files/fr/web/api/document/alinkcolor/index.html | 38 ++ files/fr/web/api/document/applets/index.html | 17 + files/fr/web/api/document/bgcolor/index.html | 35 ++ files/fr/web/api/document/body/index.html | 32 ++ .../api/document/caretrangefrompoint/index.html | 144 ++++++ files/fr/web/api/document/characterset/index.html | 56 +++ files/fr/web/api/document/clear/index.html | 37 ++ files/fr/web/api/document/compatmode/index.html | 53 +++ files/fr/web/api/document/contenttype/index.html | 30 ++ .../fr/web/api/document/createattribute/index.html | 91 ++++ .../web/api/document/createcdatasection/index.html | 52 +++ files/fr/web/api/document/createcomment/index.html | 41 ++ .../api/document/createdocumentfragment/index.html | 140 ++++++ files/fr/web/api/document/createelement/index.html | 139 ++++++ .../fr/web/api/document/createelementns/index.html | 181 ++++++++ .../api/document/createentityreference/index.html | 14 + files/fr/web/api/document/createevent/index.html | 90 ++++ .../web/api/document/createexpression/index.html | 31 ++ .../web/api/document/createnodeiterator/index.html | 137 ++++++ .../web/api/document/creatensresolver/index.html | 49 +++ .../createprocessinginstruction/index.html | 55 +++ files/fr/web/api/document/createrange/index.html | 38 ++ .../fr/web/api/document/createtextnode/index.html | 128 ++++++ .../web/api/document/createtreewalker/index.html | 245 +++++++++++ files/fr/web/api/document/currentscript/index.html | 118 +++++ files/fr/web/api/document/defaultview/index.html | 18 + files/fr/web/api/document/designmode/index.html | 102 +++++ files/fr/web/api/document/dir/index.html | 44 ++ files/fr/web/api/document/doctype/index.html | 65 +++ .../web/api/document/document.anchors/index.html | 80 ++++ files/fr/web/api/document/document/index.html | 93 ++++ .../fr/web/api/document/documentelement/index.html | 72 +++ files/fr/web/api/document/documenturi/index.html | 54 +++ .../web/api/document/documenturiobject/index.html | 38 ++ files/fr/web/api/document/domain/index.html | 61 +++ .../api/document/domcontentloaded_event/index.html | 184 ++++++++ files/fr/web/api/document/drag_event/index.html | 313 +++++++++++++ files/fr/web/api/document/dragend_event/index.html | 316 +++++++++++++ .../fr/web/api/document/dragenter_event/index.html | 314 +++++++++++++ .../fr/web/api/document/dragleave_event/index.html | 310 +++++++++++++ .../fr/web/api/document/dragover_event/index.html | 313 +++++++++++++ .../fr/web/api/document/dragstart_event/index.html | 315 +++++++++++++ files/fr/web/api/document/drop_event/index.html | 313 +++++++++++++ .../web/api/document/elementfrompoint/index.html | 52 +++ .../document/enablestylesheetsforset/index.html | 59 +++ files/fr/web/api/document/evaluate/index.html | 163 +++++++ files/fr/web/api/document/execcommand/index.html | 397 +++++++++++++++++ .../fr/web/api/document/exitfullscreen/index.html | 120 +++++ .../fr/web/api/document/exitpointerlock/index.html | 109 +++++ files/fr/web/api/document/featurepolicy/index.html | 47 ++ files/fr/web/api/document/forms/index.html | 116 +++++ .../api/document/fullscreenchange_event/index.html | 85 ++++ .../api/document/fullscreenerror_event/index.html | 69 +++ .../fr/web/api/document/getboxobjectfor/index.html | 42 ++ .../fr/web/api/document/getelementbyid/index.html | 148 +++++++ .../api/document/getelementsbyclassname/index.html | 92 ++++ .../web/api/document/getelementsbyname/index.html | 86 ++++ .../api/document/getelementsbytagname/index.html | 113 +++++ .../api/document/getelementsbytagnamens/index.html | 136 ++++++ files/fr/web/api/document/getselection/index.html | 14 + files/fr/web/api/document/hasfocus/index.html | 151 +++++++ files/fr/web/api/document/head/index.html | 75 ++++ files/fr/web/api/document/height/index.html | 44 ++ files/fr/web/api/document/hidden/index.html | 43 ++ files/fr/web/api/document/images/index.html | 28 ++ .../fr/web/api/document/implementation/index.html | 47 ++ files/fr/web/api/document/importnode/index.html | 92 ++++ files/fr/web/api/document/index.html | 490 +++++++++++++++++++++ .../fr/web/api/document/keypress_event/index.html | 102 +++++ files/fr/web/api/document/lastmodified/index.html | 67 +++ .../web/api/document/laststylesheetset/index.html | 46 ++ files/fr/web/api/document/location/index.html | 111 +++++ .../web/api/document/mozsetimageelement/index.html | 81 ++++ .../api/document/mozsyntheticdocument/index.html | 35 ++ .../api/document/onafterscriptexecute/index.html | 48 ++ .../api/document/onbeforescriptexecute/index.html | 46 ++ .../web/api/document/onfullscreenchange/index.html | 106 +++++ files/fr/web/api/document/onoffline/index.html | 13 + files/fr/web/api/document/ononline/index.html | 39 ++ files/fr/web/api/document/open/index.html | 118 +++++ files/fr/web/api/document/origin/index.html | 106 +++++ files/fr/web/api/document/popupnode/index.html | 43 ++ .../api/document/preferredstylesheetset/index.html | 48 ++ .../web/api/document/querycommandstate/index.html | 101 +++++ .../api/document/querycommandsupported/index.html | 125 ++++++ files/fr/web/api/document/queryselector/index.html | 178 ++++++++ .../web/api/document/queryselectorall/index.html | 232 ++++++++++ files/fr/web/api/document/readystate/index.html | 131 ++++++ files/fr/web/api/document/referrer/index.html | 23 + .../fr/web/api/document/registerelement/index.html | 115 +++++ .../fr/web/api/document/releasecapture/index.html | 38 ++ files/fr/web/api/document/scripts/index.html | 72 +++ files/fr/web/api/document/scroll_event/index.html | 147 +++++++ .../api/document/selectedstylesheetset/index.html | 51 +++ files/fr/web/api/document/stylesheets/index.html | 55 +++ .../fr/web/api/document/stylesheetsets/index.html | 58 +++ files/fr/web/api/document/title/index.html | 54 +++ files/fr/web/api/document/tooltipnode/index.html | 25 ++ .../fr/web/api/document/touchend_event/index.html | 186 ++++++++ .../api/document/transitionend_event/index.html | 85 ++++ files/fr/web/api/document/url/index.html | 24 + .../fr/web/api/document/visibilitystate/index.html | 123 ++++++ files/fr/web/api/document/width/index.html | 45 ++ files/fr/web/api/document/write/index.html | 96 ++++ files/fr/web/api/document/writeln/index.html | 58 +++ files/fr/web/api/document/xmlencoding/index.html | 35 ++ files/fr/web/api/document/xmlversion/index.html | 29 ++ 109 files changed, 11001 insertions(+) create mode 100644 files/fr/web/api/document/activeelement/index.html create mode 100644 files/fr/web/api/document/adoptnode/index.html create mode 100644 files/fr/web/api/document/alinkcolor/index.html create mode 100644 files/fr/web/api/document/applets/index.html create mode 100644 files/fr/web/api/document/bgcolor/index.html create mode 100644 files/fr/web/api/document/body/index.html create mode 100644 files/fr/web/api/document/caretrangefrompoint/index.html create mode 100644 files/fr/web/api/document/characterset/index.html create mode 100644 files/fr/web/api/document/clear/index.html create mode 100644 files/fr/web/api/document/compatmode/index.html create mode 100644 files/fr/web/api/document/contenttype/index.html create mode 100644 files/fr/web/api/document/createattribute/index.html create mode 100644 files/fr/web/api/document/createcdatasection/index.html create mode 100644 files/fr/web/api/document/createcomment/index.html create mode 100644 files/fr/web/api/document/createdocumentfragment/index.html create mode 100644 files/fr/web/api/document/createelement/index.html create mode 100644 files/fr/web/api/document/createelementns/index.html create mode 100644 files/fr/web/api/document/createentityreference/index.html create mode 100644 files/fr/web/api/document/createevent/index.html create mode 100644 files/fr/web/api/document/createexpression/index.html create mode 100644 files/fr/web/api/document/createnodeiterator/index.html create mode 100644 files/fr/web/api/document/creatensresolver/index.html create mode 100644 files/fr/web/api/document/createprocessinginstruction/index.html create mode 100644 files/fr/web/api/document/createrange/index.html create mode 100644 files/fr/web/api/document/createtextnode/index.html create mode 100644 files/fr/web/api/document/createtreewalker/index.html create mode 100644 files/fr/web/api/document/currentscript/index.html create mode 100644 files/fr/web/api/document/defaultview/index.html create mode 100644 files/fr/web/api/document/designmode/index.html create mode 100644 files/fr/web/api/document/dir/index.html create mode 100644 files/fr/web/api/document/doctype/index.html create mode 100644 files/fr/web/api/document/document.anchors/index.html create mode 100644 files/fr/web/api/document/document/index.html create mode 100644 files/fr/web/api/document/documentelement/index.html create mode 100644 files/fr/web/api/document/documenturi/index.html create mode 100644 files/fr/web/api/document/documenturiobject/index.html create mode 100644 files/fr/web/api/document/domain/index.html create mode 100644 files/fr/web/api/document/domcontentloaded_event/index.html create mode 100644 files/fr/web/api/document/drag_event/index.html create mode 100644 files/fr/web/api/document/dragend_event/index.html create mode 100644 files/fr/web/api/document/dragenter_event/index.html create mode 100644 files/fr/web/api/document/dragleave_event/index.html create mode 100644 files/fr/web/api/document/dragover_event/index.html create mode 100644 files/fr/web/api/document/dragstart_event/index.html create mode 100644 files/fr/web/api/document/drop_event/index.html create mode 100644 files/fr/web/api/document/elementfrompoint/index.html create mode 100644 files/fr/web/api/document/enablestylesheetsforset/index.html create mode 100644 files/fr/web/api/document/evaluate/index.html create mode 100644 files/fr/web/api/document/execcommand/index.html create mode 100644 files/fr/web/api/document/exitfullscreen/index.html create mode 100644 files/fr/web/api/document/exitpointerlock/index.html create mode 100644 files/fr/web/api/document/featurepolicy/index.html create mode 100644 files/fr/web/api/document/forms/index.html create mode 100644 files/fr/web/api/document/fullscreenchange_event/index.html create mode 100644 files/fr/web/api/document/fullscreenerror_event/index.html create mode 100644 files/fr/web/api/document/getboxobjectfor/index.html create mode 100644 files/fr/web/api/document/getelementbyid/index.html create mode 100644 files/fr/web/api/document/getelementsbyclassname/index.html create mode 100644 files/fr/web/api/document/getelementsbyname/index.html create mode 100644 files/fr/web/api/document/getelementsbytagname/index.html create mode 100644 files/fr/web/api/document/getelementsbytagnamens/index.html create mode 100644 files/fr/web/api/document/getselection/index.html create mode 100644 files/fr/web/api/document/hasfocus/index.html create mode 100644 files/fr/web/api/document/head/index.html create mode 100644 files/fr/web/api/document/height/index.html create mode 100644 files/fr/web/api/document/hidden/index.html create mode 100644 files/fr/web/api/document/images/index.html create mode 100644 files/fr/web/api/document/implementation/index.html create mode 100644 files/fr/web/api/document/importnode/index.html create mode 100644 files/fr/web/api/document/index.html create mode 100644 files/fr/web/api/document/keypress_event/index.html create mode 100644 files/fr/web/api/document/lastmodified/index.html create mode 100644 files/fr/web/api/document/laststylesheetset/index.html create mode 100644 files/fr/web/api/document/location/index.html create mode 100644 files/fr/web/api/document/mozsetimageelement/index.html create mode 100644 files/fr/web/api/document/mozsyntheticdocument/index.html create mode 100644 files/fr/web/api/document/onafterscriptexecute/index.html create mode 100644 files/fr/web/api/document/onbeforescriptexecute/index.html create mode 100644 files/fr/web/api/document/onfullscreenchange/index.html create mode 100644 files/fr/web/api/document/onoffline/index.html create mode 100644 files/fr/web/api/document/ononline/index.html create mode 100644 files/fr/web/api/document/open/index.html create mode 100644 files/fr/web/api/document/origin/index.html create mode 100644 files/fr/web/api/document/popupnode/index.html create mode 100644 files/fr/web/api/document/preferredstylesheetset/index.html create mode 100644 files/fr/web/api/document/querycommandstate/index.html create mode 100644 files/fr/web/api/document/querycommandsupported/index.html create mode 100644 files/fr/web/api/document/queryselector/index.html create mode 100644 files/fr/web/api/document/queryselectorall/index.html create mode 100644 files/fr/web/api/document/readystate/index.html create mode 100644 files/fr/web/api/document/referrer/index.html create mode 100644 files/fr/web/api/document/registerelement/index.html create mode 100644 files/fr/web/api/document/releasecapture/index.html create mode 100644 files/fr/web/api/document/scripts/index.html create mode 100644 files/fr/web/api/document/scroll_event/index.html create mode 100644 files/fr/web/api/document/selectedstylesheetset/index.html create mode 100644 files/fr/web/api/document/stylesheets/index.html create mode 100644 files/fr/web/api/document/stylesheetsets/index.html create mode 100644 files/fr/web/api/document/title/index.html create mode 100644 files/fr/web/api/document/tooltipnode/index.html create mode 100644 files/fr/web/api/document/touchend_event/index.html create mode 100644 files/fr/web/api/document/transitionend_event/index.html create mode 100644 files/fr/web/api/document/url/index.html create mode 100644 files/fr/web/api/document/visibilitystate/index.html create mode 100644 files/fr/web/api/document/width/index.html create mode 100644 files/fr/web/api/document/write/index.html create mode 100644 files/fr/web/api/document/writeln/index.html create mode 100644 files/fr/web/api/document/xmlencoding/index.html create mode 100644 files/fr/web/api/document/xmlversion/index.html (limited to 'files/fr/web/api/document') diff --git a/files/fr/web/api/document/activeelement/index.html b/files/fr/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..9c165337e8 --- /dev/null +++ b/files/fr/web/api/document/activeelement/index.html @@ -0,0 +1,24 @@ +--- +title: document.activeElement +slug: Web/API/Document/activeElement +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/DocumentOrShadowRoot/activeElement +--- +

{{ ApiRef() }}

+

Résumé

+

Renvoie l'élément qui dispose actuellement du focus.

+

{{ Note("Cet attribut fait partie de la spécification HTML 5 encore en développement.") }}

+

Syntaxe

+
var elemCourant = document.activeElement;
+
+

Exemple

+

Spécification

+ +

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "ja": "ja/DOM/document.activeElement", "pl": "pl/DOM/document.activeElement" } ) }}

diff --git a/files/fr/web/api/document/adoptnode/index.html b/files/fr/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..959e060387 --- /dev/null +++ b/files/fr/web/api/document/adoptnode/index.html @@ -0,0 +1,68 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +tags: + - API + - DOM + - Document + - Méthodes + - Noeuds + - Propriétaire +translation_of: Web/API/Document/adoptNode +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son ownerDocument (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours.

+ +

Pris en charge depuis Gecko 1.9 (Firefox 3)

+ +

Syntaxe

+ +
node = document.adoptNode(externalNode);
+
+ +
+
   node
+
est le noeud adopté  qui a maintenant ce document en tant que son ownerDocument (document propriétaire). Le parentNode du noeud est null, car il n'a pas encore été inséré dans l'arborescence du document.  Notez que node et externalNode sont le même objet après cet appel.  
+
externalNode
+
est le noeud à adopter existant dans un autre document.
+
+ +

Exemple

+ +
var iframe = document.getElementById('my-iframe');
+var iframeImages = iframe.contentDocument.getElementsByTagName('img');
+
+var newParent = document.getElementByTagName('images');
+
+for (var i = 0; i < iframeImages.length; i++) {
+    newParent.appendChild(document.adoptNode(iframeImages[i]));
+}
+
+ +

Notes

+ +

En général l'appel de adoptNode peut échouer en raison du nœud source provenant d'une implémentation différente, mais cela ne devrait pas poser de problème avec les implémentations du navigateur.

+ +

Les nœuds provenant de documents externes doivent être clonés à l'aide de document.importNode() (ou adoptés avec + document.adoptNode()) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes + de Node.ownerDocument, consultez la FAQ DOM du W3C (en anglais).

+ +

Gecko n'obligeait pas à utiliser document.importNode() et document.adoptNode() avant sa version 1.9. Depuis les versions 1.9 + alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception + WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

+ + +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/alinkcolor/index.html b/files/fr/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..81ca413e65 --- /dev/null +++ b/files/fr/web/api/document/alinkcolor/index.html @@ -0,0 +1,38 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - API + - HTML DOM + - Obsolete + - Propriété + - Reference +translation_of: Web/API/Document/alinkColor +--- +
{{APIRef("DOM")}}{{Deprecated_header}}
+ +

Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements mousedown et mouseup.

+ +

Syntaxe

+ +
var color = document.alinkColor;
+document.alinkColor = color;
+
+ +

color est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., blue pour bleu, darkblue pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, #0000FF)

+ +

Notes

+ +

La valeur par défaut pour cette propriété est rouge (#ee000 en hexadécimal) sur Mozilla Firefox.

+ +

document.alinkColor est obsolète dans DOM Level 2 HTML (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}.

+ +

Une autre alternative est document.body.aLink, même si elle est obsolète dans HTML 4.01 (lien en anglais) en faveur de l'alternative CSS ci-dessus.

+ +

Gecko supporte alinkColor/:active et {{Cssxref(":focus")}}. Internet Explorer 6 et 7 supportent alinkColor/:active seulement pour la balise HTML des liens (<a>) et le comportement est le même que :focus sur Gecko. Il n'y a pas de support pour :focus sur IE.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.alinkColor")}}

diff --git a/files/fr/web/api/document/applets/index.html b/files/fr/web/api/document/applets/index.html new file mode 100644 index 0000000000..dfbb22d9b7 --- /dev/null +++ b/files/fr/web/api/document/applets/index.html @@ -0,0 +1,17 @@ +--- +title: Document.applets +slug: Web/API/Document/applets +translation_of: Web/API/Document/applets +--- +

{{ ApiRef() }}

+

Résumé

+

applets retourne une liste ordonnée des applets contenus dans un document.

+

Syntaxe

+
nodeList = document.applets
+
+

Exemple

+
// ( Si vous savez que le second applet est celui que vous voulez )
+my_java_app = document.applets[1];
+
+

Spécification

+

DOM Level 2 HTML: applets

diff --git a/files/fr/web/api/document/bgcolor/index.html b/files/fr/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..b379774259 --- /dev/null +++ b/files/fr/web/api/document/bgcolor/index.html @@ -0,0 +1,35 @@ +--- +title: Document.bgColor +slug: Web/API/Document/bgColor +translation_of: Web/API/Document/bgColor +--- +

{{APIRef("DOM")}} {{ Deprecated_header() }}

+ +

La propriété obsolète bgColor renvoie ou déinit la couleur de fond (background-color) du document courant.

+ +

Syntaxe

+ +
color = document.bgColor
+document.bgColor =color
+
+ +

Parametres

+ + + +

Exemple

+ +
document.bgColor = "darkblue";
+
+ +

Notes

+ +

La valeur par défaut pour cette propriété sur Firefox est le blanc (#ffffff en hexadécimal).

+ +

document.bgColor est obsolète dans le DOM Niveau 2 HTML. L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec document.body.style.backgroundColor. Une autre alternative est document.body.bgColor, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.bgColor")}}

diff --git a/files/fr/web/api/document/body/index.html b/files/fr/web/api/document/body/index.html new file mode 100644 index 0000000000..65b872d225 --- /dev/null +++ b/files/fr/web/api/document/body/index.html @@ -0,0 +1,32 @@ +--- +title: document.body +slug: Web/API/Document/body +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/Document/body +--- +
+ {{ApiRef}}
+

Résumé

+

Retourne l'élément <body> ou <frameset> du document courant.

+

Syntaxe

+
var objRef = document.body;
+document.body = objRef;
+

Exemple

+
// dans le HTML: <body id="ancienElementBody"></body>
+alert(document.body.id); // "ancienElementBody"
+
+var unNouvelElementBody = document.createElement("body");
+
+unNouvelElementBody .id = "nouvelElementBody";
+document.body = unNouvelElementBody ;
+alert(document.body.id); // "nouvelElementBody"
+
+

Notes

+

document.body est l'élément dans lequel le contenu du document est situé. Dans les documents avec un élément <body> celui-ci est retourné, et dans les documents de type frameset l'élément <frameset> le plus extérieur est retourné.

+

Même si body est modifiable, lui affecter une nouvelle valeur retire tous les éléments enfants du <body> existant.

+

Spécification

+ diff --git a/files/fr/web/api/document/caretrangefrompoint/index.html b/files/fr/web/api/document/caretrangefrompoint/index.html new file mode 100644 index 0000000000..02ec1616a9 --- /dev/null +++ b/files/fr/web/api/document/caretrangefrompoint/index.html @@ -0,0 +1,144 @@ +--- +title: Document.caretRangeFromPoint() +slug: Web/API/Document/caretRangeFromPoint +tags: + - API + - DOM + - Document + - Insertion + - Méthode +translation_of: Web/API/Document/caretRangeFromPoint +--- +

{{APIRef("DOM")}}{{Non-standard_header}} 

+ +

La méthode caretRangeFromPoint() de l'interface {{domxref("Document")}} renvoie un objet "Range" (chaîne) pour le fragment de document aux coordonnées spécifiées.

+ +

Syntaxe

+ +
var range = document.caretRangeFromPoint(float x, float y);
+
+ +

Retourne

+ +

Une des réponses suivantes :

+ + + +

Paramètres

+ +
+
x
+
Une position horizontale dans la fenêtre courante.
+
y
+
Une position verticale dans la fenêtre courante.
+
+ +

Exemple

+ +

Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur :

+ +

Contenu HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+ +

Contenu JavaScript

+ +
function insertBreakAtPoint(e) {
+
+    var range;
+    var textNode;
+    var offset;
+
+    if (document.caretPositionFromPoint) {
+        range = document.caretPositionFromPoint(e.clientX, e.clientY);
+        textNode = range.offsetNode;
+        offset = range.offset;
+
+    } else if (document.caretRangeFromPoint) {
+        range = document.caretRangeFromPoint(e.clientX, e.clientY);
+        textNode = range.startContainer;
+        offset = range.startOffset;
+    }
+
+    // divise seulement les TEXT_NODE (noeuds texte)
+    if (textNode && textNode.nodeType == 3) {
+        var replacement = textNode.splitText(offset);
+        var br = document.createElement('br');
+        textNode.parentNode.insertBefore(br, replacement);
+    }
+}
+
+var paragraphs = document.getElementsByTagName("p");
+for (i=0 ; i < paragraphs.length; i++) {
+    paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
+}
+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}

+ +

 

+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari (WebKit)
Basic support{{CompatChrome(43.0)}}20+{{CompatNo()}}1215+{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

diff --git a/files/fr/web/api/document/characterset/index.html b/files/fr/web/api/document/characterset/index.html new file mode 100644 index 0000000000..ac0462a002 --- /dev/null +++ b/files/fr/web/api/document/characterset/index.html @@ -0,0 +1,56 @@ +--- +title: Document.characterSet +slug: Web/API/Document/characterSet +tags: + - API + - DOM + - Document + - Property + - Read-only + - Reference +translation_of: Web/API/Document/characterSet +--- +

{{ApiRef("DOM")}}

+ +

Document.characterSet propriété en lecture seule, renvoie l'encodage du document en cours. Un encodage décrit l'ensemble des caractères possibles et la façon de décoder les octets en ces caractères.

+ +
+

Note : La propriété document.charset et document.inputEncoding sont les alias de document.characterSet. Ne plus les utiliser.

+
+ +

Les utilisateurs peuvent surcharger l'encodage indiqué pour le document (transmis par l'en-tête {{HTTPHeader("Content-Type")}} ou via le {{HTMLElement("meta")}} : <meta charset="utf-8">) grâce au menu Affichage → Encodage du texte. Cela peut notamment permettre de corriger le comportement d'un document dont l'encodage indiqué est incorrect.

+ +

Syntaxe

+ +
var string = document.characterSet
+ +

Exemples

+ +
<button onclick="console.log(document.characterSet);">
+  Affiche le jeu de caractère
+</button>
+<!-- logs document's character set, such as "ISO-8859-1" or "UTF-8" -->
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationEtatCommentaires
{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.characterSet")}}

diff --git a/files/fr/web/api/document/clear/index.html b/files/fr/web/api/document/clear/index.html new file mode 100644 index 0000000000..a8489b0248 --- /dev/null +++ b/files/fr/web/api/document/clear/index.html @@ -0,0 +1,37 @@ +--- +title: Document.clear() +slug: Web/API/Document/clear +tags: + - API + - Deprecated + - Document + - HTML DOM + - Method + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Reference +translation_of: Web/API/Document/clear +--- +

{{APIRef("DOM")}}{{ Deprecated_header() }}

+ +

Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla.

+ +

Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien.

+ +

Syntaxe

+ +
document.clear()
+
+ +

Spécifications

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.clear")}}

diff --git a/files/fr/web/api/document/compatmode/index.html b/files/fr/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..23cd1c1dbd --- /dev/null +++ b/files/fr/web/api/document/compatmode/index.html @@ -0,0 +1,53 @@ +--- +title: document.compatMode +slug: Web/API/Document/compatMode +tags: + - API + - DOM + - Propriété + - Reference +translation_of: Web/API/Document/compatMode +--- +

{{ ApiRef("DOM") }}

+ +

Indique si le document est affiché en mode dégradé (Quirks mode) ou dans le respect des standards.

+ +

Syntaxe

+ +
mode = document.compatMode
+
+ +

Valeurs

+ + + +
+
mode
+
est une  valeur énumérée qui peut être :
+
+ + + +
+
+ +
+

Note : tous ces modes sont maintenant définis dans les normes, de sorte que les anciens «standards» et «presque standards» sont absurdes et ne sont plus utilisés dans les normes.

+
+ +

Exemple

+ +
if (document.compatMode == "BackCompat") {
+  // en mode Quirks
+}
+
+ +

Spécifications

+ + diff --git a/files/fr/web/api/document/contenttype/index.html b/files/fr/web/api/document/contenttype/index.html new file mode 100644 index 0000000000..3301c615c1 --- /dev/null +++ b/files/fr/web/api/document/contenttype/index.html @@ -0,0 +1,30 @@ +--- +title: Document.contentType +slug: Web/API/Document/contentType +tags: + - API + - DOM + - Document + - MIME + - Propriétés + - Rendu +translation_of: Web/API/Document/contentType +--- +

{{ ApiRef("DOM") }}{{Non-standard_header}}

+ +

Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-têtes HTTP ou d'autres sources d'informations MIME et peut être affecté par les conversions automatiques de type effectuées par le navigateur ou les extensions.

+ +

Syntaxe

+ +
contentType = document.contentType;
+
+ +

contentType est une propriété en lecture seule.

+ +

Notes

+ +

La  propriété n'est pas affectée par les balises META.

+ +

Spécifications

+ +

{{SpecName('DOM WHATWG','#dom-document-contenttype','Document.contenttype')}}

diff --git a/files/fr/web/api/document/createattribute/index.html b/files/fr/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..fa0f93d1e0 --- /dev/null +++ b/files/fr/web/api/document/createattribute/index.html @@ -0,0 +1,91 @@ +--- +title: document.createAttribute +slug: Web/API/Document/createAttribute +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/createAttribute +--- +

{{ApiRef("DOM")}}

+ +

La méthode Document.createAttribute() crée un nouveau nœud d'attribut et le renvoie. L'objet a créé un noeud implémentant l'interface {{domxref("Attr")}}. Le DOM n'impose pas le type d'attribut à ajouter à un élément particulier de cette manière.

+ +
+

Note : La chaîne de caractères donnée dans le paramètre est convertie en minuscules.

+
+ +

Syntaxe

+ +
attribut = document.createAttribute(nom)
+
+ +

Paramètres

+ + + +

Valeur de retour

+ +

Un nœud {{domxref("Attr")}}.

+ +

Exceptions levées

+ + + +

Exemples

+ + +
var node = document.getElementById("div1");
+var a = document.createAttribute("my_attrib");
+a.value = "newVal";
+node.setAttributeNode(a);
+console.log(node.getAttribute("my_attrib")); // "newVal"
+
+

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}{{Spec2("DOM WHATWG")}} Comportement précis avec des caractères majuscules.
{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM3 Core')}}Pas de modification.
{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM2 Core')}}Pas de modification.
{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.createAttribute")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/createcdatasection/index.html b/files/fr/web/api/document/createcdatasection/index.html new file mode 100644 index 0000000000..ea4fb083ea --- /dev/null +++ b/files/fr/web/api/document/createcdatasection/index.html @@ -0,0 +1,52 @@ +--- +title: Document.createCDATASection() +slug: Web/API/Document/createCDATASection +tags: + - API + - Création + - DOM + - Document + - Méthode + - Section + - XML + - données +translation_of: Web/API/Document/createCDATASection +--- +
{{APIRef("DOM")}}
+ +

createCDATASection() crée un nouveau noeud de section CDATA et le renvoie.

+ +

Syntaxe

+ +
CDATASectionNode = document.createCDATASection(data)
+
+ + + +

Exemple

+ +
var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")
+
+var cdata = docu.createCDATASection('Some <CDATA> data & then some');
+
+docu.getElementsByTagName('xml')[0].appendChild(cdata);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche : <xml><![CDATA[Some <CDATA> data & then some]]></xml>
+
+ +

Notes

+ + + +

Spécification

+ + diff --git a/files/fr/web/api/document/createcomment/index.html b/files/fr/web/api/document/createcomment/index.html new file mode 100644 index 0000000000..8aaa2be9f3 --- /dev/null +++ b/files/fr/web/api/document/createcomment/index.html @@ -0,0 +1,41 @@ +--- +title: document.createComment +slug: Web/API/Document/createComment +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/createComment +--- +
{{APIRef("DOM")}}
+ +

createComment() crée et retourne un nouveau noeud de type commentaire.

+ +

Syntaxe

+ +
CommentNode = document.createComment(data)
+
+ +

Paramètres

+ +
+
data
+
Une chaîne de caractères représentant le contenu du commentaire.
+
+ +

Exemple

+ +
var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml");
+var comment = docu.createComment('Voici un commentaire pas très bien caché');
+
+docu.getElementsByTagName('xml')[0].appendChild(comment);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche: <xml><!--Voici un commentaire pas très bien caché--></xml>
+ +

Spécification

+ + diff --git a/files/fr/web/api/document/createdocumentfragment/index.html b/files/fr/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..63d8203bb7 --- /dev/null +++ b/files/fr/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,140 @@ +--- +title: document.createDocumentFragment +slug: Web/API/Document/createDocumentFragment +tags: + - API + - DOM + - Document + - HTML + - Méthode + - Reference +translation_of: Web/API/Document/createDocumentFragment +--- +
{{ApiRef("DOM")}}
+ +

Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}.

+ +

Syntaxe

+ +
var fragment = document.createDocumentFragment();
+
+ +

fragment est une référence vers un objet vide de type {{domxref("DocumentFragment")}} .

+ +

Description

+ +

Les objets DocumentFragments sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.

+ +

Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de reflow (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une amélioration des performances.

+ +

Exemple

+ +

Cet exemple crée une liste des principaux navigateurs du web.

+ +

HTML

+ +
<ul id="ul">
+</ul>
+ +

JavaScript

+ +
var element  = document.getElementById('ul'); // en supposant qu'ul existe
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+ +

Résultat

+ +

{{EmbedLiveSample("Example", 600, 140)}}

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM WHATWG')}}Définition initiale dans la spécification DOM 1.
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
 
+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Voir aussi

+
+ + diff --git a/files/fr/web/api/document/createelement/index.html b/files/fr/web/api/document/createelement/index.html new file mode 100644 index 0000000000..50f79879d8 --- /dev/null +++ b/files/fr/web/api/document/createelement/index.html @@ -0,0 +1,139 @@ +--- +title: document.createElement +slug: Web/API/Document/createElement +tags: + - API + - Création + - DOM + - Document + - Elements + - Méthodes +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

Dans un document HTML, la méthode document.createElement() crée un élément HTML du type spécifié par tagName ou un {{domxref("HTMLUnknownElement")}} si tagName n’est pas reconnu.

+ +

Syntaxe

+ +
var element = document.createElement(tagName[, options]);
+ +

Paramètres

+ +
+
tagName
+
Une chaîne de caractères ({{domxref("DOMString")}}) spécifiant le type d’élément à créer. Le {{domxref("Node.nodeName", "nodeName")}} (nom du noeud) de l’élément créé est initialisé avec la valeur de tagName. N’utilisez pas le nom qualifié (comme "html:a") avec cette méthode. Quand elle est appelée sur un document HTML, createElement() convertit tagName en minuscules avant de créer l’élément. Dans Firefox, Opera et Chrome, createElement(null) fonctionne comme createElement("null").
+
options{{optional_inline}}
+
+

Un objet ElementCreationOptions facultatif contenant une seule propriété nommée is dont la valeur est le nom de balise d’un élément personnalisé précédemment défini avec customElements.define(). Voir {{anch("Web component example")}} pour plus de détails.

+
+
+ +

Valeur de retour

+ +

L’objet {{domxref("Element")}} créé.

+ +

Exemples

+ +

Exemple de base

+ +

Ici est créé un nouveau <div> qui est inséré avant l’élément avec l’identifiant "div1".

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Working with elements||</title>
+</head>
+<body>
+  <div id="div1">The text above has been created dynamically.</div>
+</body>
+</html>
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement () {
+  // crée un nouvel élément div
+  var newDiv = document.createElement("div");
+  // et lui donne un peu de contenu
+  var newContent = document.createTextNode('Hi there and greetings!');
+  // ajoute le nœud texte au nouveau div créé
+  newDiv.appendChild(newContent);
+
+  // ajoute le nouvel élément créé et son contenu dans le DOM
+  var currentDiv = document.getElementById('div1');
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

{{EmbedLiveSample("Basic_example", 500, 50)}}

+ +

Exemple de composant web

+ +

L’exemple de fragment suivant est extrait de notre exemple expanding-list-web-component (voir aussi en direct). Dans ce cas, notre élément personnalisé étend la {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}.

+ +
// Crée une classe pour l’élément
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Toujours appeler « super » en premier dans le constructeur
+    super();
+
+    // définition du constructeur omise pour la brièveté
+    ...
+  }
+}
+
+// Définit le nouvel élément
+customElements.define('expanding-list', ExpandingList, { extends: 'ul' });
+ +

Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante :

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

Le nouvel élément donnera un attribut is dont la valeur est la balise de nom de l’élément personnalisé.

+ +
+

Note : Pour la rétrocompatibilité avec les versions précédentes de la spécification des éléments personnalisés, quelques navigateurs permettent de passer une chaîne de caractères ici, à la place d’un objet, dont la valeur est la balise de nom de l’élément personnalisé.

+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.createElement")}}

+ +

Notes CSS Quantum

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/createelementns/index.html b/files/fr/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..f882f231b9 --- /dev/null +++ b/files/fr/web/api/document/createelementns/index.html @@ -0,0 +1,181 @@ +--- +title: document.createElementNS +slug: Web/API/Document/createElementNS +tags: + - API + - Création + - DOM + - Document + - Elements + - Méthodes + - URI +translation_of: Web/API/Document/createElementNS +--- +
{{ApiRef("DOM")}}
+ +

Crée un élément avec l'URI de l'espace de noms spécifié et un nom qualifié.

+ +

Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode createElement .

+ +

Syntaxe

+ +
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
+ +

Paramètres

+ +
+
namespaceURI
+
est une chaîne de caractères qui spécifie l'URI de l'espace de noms à associer à l'élément. La propriété namespaceURI de l'élément créé est initialisée avec la valeur de namespaceURI. voir URI d'espaces de nom valides
+
qualifiedName
+
est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété nodeName de l'élément créé est initialisée avec la valeur de qualifiedName
+
Options Facultatif
+
Un objet facultatif ElementCreationOptions contient une propriété unique nommée is, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de  customElements.define() . Pour la rétro-compatibilité avec les versions précédentes de la spécification des éléments personnalisés, quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir  Extending native HTML elements  pour plus d'informations sur la façon d'utiliser ce paramètre.
+
Le nouvel élément recevra un attribut is dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs.
+
+ +

Valeur de retour

+ +
+
Le nouvel element.
+
+ +

URI d'espaces de nom valides

+ + + +

Exemple

+ +

Cet exemple crée un nouvel élément <div> dans l'espace de noms XHTML et l'ajoute à l'élément vbox. Bien que ce ne soit pas un document XUL très utile, cela montre l'utilisation d'éléments de deux espaces de noms différents au sein d'un même document :

+ +
<?xml version="1.0"?>
+<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      title="||Working with elements||"
+      onload="init()">
+
+<script type="text/javascript"><![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]></script>
+
+ <vbox id='ContainerBox' flex='1'>
+  <html:div>
+   Le script sur cette page ajoutera du contenu dynamique ci-dessous :
+  </html:div>
+ </vbox>
+
+</page>
+ +
+

Note : Cet exemple utilise un script interne, ce qui n'est pas recommandé dans les documents XHTML. Cet exemple particulier est en fait un document XUL intégrant du XHTML. Cependant, la recommandation s'applique quand même.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
options argument{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatGeckoDesktop(50)}}[2][3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Dans les versions précédentes de la spécification, cet argument était juste une chaîne de caractères dont la valeur était un nom d'élément personnalisé. Par souci de compatibilité ascendante, Chrome accepte les deux formes .

+ +

[2] Voir [1] ci-dessus : comme Chrome, Firefox accepte une chaîne au lieu d'un objet ici, mais seulement à partir de la version 51 et suivantes. Dans la version 50, les options doivent être un objet.

+ +

[3] Pour expérimenter avec des éléments personnalisés dans Firefox, vous devez définir les préférences dom.webcomponents.enabled et dom.webcomponents.customelements.enabled à true (vrai).

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/createentityreference/index.html b/files/fr/web/api/document/createentityreference/index.html new file mode 100644 index 0000000000..c8881dddcb --- /dev/null +++ b/files/fr/web/api/document/createentityreference/index.html @@ -0,0 +1,14 @@ +--- +title: Document.createEntityReference() +slug: Web/API/Document/createEntityReference +translation_of: Web/API/Document/createEntityReference +--- +

{{ ApiRef("DOM") }}

+ +

{{ obsolete_header("7.0") }}

+ +

Avant {{ gecko("7.0") }} cette méthode apparaissait présente mais en raison du bogue {{bug("9850")}}, elle renvoyait toujours uniquement "null". La seule solution consiste à créer un noeud de texte, une section CDATA, une valeur de noeud d'attribut, etc., qui ont la valeur référencée par l'entité, en utilisant Les caractères d'échappement ou fromCharCode() si nécessaire.

+ +

Spécifications

+ +

createEntityReference

diff --git a/files/fr/web/api/document/createevent/index.html b/files/fr/web/api/document/createevent/index.html new file mode 100644 index 0000000000..b07312c314 --- /dev/null +++ b/files/fr/web/api/document/createevent/index.html @@ -0,0 +1,90 @@ +--- +title: Document.createEvent() +slug: Web/API/Document/createEvent +tags: + - API + - DOM + - Méthode + - Reference +translation_of: Web/API/Document/createEvent +--- +
+

De nombreuses méthodes utilisées avec createEvent, tels que initCustomEvent, sont obsolètes. Utilisez le constructeur d'événement à la place.

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

Crée un event du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à element.dispatchEvent.

+ +

Syntaxe

+ +
var event = document.createEvent(type);
+
+ + + +

Exemple

+ +
// Crée l'événement.
+var event = document.createEvent('Event');
+
+// Nomme l'événement 'build'.
+event.initEvent('build', true, true);
+
+//  Écoute l'événement.
+elem.addEventListener('build', function (e) {
+  // e.target correspond à elem
+}, false);
+
+// target peut être tout Element ou autre EventTarget.
+elem.dispatchEvent(event);
+
+ +

Notes

+ +

Les chaînes de type d'événement appropriées pour passer à createEvent () sont répertoriées dans la norme DOM - voir le tableau à l'étape 2. Gardez à l'esprit que la plupart des objets événement ont maintenant des constructeurs, qui sont la méthode recommandée pour créer des occurrences d'objet événement.

+ +

Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :

+ + + + + + + + + + + + + + + + + + + + + + + + +
Event ModuleStandard event objectGecko also supports
Text event moduleTextEventTextEvents
Keyboard event moduleKeyboardEventKeyEvents
Basic events moduleEventEvents
+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/createexpression/index.html b/files/fr/web/api/document/createexpression/index.html new file mode 100644 index 0000000000..57bd734923 --- /dev/null +++ b/files/fr/web/api/document/createexpression/index.html @@ -0,0 +1,31 @@ +--- +title: Document.createExpression() +slug: Web/API/Document/createExpression +tags: + - API + - DOM + - Méthode + - XPath +translation_of: Web/API/Document/createExpression +--- +

{{ ApiRef("DOM") }}

+ +

Cette méthode compile une XPathExpression qui peut ensuite être utilisée pour des évaluations (répétées).

+ +

Syntaxe

+ +
xpathExpr = document.createExpression(xpathText, namespaceURLMapper);
+
+ +

Paramètres

+ + + +

{{ Fx_minversion_note(3, "Avant Firefox 3, vous pouviez appeler cette méthode sur des documents autres que celui que vous aviez prévu d'exécuter avec XPath. Sous Firefox 3, vous devez l'appeler sur le même document.") }}

+ +

Valeur retournée

+ +

XPathExpression

diff --git a/files/fr/web/api/document/createnodeiterator/index.html b/files/fr/web/api/document/createnodeiterator/index.html new file mode 100644 index 0000000000..b43b427f36 --- /dev/null +++ b/files/fr/web/api/document/createnodeiterator/index.html @@ -0,0 +1,137 @@ +--- +title: Document.createNodeIterator() +slug: Web/API/Document/createNodeIterator +tags: + - API + - DOM + - Méthodes +translation_of: Web/API/Document/createNodeIterator +--- +

{{APIRef("DOM")}}

+ +

Renvoie un  nouvel objet NodeIterator.

+ +

Syntaxe

+ +
var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
+
+ +

Valeurs

+ +
+
root
+
Le noeud racine à partir duquel commencer la traversée de {{domxref("NodeIterator")}}.
+
whatToShow {{ optional_inline() }}
+
Est un unsigned long (long non signé) facultatif représentant un masque de bits créé par la combinaison des constantes de la propriété NodeFilter. C'est un moyen pratique de filtrage pour certains types de noeuds. Il est par défaut 0xFFFFFFFF représentant la constante SHOW_ALL. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
+
+
filter {{ optional_inline() }}
+
Un objet implémentant l'interface {{ domxref("NodeFilter") }} ; sa méthode acceptNode() sera appelée pour chaque nœud du sous-arbre basé à la racine qui est accepté comme inclus par l'indicateur whatToShow pour déterminer s'il faut ou non l'inclure dans la liste des nœuds iterables (une simple fonction de rappel peut également être utilisée à la place). La méthode devrait retourner l'un des NodeFilter.FILTER_ACCEPT, NodeFilter.FILTER_REJECT ou NodeFilter.FILTER_SKIP. Voir l'{{anch("Exemple")}}.
+
+ +
Note : Avant Gecko 12.0 {{geckoRelease("12.0")}}, cette méthode acceptait un quatrième paramètre facultatif (entityReferenceExpansion). Cela ne faisait pas partie de la spécification DOM4 et a donc été supprimé. Ce paramètre indiquait si les enfants des nœuds de référence d'entité étaient visibles ou non par l'itérateur. Puisque de tels noeuds n'ont jamais été créés dans les navigateurs, ce paramètre n'a eu aucun effet.
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    function(node) {
+        return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+    }
+);
+var pars = [];
+var currentNode;
+
+while (currentNode = nodeIterator.nextNode()) {
+  pars.push(currentNode);
+}
+
+
+ +

Compatibilité des navigateurs

+ +

Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge

+ +

Voir aussi

+ + + +

Spécifications

+ +

DOM Level 2 Traversal : NodeIterator

diff --git a/files/fr/web/api/document/creatensresolver/index.html b/files/fr/web/api/document/creatensresolver/index.html new file mode 100644 index 0000000000..d9546328ae --- /dev/null +++ b/files/fr/web/api/document/creatensresolver/index.html @@ -0,0 +1,49 @@ +--- +title: Document.createNSResolver() +slug: Web/API/Document/createNSResolver +tags: + - API + - DOM + - Méthodes + - XPath +translation_of: Web/API/Document/createNSResolver +--- +

{{ ApiRef("DOM") }}

+ +

Crée un XPathNSResolver qui résout les espaces de noms en respectant les définitions dans la portée pour un noeud spécifié.

+ +

Syntaxe

+ +
nsResolver = document.createNSResolver(node);
+
+ +

Paramètres

+ + + +

Valeur retournée

+ + + +

Notes

+ +

Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression XPath puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode  lookupNamespaceURI  du DOM de niveau 3 sur les noeuds lors de la résolution de namespaceURI à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de lookupNamespaceURI. Résout aussi correctement le préfixe implicite xml.

+ +

Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, p[@id='_myid'] pour xmlns='http://www.w3.org/1999/xhtml'). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que *namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid'] (cette approche fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur comment créer un résolveur d'espace de nom défini par l'utilisateur si vous souhaitez adopter cette dernière approche.

+ +

createNSResolver a été introduit dans DOM Niveau 3.

+ +

Voir aussi

+ + + +

Spécifications

+ +

DOM Level 3 XPath Specification : createNSResolver

diff --git a/files/fr/web/api/document/createprocessinginstruction/index.html b/files/fr/web/api/document/createprocessinginstruction/index.html new file mode 100644 index 0000000000..91c7652457 --- /dev/null +++ b/files/fr/web/api/document/createprocessinginstruction/index.html @@ -0,0 +1,55 @@ +--- +title: Document.createProcessingInstruction() +slug: Web/API/Document/createProcessingInstruction +tags: + - API + - Création + - DOM + - Méthodes + - Noeuds + - Reference + - Traitement + - instructions +translation_of: Web/API/Document/createProcessingInstruction +--- +

{{APIRef("DOM")}}

+ +

createProcessingInstruction() crée un nouveau noeud d'instruction de traitement et le renvoie.

+ +

Syntaxe

+ +
Processing instruction node = document.createProcessingInstruction(target, data)
+
+ +

Paramètres

+ + + +

Exceptions

+ +
+
NOT_SUPPORTED_ERR
+
Lancée si vous tentez de créer un noeud d'instructions de traitement sur un document HTML dans Gecko 9 {{ geckoRelease("9.0") }} ou antérieurs. Dans Gecko 10.0 {{ geckoRelease("10.0") }} et ultérieurs, vous pouvez utiliser cette méthode sur des documents HTML.
+
DOM_INVALID_CHARACTER
+
Lancée si vous essayez d'ajouter une cible d'instruction de traitement invalide (ce devrait être le cas avec le nom XML et toutes les combinaisons des lettres "xml"), ou si la séquence d'instructions de traitement de fermeture ("?>") est ajoutée aux données. Les données fournies par l'utilisateur ne peuvent donc pas être utilisées en toute sécurité sans échappement ou autres moyens de faire face à de telles situations.
+
+ +

Exemple

+ +
var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")
+
+var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
+
+docu.insertBefore(pi, docu.firstChild);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/>
+
+ +

Spécifications

+ +

DOM 4: createProcessingInstruction

diff --git a/files/fr/web/api/document/createrange/index.html b/files/fr/web/api/document/createrange/index.html new file mode 100644 index 0000000000..5a187c5f3a --- /dev/null +++ b/files/fr/web/api/document/createrange/index.html @@ -0,0 +1,38 @@ +--- +title: Document.createRange +slug: Web/API/Document/createRange +tags: + - API + - DOM + - Document + - Méthodes +translation_of: Web/API/Document/createRange +--- +
{{APIRef("DOM")}}
+ +

Retourne un objet {{domxref("Range")}}.

+ +

Syntaxe

+ +
range = document.createRange();
+
+ +

range devient un objet {{domxref("Range")}}.

+ +

Exemple

+ +
var range = document.createRange();
+
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+
+ +

Notes

+ +

Une fois un objet Range créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes.

+ +

Spécification

+ + diff --git a/files/fr/web/api/document/createtextnode/index.html b/files/fr/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..8f16aa0440 --- /dev/null +++ b/files/fr/web/api/document/createtextnode/index.html @@ -0,0 +1,128 @@ +--- +title: document.createTextNode +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/createTextNode +--- +

{{APIRef("DOM")}}

+ +

Crée un nouveau nœud de texte.

+ +

Syntaxe

+ +
var text = document.createTextNode(données);
+
+ + + +

Exemple

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode example</title>
+<script>
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="addTextNode('YES! ');">YES!</button>
+  <button onclick="addTextNode('NO! ');">NO!</button>
+  <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
+
+  <hr />
+
+  <p id="p1">First line of paragraph.</p>
+</body>
+</html>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM3 Core")}}Pas de changement
{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM2 Core")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/fr/web/api/document/createtreewalker/index.html b/files/fr/web/api/document/createtreewalker/index.html new file mode 100644 index 0000000000..87dbad7998 --- /dev/null +++ b/files/fr/web/api/document/createtreewalker/index.html @@ -0,0 +1,245 @@ +--- +title: Document.createTreeWalker() +slug: Web/API/Document/createTreeWalker +tags: + - API + - Arborescence + - DOM + - Document + - Filtre + - Méthodes + - Noeuds +translation_of: Web/API/Document/createTreeWalker +--- +
{{ApiRef("Document")}}
+ +

La méthode de création Document.createTreeWalker() renvoie un nouvel objet {{domxref("TreeWalker")}}.

+ +

Syntaxe

+ +
treeWalker = document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion);
+
+ +

Paramètres

+ +
+
root
+
est le {{domxref("Node")}} (noeud) racine du {{domxref("TreeWalker")}} à traverser. Généralement, ce sera un élément appartenant au document.
+
whatToShow {{optional_inline}}
+
est un unsigned long (long non signé) facultatif représentant un masque de bits créé par combinaison des propriétés de constante de NodeFilter. C'est un moyen pratique de filtrage pour certains types de nœuds. Par défaut 0xFFFFFFFF représentant la constante SHOW_ALL. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
+
+
filter {{optional_inline}}
+
est un {{domxref("NodeFilter")}} (filtre de noeud) facultatif, c'est à dire un objet avec une méthode acceptNode appelé par {{domxref("TreeWalker")}} pour déterminer s'il doit accepter ou non un nœud qui a passé le test whatToShow.
+
entityReferenceExpansion {{optional_inline}} {{obsolete_inline}}
+
est un {{domxref("Boolean")}} (booléen) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, son sous-arbre doit être supprimé en même temps.
+
+ +

Exemple

+ +

L'exemple suivant passe à travers tous les noeuds du "body" (corps du document), réduit l'ensemble des noeuds aux éléments, passe simplement à travers chaque noeud acceptable (à la place, il pourrait réduire l'ensemble dans la méthode acceptNode()), puis utilise l'itérateur de traversée de l'arbre créé pour avancer à travers les nœuds (maintenant tous les éléments) et les écrire dans un tableau.

+ +
var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}{{Spec2('DOM WHATWG')}}Suppression du paramètre expandEntityReferences. Les paramètres facultatifs  whatToShow et filter .
{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8.1")}}9.09.03.0
whatToShow and filter optional1.0{{CompatUnknown}}{{CompatGeckoDesktop("12")}}{{CompatNo}}{{CompatVersionUnknown}}3.0
expandEntityReferences1.0{{CompatUnknown}}{{CompatGeckoDesktop("1.8.1")}}
+ Removed in {{CompatGeckoDesktop("12")}}		9.09.03.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8.1")}}{{CompatVersionUnknown}}9.03.0
whatToShow and filter optional{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("12")}}{{CompatNo}}{{CompatVersionUnknown}}3.0
expandEntityReferences{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("1.8.1")}}
+ Removed in {{CompatGeckoDesktop("12")}}		{{CompatVersionUnknown}}9.03.0
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/currentscript/index.html b/files/fr/web/api/document/currentscript/index.html new file mode 100644 index 0000000000..68fd2e0f4b --- /dev/null +++ b/files/fr/web/api/document/currentscript/index.html @@ -0,0 +1,118 @@ +--- +title: Document.currentScript +slug: Web/API/Document/currentScript +tags: + - API + - DOM + - Propriété + - Reference + - Script +translation_of: Web/API/Document/currentScript +--- +
{{ApiRef("DOM")}}
+ +

Retourne l'élément {{HTMLElement("script")}} dont le script est en cours de traitement.

+ +

Syntaxe

+ +
var curScriptElement = document.currentScript;
+
+ +

Exemple

+ +

Cet exemple vérifie si le script s'exécute de manière asynchrone :

+ +
if (document.currentScript.async) {
+  console.log("Exécution asynchrone");
+} else {
+  console.log("Exécution synchrone");
+}
+ +

Voir l'exemple sur une page

+ +

Notes

+ +

Il est important de noter que l'élément {{HTMLElement("script")}} ne sera pas référencé si le code dans le script est appelé par une fonction de rappel ou par un gestionnaire d'événements ; seul sera référencé l'élément alors qu'il est initialement en cours d'exécution.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}{{Spec2("HTML WHATWG")}}Définition initiale
+ +

Compatibilité navigateur

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(29.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}{{CompatNo}}168
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}8
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/defaultview/index.html b/files/fr/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..e956485e62 --- /dev/null +++ b/files/fr/web/api/document/defaultview/index.html @@ -0,0 +1,18 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +translation_of: Web/API/Document/defaultView +--- +

Résumé

+

Dans les navigateurs, cette propriété renvoie l'objet window associé au document ou null si non disponible.

+

Syntaxe

+
var win = document.defaultView;
+

Cette propriété est en lecture seule.

+

Notes

+

D'après quirksmode, defaultView n'est pas supporté dans les versions d'IE inférieures à 9.

+

Spécification

+ diff --git a/files/fr/web/api/document/designmode/index.html b/files/fr/web/api/document/designmode/index.html new file mode 100644 index 0000000000..f3bac92585 --- /dev/null +++ b/files/fr/web/api/document/designmode/index.html @@ -0,0 +1,102 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +translation_of: Web/API/Document/designMode +--- +
{{ ApiRef() }}
+ +
 
+ +

Résumé

+ +

document.designMode contrôle si l'ensemble du document est modifiable. Les valeurs valides sont "on" et "off". Conformément à la spécification, cette propriété est par défaut sur "off". Firefox suit cette norme. Les versions antérieures de Chrome et IE ont par défaut la valeur "inherit". Pour les versions entre IE6-10, la valeur est en majuscule.

+ +

Syntaxe

+ +
var mode = document.designMode;
+document.designMode = "on";
+document.designMode = "off";
+ +

Exemple

+ +

Rendre un document {{HTMLElement("iframe")}} éditable

+ +
iframe_node.contentDocument.designMode = "on";
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/dir/index.html b/files/fr/web/api/document/dir/index.html new file mode 100644 index 0000000000..9ae15a8559 --- /dev/null +++ b/files/fr/web/api/document/dir/index.html @@ -0,0 +1,44 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +tags: + - API + - Document + - Propriété + - Reference +translation_of: Web/API/Document/dir +--- +

{{ApiRef("")}}

+ +

La propriété Document.dir est une chaîne de caractères {{domxref("DOMString")}} représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche. Les valeurs possibles sont 'rtl', droite vers gauche, et 'ltr', gauche vers droite.

+ +

Syntaxe

+ +
dirStr = document.dir;
+document.dir = dirStr;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "#dom-document-dir", "Document.dir")}}{{Spec2("HTML WHATWG")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.dir")}}

diff --git a/files/fr/web/api/document/doctype/index.html b/files/fr/web/api/document/doctype/index.html new file mode 100644 index 0000000000..980447cc3c --- /dev/null +++ b/files/fr/web/api/document/doctype/index.html @@ -0,0 +1,65 @@ +--- +title: Document.doctype +slug: Web/API/Document/doctype +tags: + - API + - DOM + - DTD + - Document + - Propriétés + - Type +translation_of: Web/API/Document/doctype +--- +
{{ApiRef("DOM")}}
+ +

Renvoie la "Document Type Declaration (DTD)" (déclaration de type de document) associée avec le document actuel. L'objet renvoyé implémente l'interface {{domxref("DocumentType")}}. Utilisez {{domxref("DOMImplementation.createDocumentType()")}} pour créer un DocumentType.

+ +

Syntaxe

+ +
doctype = document.doctype;
+
+ + + +

Exemple

+ +
var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);
+ +

Notes

+ +

La propriété renvoie null si aucune DTD n'est associée au document en cours.

+ +

DOM level 2 ne prend pas en charge l'édition de la déclaration de type de document (DTD).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM3 Core")}}Valeur de retour modifiée pour les documents HTML avec absence d'élément {{HTMLElement("html")}}. Définit que le type de document peut être modifié.
{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM2 Core")}}Définition initiale
diff --git a/files/fr/web/api/document/document.anchors/index.html b/files/fr/web/api/document/document.anchors/index.html new file mode 100644 index 0000000000..09fadf1b61 --- /dev/null +++ b/files/fr/web/api/document/document.anchors/index.html @@ -0,0 +1,80 @@ +--- +title: Document.anchors +slug: Web/API/Document/Document.anchors +translation_of: Web/API/Document/anchors +--- +
{{APIRef("DOM")}} {{deprecated_header()}}
+ +

anchors retourne une liste de toutes les ancres du document.

+ +

Syntaxe

+ +
nodeList = document.anchors;
+
+ +

Exemple

+ +
if ( document.anchors.length >= 5 ) {
+  dump("Trop d'ancres trouvées !");
+  window.location = "http://www.google.com";
+}
+
+ +

L'exemple suivant remplit un tableau avec chaque ancre présente sur la page :

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Test</title>
+<script>
+function init() {
+  var toc = document.getElementById("toc");
+  var i, li, newAnchor;
+  for (i = 0; i < document.anchors.length; i++) {
+    li = document.createElement("li");
+    newAnchor = document.createElement('a');
+    newAnchor.href = "#" + document.anchors[i].name;
+    newAnchor.innerHTML = document.anchors[i].text;
+    li.appendChild(newAnchor);
+    toc.appendChild(li);
+  }
+}
+</script>
+
+</head>
+<body onload="init()">
+
+<h1>Title</h1>
+<h2><a name="contents">Contents</a></h2>
+<ul id="toc"></ul>
+
+<h2><a name="plants">Plants</a></h2>
+<ol>
+    <li>Apples</li>
+    <li>Oranges</li>
+    <li>Pears</li>
+</ol>
+
+<h2><a name="veggies">Veggies</a></h2>
+<ol>
+    <li>Carrots</li>
+    <li>Celery</li>
+    <li>Beats</li>
+</ol>
+
+</body>
+</html>
+
+ +

Voir dans JSFiddle

+ +

Notes

+ +

Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut name, pas celles créées avec l'attribut id.

+ +

Spécification

+ + diff --git a/files/fr/web/api/document/document/index.html b/files/fr/web/api/document/document/index.html new file mode 100644 index 0000000000..92f2305c02 --- /dev/null +++ b/files/fr/web/api/document/document/index.html @@ -0,0 +1,93 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - Constructeur + - DOM + - Document + - Reference +translation_of: Web/API/Document/Document +--- +

{{APIRef}}

+ +

Le constructeur Document crée un nouvel objet de {{domxref("Document")}}, lequel c'est la référence de la page courante dans le navigateur et servant comme point d'entrer aux contenus de la page.

+ +

Syntaxe

+ +
var document = new Document()
+ +

Paramètres

+ +

None.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Compatibilité Navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(47)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(60)}}{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(47)}}{{CompatUnknown}}
+
diff --git a/files/fr/web/api/document/documentelement/index.html b/files/fr/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..e345027b13 --- /dev/null +++ b/files/fr/web/api/document/documentelement/index.html @@ -0,0 +1,72 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +tags: + - API + - DOM + - Noeud + - Propriétés + - Racine + - Reference +translation_of: Web/API/Document/documentElement +--- +

{{ ApiRef("DOM") }}

+ +

Document.documentElementrenvoie l'Element qui est l'élément racine du document (par exemple, l'élément <html> pour les documents HTML).

+ +

Syntaxe

+ +
var element = document.documentElement;
+
+ +

Exemple

+ +
var racine = document.documentElement;
+var premierNiveau = racine.childNodes;
+// premierNiveau est une NodeList des enfants directs de l'élément racine
+for (var i = 0; i < premierNiveau.length; i++) {
+   // fait quelque chose avec chaque enfant direct de l'élément racine
+   // en tant que premierNiveau[i]
+}
+
+ +

Notes

+ +

Pour tout document HTML non vide, document.documentElement sera toujours un élément {{HTMLElement ("html")}}. Pour tout document XML non vide, document.documentElement sera toujours l'élément racine du document.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM2 Core')}} 
{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM3 Core')}} 
{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM4')}} 
{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.documentElement")}}

diff --git a/files/fr/web/api/document/documenturi/index.html b/files/fr/web/api/document/documenturi/index.html new file mode 100644 index 0000000000..31e15a16be --- /dev/null +++ b/files/fr/web/api/document/documenturi/index.html @@ -0,0 +1,54 @@ +--- +title: Document.documentURI +slug: Web/API/Document/documentURI +tags: + - API + - DOM + - Document + - Propriétés + - URI +translation_of: Web/API/Document/documentURI +--- +
{{ApiRef("DOM")}}
+ +

La propriété documentURI de l'interface {{domxref("Document")}} renvoie l'emplacement du document sous forme "string" (chaîne de caractères).

+ +

Initialement, la spécification DOM3 définissait cet attribut en lecture/écriture. Dans la norme actuelle DOM, il est en lecture seule.

+ +

Syntaxe

+ +
var string = document.documentURI;
+
+ +

Notes

+ +

Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie la même valeur. Contrairement à l'URL, documentURI est disponible pour tous les types de documents.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}{{Spec2('DOM3 Core')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + + +

{{Compat("api.Document.documentURI")}}

diff --git a/files/fr/web/api/document/documenturiobject/index.html b/files/fr/web/api/document/documenturiobject/index.html new file mode 100644 index 0000000000..3c9f6fcb6f --- /dev/null +++ b/files/fr/web/api/document/documenturiobject/index.html @@ -0,0 +1,38 @@ +--- +title: document.documentURIObject +slug: Web/API/Document/documentURIObject +tags: + - API + - DOM + - Propriétés + - Reference +translation_of: Web/API/Document/documentURIObject +--- +

{{ ApiRef("DOM") }}

+ +

La propriété en lecture seule Document.documentURIObject renvoie un objet {{ Interface("nsIURI") }} représentant l'URI du document.

+ +

Cette propriété fonctionne uniquement pour les scripts privilégiés (UniversalXPConnect), comme le code des extensions. Pour le contenu Web, elle n'a aucune signification particulière et peut être utilisée comme n'importe quelle propriété personnalisée.

+ +

Dans le cas d'un code privilégié, il convient de faire attention à ne pas essayer d'obtenir ou modifier cette propriété sur un objet de contenu non enveloppé (par exemple sur l'objet wrappedJSObject d'un XPCNativeWrapper). Consultez les commentaires du {{ Bug(324464) }} pour plus de détails.

+ +

Syntaxe

+ +
var uri = doc.documentURIObject;
+ +

Exemple

+ +
// Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http »,
+// en supposant que ce code s'exécute dans le contexte de browser.xul
+
+var uriObj = content.document.documentURIObject;
+var uriPort = uriObj.port;
+
+if (uriObj.schemeIs('http')) {
+  ...
+}
+
+ +

Spécifications

+ +

Ne fait partie d'aucune spécification.

diff --git a/files/fr/web/api/document/domain/index.html b/files/fr/web/api/document/domain/index.html new file mode 100644 index 0000000000..94d4f1775b --- /dev/null +++ b/files/fr/web/api/document/domain/index.html @@ -0,0 +1,61 @@ +--- +title: Document.domain +slug: Web/API/Document/domain +tags: + - API + - Document + - HTML DOM + - NeedsCompatTable + - NeedsMarkupWork + - NeedsSpecTable + - Propriété + - Reference +translation_of: Web/API/Document/domain +--- +
{{ApiRef}}
+ +

Résumé

+ +

Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la politique d'origine identique.

+ +

Syntaxe

+ +
var chaineDomaine = document.domain; document.domain = chaine;
+
+ +

Exemple

+ +
// Pour le document www.example.xxx/good.html,
+// ce script ferme la fenêtre
+var mauvaisDomaine = "www.example.xxx";
+
+if (document.domain == mauvaisDomaine )
+   window.close(); // juste un exemple - window.close() n'a parfois aucun effet.
+ +
// Pour l'URI http://developer.mozilla.org/en-US/docs/Web, ce qui
+// suit définit le domaine comme étant la chaîne "developer.mozilla.org"
+var domaine = document.domain;
+
+ +

Notes

+ +

Cette propriété retourne null si le domaine du document ne peut pas être identifié.

+ +

Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son domaine de base. Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org".

+ +

Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null.

+ +

Mozilla fait la distinction entre la propriété d'un document.domain qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini document.domain à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini document.domain et que les domaines dans les URLs sont les mêmes (implementation). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS)  depuis ses sous-domaines (par exemple, https://bugzilla.mozilla.org pourrait être attaqué par des pièces jointes de bugs sur https://bug*.bugzilla.mozilla.org).

+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/domcontentloaded_event/index.html b/files/fr/web/api/document/domcontentloaded_event/index.html new file mode 100644 index 0000000000..29c8b67905 --- /dev/null +++ b/files/fr/web/api/document/domcontentloaded_event/index.html @@ -0,0 +1,184 @@ +--- +title: 'Document: DOMContentLoaded event' +slug: Web/API/Document/DOMContentLoaded_event +translation_of: Web/API/Document/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

L'évènement DOMContentLoaded est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document.

+ + + + + + + + + + + + + + + + + + + + +
BouillonneOui
AnnulableOui (bien que spécifié comme évènement simple non annulable)
Interface{{domxref("Event")}}
Propriété de gestion de l’évènementAucune
+ +

Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord load là où DOMContentLoaded serait plus approprié.

+ +

Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code (en) JavaScript asynchrone et (en) optimiser le chargement des feuilles de styles. Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML.

+ +

Exemples

+ +

Usage simple

+ +
document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
+});
+
+ +

Retarde DOMContentLoaded

+ +
<script>
+  document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
+  });
+
+for( let i = 0; i < 1000000000; i++)
+{} // This synchronous script is going to delay parsing of the DOM,
+   // so the DOMContentLoaded event is going to launch later.
+</script>
+
+ +

Vérifie que le contenu si le chargement est déjà fini

+ +

L'évènement DOMContentLoaded peut-être déclenché avant que le script soit exécuté, donc il vaut mieux vérifier avant d'ajouter un écouteur d'évènement.

+ +
function doSomething() {
+  console.info('DOM loaded');
+}
+
+if (document.readyState === 'loading') {  // Loading hasn't finished yet
+  document.addEventListener('DOMContentLoaded', doSomething);
+} else {  // `DOMContentLoaded` has already fired
+  doSomething();
+}
+
+ +

Démonstration

+ +

HTML

+ +
<div class="controls">
+  <button id="reload" type="button">Reload</button>
+</div>
+
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
+</div>
+ + + +

JS

+ +
const log = document.querySelector('.event-log-contents');
+const reload = document.querySelector('#reload');
+
+reload.addEventListener('click', () => {
+  log.textContent ='';
+  window.setTimeout(() => {
+      window.location.reload(true);
+  }, 200);
+});
+
+window.addEventListener('load', (event) => {
+    log.textContent = log.textContent + 'load\n';
+});
+
+document.addEventListener('readystatechange', (event) => {
+    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+});
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    log.textContent = log.textContent + `DOMContentLoaded\n`;
+});
+
+
+ +

Résultat

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.DOMContentLoaded_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/drag_event/index.html b/files/fr/web/api/document/drag_event/index.html new file mode 100644 index 0000000000..7bd2710641 --- /dev/null +++ b/files/fr/web/api/document/drag_event/index.html @@ -0,0 +1,313 @@ +--- +title: drag +slug: Web/API/Document/drag_event +translation_of: Web/API/Document/drag_event +--- +
{{APIRef}}
+ +

L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes)

+ +

Informations générales

+ +
+
Interface
+
{{domxref("DragEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
{{domxref("Document")}}, {{domxref("Element")}}
+
Action par défaut
+
Continuer l'opération drag & drop.
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      /* reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent */
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilités navigateur

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique4{{CompatGeckoDesktop("1.9.1")}}10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Support basique{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/dragend_event/index.html b/files/fr/web/api/document/dragend_event/index.html new file mode 100644 index 0000000000..74508d8303 --- /dev/null +++ b/files/fr/web/api/document/dragend_event/index.html @@ -0,0 +1,316 @@ +--- +title: dragend +slug: Web/API/Document/dragend_event +translation_of: Web/API/Document/dragend_event +--- +

L'événement dragend est déclenché lorsque une opération de glissement est terminée (en relâchant le bouton de la souris ou en appuyant sur la touche Echap).

+ +

Informations généralesEdit

+ +
+
Interface
+
{{domxref("DragEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Document")}}, {{domxref("Element")}}
+
Action par défaut
+
Varie
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilités navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique4{{CompatGeckoDesktop("1.9.1")}}[1]10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Support basique{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Avec Gecko, dragend n'est pas envoyé si la source du nœud est déplacée ou supprimée durant l'opération de glissement (par ex. durant un événement drop ou dragover). Voir {{bug("460801")}}.

+ +

Voir aussi

+ +

 

+ + + +

 

diff --git a/files/fr/web/api/document/dragenter_event/index.html b/files/fr/web/api/document/dragenter_event/index.html new file mode 100644 index 0000000000..50739f9415 --- /dev/null +++ b/files/fr/web/api/document/dragenter_event/index.html @@ -0,0 +1,314 @@ +--- +title: dragenter +slug: Web/API/Document/dragenter_event +translation_of: Web/API/Document/dragenter_event +--- +
{{APIRef}}
+ +

L'événement dragenter est déclenché lorsqu'un élément glissé ou une sélection de texte entre dans une cible de drop valide.

+ +

Informations généralesEdit

+ +
+
Interface
+
{{domxref("DragEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
La sélection immédiate de l'utilisateur (l'élément présentement indiqué par l'utilisateur comme cible pour le drop), ou l'élément {{HTMLElement("body")}}.
+
Action par défaut
+
Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatiblités navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique4{{CompatGeckoDesktop("1.9.1")}}[1]10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Support basique{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] L'événement dragenter est déclenché deux fois quand la zone de drop est parente de draggable ou gissable elle même. Voir {{bug("804036")}}.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/dragleave_event/index.html b/files/fr/web/api/document/dragleave_event/index.html new file mode 100644 index 0000000000..ef32a3fe75 --- /dev/null +++ b/files/fr/web/api/document/dragleave_event/index.html @@ -0,0 +1,310 @@ +--- +title: dragleave +slug: Web/API/Document/dragleave_event +translation_of: Web/API/Document/dragleave_event +--- +

L'événement dragleave est déclenché lorsqu'un élément glissé ou une sélection de texte quitte une cible de dépôt valide.

+ +

Informations générales

+ +
+
Interface
+
DragEvent
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Document")}}, {{domxref("Element")}}
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilités navigateur

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique4{{CompatGeckoDesktop("1.9.1")}}10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Support basique{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/dragover_event/index.html b/files/fr/web/api/document/dragover_event/index.html new file mode 100644 index 0000000000..2efc385956 --- /dev/null +++ b/files/fr/web/api/document/dragover_event/index.html @@ -0,0 +1,313 @@ +--- +title: dragover +slug: Web/API/Document/dragover_event +translation_of: Web/API/Document/dragover_event +--- +
{{APIRef}}
+ +

L'événement dragover est déclenché lorsqu'un élément ou une sélection de texte est glissé jusqu'à une cible de dépôt valide (toutes les 100ms)

+ +

Informations générales

+ +
+
Interface
+
DragEvent
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
{{domxref("Document")}}, {{domxref("Element")}}
+
Action par défaut
+
Reset l'opération de glissement courante à "none"
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilités navigateur

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique4{{CompatGeckoDesktop("1.9.1")}}10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Support basique{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/api/document/dragstart_event/index.html b/files/fr/web/api/document/dragstart_event/index.html new file mode 100644 index 0000000000..fb43328e8b --- /dev/null +++ b/files/fr/web/api/document/dragstart_event/index.html @@ -0,0 +1,315 @@ +--- +title: dragstart +slug: Web/API/Document/dragstart_event +translation_of: Web/API/Document/dragstart_event +--- +

L'événement dragstart est déclenché lorsque l'utilisateur glisse un élément ou une sélection de texte.

+ +

Informations générales

+ +
+
Interface
+
DragEvent
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
{{domxref("Document")}}, {{domxref("Element")}}
+
Action par défaut
+
Initie l'opération de glisser-déposer
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple：dropzone

+ +

HTML Content

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+ +

CSS Content

+ +
  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+
+ +

JavaScript Content

+ +
  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+ +

{{ EmbedLiveSample('Example：dropzone') }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilités navigateur

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique4{{CompatGeckoDesktop("1.9.1")}}10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Support basique{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/drop_event/index.html b/files/fr/web/api/document/drop_event/index.html new file mode 100644 index 0000000000..a67eb0684b --- /dev/null +++ b/files/fr/web/api/document/drop_event/index.html @@ -0,0 +1,313 @@ +--- +title: drop +slug: Web/API/Document/drop_event +translation_of: Web/API/Document/drop_event +--- +
{{APIRef}}
+ +

L'événement drop est déclenché lorsqu'un élément ou une sélection de texte est déposé sur une cible de dépôt valide.

+ +

Informations générales

+ +
+
Interface
+
DragEvent
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
Document, Element
+
Action par défaut
+
Varie
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    Cette div peut être glissée
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // réinitialisation de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche le comportement par défaut afin d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // réinitialisation de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+ +

 

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}}{{Spec2("HTML5.1")}}Première définition
+ +

Compatibilités navigateur

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique4{{CompatGeckoDesktop("1.9.1")}}10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Support basique{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/elementfrompoint/index.html b/files/fr/web/api/document/elementfrompoint/index.html new file mode 100644 index 0000000000..d715bfad7a --- /dev/null +++ b/files/fr/web/api/document/elementfrompoint/index.html @@ -0,0 +1,52 @@ +--- +title: document.elementFromPoint +slug: Web/API/Document/elementFromPoint +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint +--- +

{{ ApiRef() }}

+

Résumé

+

Renvoie l'élément visible au point donné, spécifié relativement au point supérieur gauche visible dans le document.

+

Syntaxe

+
element = document.elementFromPoint(x,y);
+
+

where

+ +

Exemple

+
<html>
+<head>
+<title>Exemple d'utilisation d'elementFromPoint</title>
+
+<script type="text/javascript">
+
+function changeColor(newColor)
+{
+ elem = document.elementFromPoint(2, 2);
+ elem.style.color = newColor;
+}
+</script>
+</head>
+
+<body>
+<p id="para1">Un peu de texte ici</p>
+<button onclick="changeColor('blue');">bleu</button>
+<button onclick="changeColor('red');">rouge</button>
+</body>
+</html>
+
+

Notes

+

Si l'élément au point spécifié appartient à un autre document (par exemple, les sous-document d'un iframe), l'élément dans le DOM du document appelant (l'iframe lui-même) est renvoyé. Si l'élément au point donné est anonyme ou du contenu généré par XBL, comme la barre de défilement d'une boîte de texte, le premier élément parent non anonyme (par exemple, la boîte de texte) est renvoyé.

+

Si le point spécifié est en dehors de la portion visible du document ou que l'une ou l'autre des coordonnées est négative, le résultat est NULL.

+

{{ Note("Les appelants qui sont des documents XUL devraient attendre que l\'évènement onload se soit déclenché avant d\'appeler cette méthode.") }}

+

Spécification

+ +

 

+
+  
+

{{ languages( { "en": "en/DOM/document.elementFromPoint", "es": "es/DOM/document.elementFromPoint", "ja": "ja/DOM/document.elementFromPoint" } ) }}

diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.html b/files/fr/web/api/document/enablestylesheetsforset/index.html new file mode 100644 index 0000000000..d6fb8bc63f --- /dev/null +++ b/files/fr/web/api/document/enablestylesheetsforset/index.html @@ -0,0 +1,59 @@ +--- +title: Document.enableStyleSheetsForSet() +slug: Web/API/Document/enableStyleSheetsForSet +tags: + - API + - Activation + - CSS + - DOM + - Feuilles de styles + - Méthode +translation_of: Web/API/Document/enableStyleSheetsForSet +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}

+ +

Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de feuilles de styles en cours et désactive toutes les autres (à l'exception de celles sans titre qui sont toujours activées).

+ +

Syntaxe

+ +
document.enableStyleSheetsForSet(name)
+
+ +

Paramètres

+ +
+
name
+
Le nom des feuilles de styles à activer. Toutes les feuilles de styles dont le titre correspond à ce nom seront activées, tandis que toutes celles possédant un autre titre seront désactivées. Spécifiez une chaîne vide dans le paramètre name pour supprimer toutes les feuilles de styles alternatives et préférées (mais pas les feuilles de styles persistantes, c'est-à-dire, celles sans attribut title (titre)).
+
+ +

Notes

+ + + +

Exemple

+ +
document.enableStyleSheetsForSet("Some style sheet set name");
+
+ +

Spécifications

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/evaluate/index.html b/files/fr/web/api/document/evaluate/index.html new file mode 100644 index 0000000000..51130c63be --- /dev/null +++ b/files/fr/web/api/document/evaluate/index.html @@ -0,0 +1,163 @@ +--- +title: document.evaluate +slug: Web/API/Document/evaluate +tags: + - API + - DOM + - Méthode + - Reference + - XPath +translation_of: Web/API/Document/evaluate +--- +

{{ ApiRef("DOM") }}

+ +

La méthode evaluate() renvoie un {{domxref("XPathResult")}} basé sur une expression XPath et d'autres paramètres donnés.

+ +

Syntaxe

+ +
var xpathResult = document.evaluate(
+ xpathExpression,
+ contextNode,
+ namespaceResolver,
+ resultType,
+ result
+);
+ + + +

Exemples

+ +
 var  headings  =  document .  evaluate  ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null);
+ /* Cherche le document pour tout élément h2.
+ * Le résultat sera probablement un itérateur de noeuds non ordonné. */
+ var  thisHeading  =  headings .  iterateNext  (  )  ;
+ var  alertText  =   "Level 2 headings in this document are:\n"  ;
+ while   ( thisHeading )   {
+  alertText  +  =  thisHeading . textContent  +   "\n"  ;
+  thisHeading  =  headings .  iterateNext  (  )  ;
+ }
+ alert  ( alertText )  ;   // Alerte le texte de tout élément h2
+ +

Note : dans l'exemple ci-dessus, un XPath plus verbeux est préféré aux raccourcis communs tels que //h2. Généralement, des sélecteurs XPath plus spécifiques, comme dans l'exemple ci-dessus, améliorent de façon significative les performances, en particulier pour les documents très volumineux. C'est parce que l'évaluation de la requête ne perd pas de temps à visiter des noeuds inutiles. L'utilisation de // est généralement lente car elle visite tous les nœuds de la racine et tous les sous-nœuds à la recherche de correspondances possibles.

+ +

Une optimisation supplémentaire peut être obtenue en utilisant soigneusement le paramètre de contexte. Par exemple, si vous savez que le contenu que vous recherchez se trouve quelque part dans la balise body, vous pouvez utiliser ceci :

+ +
document .  evaluate  ( " .  //h2", document.body, null, XPathResult.ANY_TYPE, null);
+ +

Remarquez ci-dessus,  document.body a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le "." est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant //h2), la requête démarrera à partir du noeud racine ( html) ce qui serait plus inutile.)

+ +

Voir Introduction à l'utilisation de XPath avec JavaScript  pour plus d'informations.

+ +

Notes

+ + + +

Types de résultats

+ +

Ce sont des valeurs prises en charge pour le paramètre resultType de la méthode evaluate :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de résultatValeurDescription
ANY_TYPE0Quel que soit le type, résulte naturellement de l'expression donnée.
NUMBER_TYPE1Un ensemble de résultats contenant un seul nombre. Utile, par exemple, dans une expression XPath utilisant la fonction count().
STRING_TYPE2Un ensemble de résultats contenant une seule chaîne de caractères.
BOOLEAN_TYPE3Un ensemble de résultats contenant une seule valeur booléenne. Utile pour, par exemple, une expression XPath utilisant la fonction not().
UNORDERED_NODE_ITERATOR_TYPE4Un ensemble de résultats contenant tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document.
ORDERED_NODE_ITERATOR_TYPE5Un ensemble de résultats contenant tous les noeuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .
UNORDERED_NODE_SNAPSHOT_TYPE6Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document .
ORDERED_NODE_SNAPSHOT_TYPE7Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .
ANY_UNORDERED_NODE_TYPE8Un ensemble de résultats contenant un seul nœud correspondant à l'expression. Le noeud n'est pas nécessairement le premier noeud du document qui correspond à l'expression.
FIRST_ORDERED_NODE_TYPE9Un ensemble de résultats contenant le premier nœud du document qui correspond à l'expression.
+ +

Les résultats des types NODE_ITERATOR contiennent des références aux noeuds du document. La modification d'un nœud invalidera l'itérateur. Après avoir modifié un nœud, tenter de parcourir les résultats entraînera une erreur.

+ +

Les résultats des types NODE_SNAPSHOT sont des instantanés, qui sont essentiellement des listes de nœuds correspondants. Vous pouvez apporter des modifications au document en modifiant les nœuds de capture instantanée. La modification du document n'invalide pas l'instantané. Toutefois, si le document est modifié, l'instantané peut ne pas correspondre à l'état actuel du document, car les nœuds peuvent avoir été déplacés, modifiés, ajoutés ou supprimés.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}{{Spec2("DOM3 XPath")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.evaluate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/execcommand/index.html b/files/fr/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..0828ac309b --- /dev/null +++ b/files/fr/web/api/document/execcommand/index.html @@ -0,0 +1,397 @@ +--- +title: document.execCommand +slug: Web/API/Document/execCommand +tags: + - API + - Commandes + - DOM + - Exécution + - Méthodes +translation_of: Web/API/Document/execCommand +--- +

{{ApiRef("DOM")}}
+ Lorsqu'un document HTML est passé à designMode, l'objet document expose la méthode execCommand qui permet d'exécuter des commandes pour manipuler le contenu de la zone modifiable, telle que les éléments form inputs ou contentEditable .

+ +

La plupart des commandes affectent la sélection du document (gras, italique, etc.), tandis que d'autres ajoutent de nouveaux éléments (ajout d'un lien) ou affectent une ligne entière (indentation). Lorsque vous utilisez contentEditable, l'appel execCommand() affectera l'élément modifiable actuellement actif.

+ +

Syntaxe

+ +
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
+ +

Valeur retournée

+ +

Un {{jsxref('Boolean')}} qui est à false (faux) si la commande n'est pas supportée ou désactivée.

+ +
+

 Note : Ne renvoie true (vrai) que dans le contexte d'une interaction utilisateur. Ne pas utiliser la valeur de retour pour vérifier le support du navigateur avant d'appeler une commande.

+
+ +

Paramètres

+ +

aCommandName
+ {{domxref("DOMString")}} spécifie le nom de la commande à exécuter ​​​​​​. Voir {{anch("Commands")}} pour la liste des commandes possibles .

+ +

aShowDefaultUI
+ Un {{jsxref("Boolean")}} indiquant si l'interface utilisateur par défaut doit être affichée. Ceci n'est pas implémenté par Mozilla.

+ +

aValueArgument
+ Pour les commandes qui nécessitent un argument , il s'agit d'une {{domxref ("DOMString")}} (chaîne de caractères) fournissant ces informations. Par exemple, insertImage requière l'URL de l'image à insérer. Spécifiez null si aucun argument n'est nécessaire.

+ +

Commandes

+ +

backColor
+ Change la couleur d'arrière-plan du document. En mode styleWithCss, il affecte plutôt la couleur de fond du bloc contenant. Cela nécessite une chaîne de valeurs {{cssxref ("<color>")}} pour être transmise en tant qu'argument de valeur. Notez que Internet Explorer utilise cette option pour définir la couleur d'arrière-plan du texte.

+ +

bold
+ Ajoute ou enlève l'affichage bold de la sélection ou au point d'insertion. Internet Explorer utilise la balise {{HTMLElement("strong")}} au lieu de {{HTMLElement("b")}}.

+ +

contentReadOnly
+ Rend le  contenu du document en lecture seule ou modifiable. Cela nécessite qu'un booléen true / false soit transmis en tant qu'argument de valeur. (Non pris en charge par Internet Explorer.)

+ +

copy
+ Copie la sélection courante dans le presse papier. Les conditions d'activation de ce comportement varient d'un navigateur à l'autre et ont évolué au fil du temps. Vérifiez la table de compatibilité pour déterminer si vous pouvez l'utiliser dans votre cas.

+ +

createLink
+ Crée un lien d'ancrage à partir de la sélection, uniquement s'il existe une sélection. Cela nécessite que la chaîne URI HREF soit transmise en tant qu'argument de valeur. L'URI doit contenir au moins un caractère unique, qui peut être un espace blanc. (Internet Explorer créera un lien avec une valeur URI null.)

+ +

cut
+ Coupe et copie la sélection courante dans le presse papier. Les conditions d'activation de ce comportement varient d'un navigateur à l'autre et ont évolué au fil du temps. Vérifiez la table de compatibilité pour déterminer si vous pouvez l'utiliser dans votre cas.

+ +

decreaseFontSize
+ Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou du point d'insertion (Non pris en charge par Internet Explorer).

+ +
+
defaultParagraphSeparator
+
Change le séparateur de paragraphes utilisé lorsque de nouveaux paragraphes sont créés dans les zones de textes modifiables. Voir Contenu éditable pour plus de détails.
+
+ +

delete
+ Supprime la sélection courante

+ +

enableInlineTableEditing
+ Active ou désactive les commandes d'insertion et de suppression des lignes et des colonnes du tableau. (Non pris en charge par Internet Explorer.)

+ +

enableObjectResizing
+ Active ou désactive les poignées de redimensionnement des images et autres objets redimensionnables. (Non pris en charge par Internet Explorer.)

+ +

fontName
+ Modifie le nom de police de la sélection ou du point d'insertion. Cela nécessite une chaîne de nom de police (tel qu'"Arial") à transmettre comme argument de valeur.

+ +

fontSize
+ Modifie la taille de police pour la sélection ou au point d'insertion. Cela nécessite que la taille d'une police HTML (1-7) soit transmise en tant qu'argument de valeur.

+ +

foreColor
+ Modifie une couleur de police pour la sélection ou au point d'insertion. Cela nécessite qu'une chaîne de valeurs de couleur soit transmise en tant qu'argument de valeur.

+ +

formatBlock
+ Ajoute une balise HTML style bloc autour de la ligne contenant la sélection en cours, en remplaçant l'élément bloc contenant la ligne si elle existe (dans Firefox, BLOCKQUOTE est l'exception - il enroule tout élément bloc contenant). Nécessite la saisie d'une chaîne de nom d'étiquette comme argument de valeur. Pratiquement toutes les étiquettes de style de bloc peuvent être utilisées (par exemple "{{HTMLElement("h1")}}", "{{HTMLElement("p")}}", "{{HTMLElement("dl")}}", "{{HTMLElement("blockquote")}}"). (Internet Explorer ne prend en charge que les balises de titre H1 - H6, ADDRESS et PRE, qui doivent également inclure les délimiteurs de balises <>, tels que "<H1>".)

+ +

forwardDelete
+ Supprime le caractère avant la position du curseur. Il est le même que frapper la touche de suppression.

+ +

heading
+ Ajoute une balise de titre autour d'une ligne de sélection ou d'insertion. Nécessite que la chaîne de nom d'étiquette soit transmise en tant qu'argument de valeur (c'est-à-dire "{{HTMLElement("H1")}}", "{{HTMLElement("H6")}}"). (Non pris en charge par Internet Explorer et Safari.)

+ +

hiliteColor
+ Modifie la couleur d'arrière-plan de la sélection ou du point d'insertion. Nécessite une chaîne de valeurs de couleur à transmettre comme argument de valeur. UseCSS doit être à true (vrai) pour que cela fonctionne. (Non pris en charge par Internet Explorer.)

+ +

increaseFontSize
+ Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou au point d'insertion. (Non pris en charge par Internet Explorer.)

+ +

indent
+ Décale la ligne contenant le point de sélection ou d'insertion. Dans Firefox, si la sélection s'étend sur plusieurs lignes à différents niveaux d'indentation, seules les lignes les moins indentées de la sélection seront indentées.

+ +

insertBrOnReturn
+ Contrôle si la touche Entrée insère une balise br ou divise l'élément de bloc courant en deux. (Non pris en charge par Internet Explorer.)

+ +

insertHorizontalRule
+ Insère une ligne horizontale au point d'insertion. (Supprime la sélection)

+ +

insertHTML
+ Insère une chaîne HTML au point d'insertion (supprime la sélection). Nécessite une chaîne HTML valide à transmettre en tant qu'argument de valeur. (Non pris en charge par Internet Explorer.)

+ +

insertImage
+ Insère une image au point d'insertion (supprime la sélection). Nécessite l'image SRC URI chaîne à passer comme un argument de valeur. L'URI doit contenir au moins un caractère unique, qui peut être un espace blanc. (Internet Explorer créera un lien avec une valeur URI nulle.)

+ +

insertOrderedList
+ Crée une liste ordonnée numérotée pour la sélection ou le point d'insertion.

+ +

insertUnorderedList
+ Crée une liste non triée à puces pour la sélection ou au point d'insertion.

+ +

insertParagraph
+ Insère un paragraphe autour de la sélection ou de la ligne en cours. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.)

+ +

insertText
+ Insère le texte brut donné au point d'insertion (supprime la sélection).

+ +

italic
+ Active / désactive l'italique pour la sélection ou le point d'insertion. (Internet Explorer utilise la balise {{HTMLElement("em")}} au lieu de {{HTMLElement("i")}}).

+ +

justifyCenter
+ Centre le point de sélection ou d'insertion.

+ +

justifyFull
+ Justifie le point de sélection ou d'insertion.

+ +

justifyLeft
+ Justifie le point de sélection ou d'insertion à gauche.

+ +

justifyRight
+ Justifie à droite la sélection ou le point d'insertion.

+ +

outdent
+ Augmente la ligne contenant le point de sélection ou d'insertion.

+ +

paste
+ Colle le contenu du Presse-papiers au point d'insertion (remplace la sélection en cours). La fonctionnalité Presse-papiers doit être activée dans le fichier de préférences user.js. Voir [1].

+ +

redo
+ Rétablit la commande d'annulation précédente.

+ +

removeFormat
+ Supprime tout le formatage de la sélection en cours.

+ +

selectAll
+ Sélectionne tout le contenu de la zone modifiable.

+ +

strikeThrough
+ Active ou désactive le barré pour la sélection ou le point d'insertion.

+ +

subscript
+ Active ou désactive l'élément de souscription sur la sélection ou au point d'insertion.

+ +

superscript
+ Active / désactive l'élément de mise en exposant pour la sélection ou le point d'insertion.

+ +

underline
+ Active ou désactive l'élément d'annotation non textuelle pour la sélection ou le point d'insertion.

+ +

undo
+ Annule la dernière commande exécutée.

+ +

unlink
+ Supprime l'élément d'ancrage de l'hyperlien sélectionné.

+ +

useCSS {{Deprecated_inline}}
+ Active / désactive l'utilisation de balises HTML ou CSS pour le balisage généré. Nécessite un argument booléen vrai / faux comme argument de valeur. REMARQUE : Cet argument est logiquement inverse (c.-à-d. utilise false pour utiliser CSS, true pour utiliser HTML). (Non pris en charge par Internet Explorer.) Cela a été obsolète; Utilisez plutôt la commande styleWithCSS.

+ +

styleWithCSS
+ Remplace la commande useCSS ; argument fonctionne comme prévu, c'est-à-dire true modifie / génère des attributs de style dans le balisage, false génère des éléments de mise en forme.

+ +

Exemple

+ +

Un exemple d'utilisation sur CodePen.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}{{Spec2('HTML Editing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
insertBrOnReturn{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
copy/cut{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(41)}}92910
defaultParagraphSeparator{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(55)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
ClearAuthenticationCache{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}6{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
insertBrOnReturn{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
copy/cut{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(41)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
defaultParagraphSeparator{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(55)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
ClearAuthenticationCache{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+    
+     
+ + + +

[1] Avant Firefox 41, la capacité du presse-papiers devait être activée dans le fichier de préférences user.js. Voir Un bref guide des préférences Mozilla pour plus d'informations. Si la commande n'était pas prise en charge ou activée, execCommand déclenchait une exception au lieu de renvoyer false. Dans Firefox 41 et versions ultérieures, la capacité du presse-papiers est activée par défaut dans n'importe quel gestionnaire d'événements capable de faire apparaître une fenêtre (scripts semi-approuvés), mais aucun contenu web ne peut lire le presse-papier. Les extensions web peuvent interagir avec le presse-papier.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/exitfullscreen/index.html b/files/fr/web/api/document/exitfullscreen/index.html new file mode 100644 index 0000000000..a5c8172182 --- /dev/null +++ b/files/fr/web/api/document/exitfullscreen/index.html @@ -0,0 +1,120 @@ +--- +title: Document.exitFullscreen() +slug: Web/API/Document/exitFullscreen +tags: + - API + - Affichage + - DOM + - Méthodes + - Plein écran +translation_of: Web/API/Document/exitFullscreen +--- +
{{ApiRef("Fullscreen API")}}
+ +

La méthode Document.exitFullscreen() extrait le document du mode plein écran ; elle est utilisée pour inverser les effets d'un appel au mode plein écran réalisé avec la méthode {{domxref("Element.requestFullscreen()")}}.

+ +
Note : Si un autre élément était précédemment en mode plein écran lorsque l'élément en cours a été placé en mode plein écran, cet élément précédent reprend le mode plein écran. Une "pile" d'éléments en plein écran est maintenue par le navigateur à cette fin.
+ +

Syntaxe

+ +
document.exitFullscreen();
+
+ +

Exemple

+ +
// Click bascule en mode plein écran
+document.onclick = function (event) {
+  if (document.fullscreenElement) {
+    document.exitFullscreen()
+  } else {
+    document.documentElement.requestFullscreen()
+  }
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}{{Spec2("Fullscreen")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(45)}} (unprefixed)		{{CompatGeckoDesktop("9.0")}} as mozCancelFullScreen[1]
+ {{CompatGeckoDesktop("47.0")}}[1] (behind full-screen-api.unprefix.enabled		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroid WebkitChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(45)}} (unprefixed)		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(45)}} (unprefixed)		{{CompatGeckoMobile("9.0")}} as mozCancelFullScreen[1]
+ {{CompatGeckoMobile("47.0")}}[1] (behind full-screen-api.unprefix.enabled		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] La "pile" du mode plein écran qui permet d'annuler le plein écran pour un élément et de le restaurer pour un élément précédent automatiquement, a été implémentée dans Gecko 11.0 {{geckoRelease("11.0")}}.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/exitpointerlock/index.html b/files/fr/web/api/document/exitpointerlock/index.html new file mode 100644 index 0000000000..3337e00ae7 --- /dev/null +++ b/files/fr/web/api/document/exitpointerlock/index.html @@ -0,0 +1,109 @@ +--- +title: Document.exitPointerLock() +slug: Web/API/Document/exitPointerLock +tags: + - API + - DOM + - Experimental + - Méthode + - Reference +translation_of: Web/API/Document/exitPointerLock +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

La méthode exitPointerLock() permet de relâcher un pointeur de façon asynchrone lorsque le pointeur était auparavant mobilisé par la méthode {{domxref("Element.requestPointerLock()")}}.

+ +

Pour connaître le succès ou l'échec de cette requête, il faut surveiller les évènements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}.

+ +

Syntaxe

+ +
document.exitPointerLock();
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Pointer Lock','l#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extension de l'interface Document
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple{{CompatVersionUnknown}} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} {{property_prefix("moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Prise en charge sans préfixe{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(50)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support simple{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/featurepolicy/index.html b/files/fr/web/api/document/featurepolicy/index.html new file mode 100644 index 0000000000..4c2dbbe9ba --- /dev/null +++ b/files/fr/web/api/document/featurepolicy/index.html @@ -0,0 +1,47 @@ +--- +title: Document.featurePolicy +slug: Web/API/Document/featurePolicy +tags: + - API + - Document + - Feature Policy + - Feature-Policy + - Reference +translation_of: Web/API/Document/featurePolicy +--- +

{{APIRef("Feature Policy")}}

+ +

La propriété en lecture seule featurePolicy de l'interface {{domxref("Document")}} retourne l'interface {{domxref("FeaturePolicy")}}, qui fournit une API permettant de consulter facilement les règles de fonctionnalités appliquées sur un document spécifique.

+ +

Syntaxe

+ +
var policy = iframeElement.featurePolicy
+ +

Valeur

+ +

Un objet {{domxref("FeaturePolicy")}} pouvant être utilisé pour consulter les paramètres de Feature Policy appliqués au document.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Feature Policy")}}{{Spec2("Feature Policy")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.featurePolicy")}}

diff --git a/files/fr/web/api/document/forms/index.html b/files/fr/web/api/document/forms/index.html new file mode 100644 index 0000000000..c892b63976 --- /dev/null +++ b/files/fr/web/api/document/forms/index.html @@ -0,0 +1,116 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - API + - DOM + - Document + - Formulaires + - Propriétés +translation_of: Web/API/Document/forms +--- +
{{APIRef("DOM")}}
+ +

La propriété forms de {{domxref("Document")}} retourne une collection ({{domxref("HTMLCollection")}}) des éléments {{HTMLElement("form")}} présents dans le document actuel.

+ +
+

Note : De même, vous pouvez accéder à une liste des éléments d'entrée utilisateur d'un formulaire à l'aide de la propriété {{domxref ("HTMLFormElement.elements")}}.

+
+ +

Syntaxe

+ +
collection = document.forms;
+ +

Valeur

+ +

Un objet {{domxref("HTMLCollection")}} listant tous les formulaires du document. Chaque élément de la collection est un {{domxref("HTMLFormElement")}} représentant un seul élément <form>.

+ +

Exemples

+ +

Récupérer les informations d'un formulaire

+ +
<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<title>document.forms example</title>
+</head>
+
+<body>
+
+<form id="robby">
+  <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
+</form>
+
+<form id="dave">
+  <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
+</form>
+
+<form id="paul">
+  <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
+</form>
+
+</body>
+</html>
+
+ +

Accéder à un élément contenu dans un formulaire

+ +
var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+
+ +

Accéder aux formulaires nommés

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>document.forms example</title>
+</head>
+
+<body>
+
+<form name="login">
+  <input name="email" type="email">
+  <input name="password" type="password">
+  <button type="submit">Log in</button>
+</form>
+
+<script>
+  var loginForm = document.forms.login; // Ou document.forms['login']
+  loginForm.elements.email.placeholder = 'test@example.com';
+  loginForm.elements.password.placeholder = 'password';
+</script>
+</body>
+</html>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}{{ Spec2('DOM2 Events') }}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/fullscreenchange_event/index.html b/files/fr/web/api/document/fullscreenchange_event/index.html new file mode 100644 index 0000000000..ca78a615cd --- /dev/null +++ b/files/fr/web/api/document/fullscreenchange_event/index.html @@ -0,0 +1,85 @@ +--- +title: fullscreenchange +slug: Web/API/Document/fullscreenchange_event +translation_of: Web/API/Document/fullscreenchange_event +--- +

L'événement onfullscreenchange est déclenché lorsque le navigateur alterne entre le mode fenêtré et plein écran.

+ +

Informations générales

+ +
+
Spécification
+
Fullscreen
+
Interface
+
{{domxref("Event")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Document")}}
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}L'élément recevant l'événement.
type {{readonlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Indique si l'événement bubble habituellement ou non.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Indique si l'événement est annulable ou non.
+ +

Exemple

+ +
// Noter que l'API est toujours vendor-prefixed dans les navigateurs l'implémentant
+document.addEventListener("fullscreenchange", function( event ) {
+
+    // L'objet event ne porte pas l'information à propos du mode plein écran
+    // Cependant, il est possible de la trouver à travers l'API fullscreen
+    if ( document.fullscreen ) {
+
+        // La cible de l'événement est toujours le document,
+        // mais il est possible de retrouver l'élément fullscreen à travers l'API
+        document.fullscreenElement;
+    }
+
+});
+ +

Evénements liés

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/fullscreenerror_event/index.html b/files/fr/web/api/document/fullscreenerror_event/index.html new file mode 100644 index 0000000000..5f88b26992 --- /dev/null +++ b/files/fr/web/api/document/fullscreenerror_event/index.html @@ -0,0 +1,69 @@ +--- +title: fullscreenerror +slug: Web/API/Document/fullscreenerror_event +translation_of: Web/API/Document/fullscreenerror_event +--- +

L'événement fullscreenerror est déclenché lorsque le navigateur ne peut pas entrer en mode plein écran.

+ +

Informations générales

+ +
+
Spécification
+
Fullscreen
+
Interface
+
{{domxref("Event")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Document")}}
+
Action par défaut
+
Aucune
+
+ +

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

Evénements liés

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/getboxobjectfor/index.html b/files/fr/web/api/document/getboxobjectfor/index.html new file mode 100644 index 0000000000..97b613781e --- /dev/null +++ b/files/fr/web/api/document/getboxobjectfor/index.html @@ -0,0 +1,42 @@ +--- +title: Document.getBoxObjectFor() +slug: Web/API/Document/getBoxObjectFor +tags: + - API + - Boîte + - DOM + - Méthodes + - Objets +translation_of: Web/API/Document/getBoxObjectFor +--- +

{{ ApiRef("DOM") }} {{obsolete_header}}

+ +

Renvoie un boxObject (x, y, largeur, hauteur) pour un élément spécifié.

+ +
Note : Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place.
+ +

Syntaxe

+ +
boxObject = document.getBoxObjectFor(element);
+
+ + + +

Exemple

+ +
var myDiv = document.getElementById("myDiv"),
+    boxObj = document.getBoxObjectFor (myDiv);
+
+alert (
+  "x:" + boxObj.x +
+  ", y:" + boxObj.y +
+  ", Width:" + boxObj.width +
+  ", Height:" + boxObj.height
+);
+ +

Notes

+ +

Spécifié dans nsIXULDocument.idl

diff --git a/files/fr/web/api/document/getelementbyid/index.html b/files/fr/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..eb8a78ee99 --- /dev/null +++ b/files/fr/web/api/document/getelementbyid/index.html @@ -0,0 +1,148 @@ +--- +title: document.getElementById +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elements + - Identifiant + - Méthodes +translation_of: Web/API/Document/getElementById +--- +

{{ ApiRef("DOM") }}

+ +

La méthode getElementById() de {{domxref("Document")}} renvoie un objet  {{domxref("Element")}} représentant l'élément dont la propriété  {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique.

+ +

Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}.

+ +

Syntaxe

+ +
var element = document.getElementById(id);
+
+ +

Paramètres

+ +
+
id
+
L'ID (identifiant) de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.
+
+

Valeur de retour

+
+
+ +

Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou null si aucun n'a été trouvé dans le document.

+ +

Exemple

+ +

Contenu HTML

+ +
<html>
+<head>
+  <title>getElementById example</title>
+</head>
+<body>
+  <p id="para">Some text here</p>
+  <button onclick="changeColor('blue');">blue</button>
+  <button onclick="changeColor('red');">red</button>
+</body>
+</html>
+ +

Contenu JavaScript

+ +
function changeColor(newColor) {
+  var elem = document.getElementById('para');
+  elem.style.color = newColor;
+}
+ +

Résultat

+ +

{{ EmbedLiveSample('Example1', 250, 100) }}

+ +

Notes d'utilisation

+ +

L'écriture de la lettre capitale de « Id » dans le nom de cette méthode doit être respectée pour que le code fonctionne ; getElementByID() n'est pas valide et ne fonctionnera pas, même si elle semble naturelle.

+ +

Contrairement à d'autres méthodes de recherche d'éléments, comme  {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, getElementById est uniquement disponible comme méthode de l'objet global document et n'est pas disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction.

+ +

Exemple

+ +
<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p id="test1">hello word2</p>
+        <p>hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById('parent-id');
+        var test1=parentDOM.getElementById('test1');
+        //erreur de lancement 
+        //TypeError inattendu : parentDOM.getElementById n'est pas une fonction 
+    </script>
+</body>
+</html>
+ +

S'il n'y a pas d'élément avec l'id fourni, cette fonction retourne null. A noter que le paramètre id est sensible à la casse, ainsi document.getElementById("Main") retournera null au lieu de l'élément <div id="main"> étant donné que "M" et "m" sont différents pour cette méthode.

+ +

Les éléments absents du document ne sont pas cherchés par getElementById(). Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec getElementById() :

+ +
var element = document.createElement('div');
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el vaudra null !
+ +

Les documents non-HTML. Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut id est défini comme étant de type ID dans les langages courants comme XHTML ou XUL. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer null.

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}Définition initiale de l'interface
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}Remplace DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}Remplace DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}{{Spec2('DOM WHATWG')}}Remplacera DOM 3
+ +

Traduction en français (non normative) : getElementById

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.getElementById")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/getelementsbyclassname/index.html b/files/fr/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..021ce5c742 --- /dev/null +++ b/files/fr/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,92 @@ +--- +title: document.getElementsByClassName +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/getElementsByClassName +--- +

{{ Fx_minversion_header(3) }} {{APIRef("DOM")}}

+ +

Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.

+ +

Syntaxe

+ +
var elements = document.getElementsByClassName(names); // or:
+var elements = rootElement.getElementsByClassName(names);
+ + + +

Exemples

+ +

Trouve tous les éléments ayant la classe « test » :

+ +
 document.getElementsByClassName('test')
+
+ +

Trouve tous les éléments ayant les classes « rouge » et « test » :

+ +
 document.getElementsByClassName('rouge test')
+
+ +

Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :

+ +
 document.getElementById('main').getElementsByClassName('test')
+
+ +

Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

XXX writeme == Notes == Une méthode semblable existe pour <code>Element</code>

+ +

Obtenir la classe  des éléments test

+ +

C'est la méthode d'opération la plus couramment utilisée.

+ +
<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p class="test">hello word2</p>
+        <p >hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById("parent-id");
+
+        var test=parentDOM.getElementsByClassName("test");//test is not target element
+        console.log(test);//HTMLCollection[1]
+
+        var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target
+        console.log(testTarget);//<p class="test">hello word2</p>
+    </script>
+</body>
+</html>
+ +

Compatibilité des navigateurs

+ + +

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

+ + + +

Spécification

+ + diff --git a/files/fr/web/api/document/getelementsbyname/index.html b/files/fr/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..c8136c8de7 --- /dev/null +++ b/files/fr/web/api/document/getelementsbyname/index.html @@ -0,0 +1,86 @@ +--- +title: document.getElementsByName() +slug: Web/API/Document/getElementsByName +tags: + - API + - DOM + - Document + - HTML + - Méthodes +translation_of: Web/API/Document/getElementsByName +--- +

{{ ApiRef("DOM") }}

+ +

Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML.

+ +

Syntaxe

+ +
elements = document.getElementsByName(name)
+
+ + + +

Exemple

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+ ...
+</head>
+
+<body>
+<form name="up"><input type="text"></form>
+<div name="down"><input type="text"></div>
+
+<script>
+var up_forms = document.getElementsByName("up");
+console.log(up_forms[0].tagName); // retourne "FORM"
+</script>
+</body>
+</html>
+ +

Notes

+ +

L'attribut name est uniquement applicable aux documents (X) HTML. La méthode renvoie une collection {{domxref("NodeList")}} en cours qui contient tous les éléments avec une valeur donnée pour l'attribut name, tels que {{htmlelement("meta")}} ou {{htmlelement("object")}} ou même si le nom est placé sur des éléments qui ne supportent pas du tout un attribut name.

+ +

La méthode getElementsByName fonctionne différemment dans différents navigateurs. Dans IE <10, la méthode getElementsByName () renvoie également les éléments qui ont un attribut id avec la valeur spécifiée. Vous devriez donc faire attention à ne pas utiliser la même chaîne pour le nom et l'identifiant.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}{{Spec2("DOM2 HTML")}}Définition initiale
+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/api/document/getelementsbytagname/index.html b/files/fr/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..268a5a6453 --- /dev/null +++ b/files/fr/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,113 @@ +--- +title: document.getElementsByTagName +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - Elements + - Méthodes +translation_of: Web/API/Document/getElementsByTagName +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise donné. Le document complet est recherché, y compris le nœud racine. Le HTMLCollection renvoyée est en direct, ce qui signifie qu'elle se met à jour automatiquement pour rester synchronisée avec l'arborescence DOM sans avoir à rappeler document.getElementsByTagName ().

+ +

Syntaxe

+ +
var elements = document.getElementsByTagName(name);
+ + + +
+

Note : La dernière spécification W3C dit que  elements est une   HTMLCollection ; cependant cette méthode renvoie une  {{domxref("NodeList")}} dans les navigateurs WebKit. Voir  {{bug(14869)}} pour plus de détails.

+
+ +

Exemple

+ +

Dans l'exemple suivant, getElementsByTagName() commence à partir d'un élément parent particulier et effectue une recherche descendante récursive dans le DOM à partir de cet élément parent, en créant une collection de tous les éléments descendants qui correspondent au paramètre de name. Cela démontre à la fois document.getElementsByTagName() et son homologue {{domxref ("Element.getElementsByTagName ()")}}, qui lance la recherche sur un élément spécifique dans l'arbre DOM.

+ +

Cliquer sur les boutons utilise getElementsByTagName() pour compter les éléments de paragraphe descendant d'un parent particulier (le document lui-même ou l'un des éléments {{HTMLElement ("div")}} imbriqués).

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>getElementsByTagName example</title>
+  <script>
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName('p');
+      var num = allParas.length;
+      alert('There are ' + num + ' paragraph in this document');
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById('div1');
+      var div1Paras = div1.getElementsByTagName('p');
+      var num = div1Paras.length;
+      alert('There are ' + num + ' paragraph in #div1');
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById('div2');
+      var div2Paras = div2.getElementsByTagName('p');
+      var num = div2Paras.length;
+      alert('There are ' + num + ' paragraph in #div2');
+    }
+  </script>
+</head>
+<body style="border: solid green 3px">
+  <p>Some outer text</p>
+  <p>Some outer text</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+
+    <div id="div2" style="border: solid red 3px">
+      <p>Some div2 text</p>
+      <p>Some div2 text</p>
+    </div>
+  </div>
+
+  <p>Some outer text</p>
+  <p>Some outer text</p>
+
+  <button onclick="getAllParaElems();">
+    show all p elements in document</button><br />
+
+  <button onclick="div1ParaElems();">
+    show all p elements in div1 element</button><br />
+
+  <button onclick="div2ParaElems();">
+    show all p elements in div2 element</button>
+
+</body>
+</html>
+ +

Notes

+ +

Lorsqu'elle est appelée sur un document HTML, getElementsByTagName() classe son argument avant de continuer. Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML. {{Domxref ("document.getElementsByTagNameNS ()")}} est utile dans ce cas. Voir aussi {{Bug (499656)}}.
+
+ document.getElementsByTagName() est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.

+ +

Spécifications

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/getelementsbytagnamens/index.html b/files/fr/web/api/document/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..537bc24875 --- /dev/null +++ b/files/fr/web/api/document/getelementsbytagnamens/index.html @@ -0,0 +1,136 @@ +--- +title: Document.getElementsByTagNameNS() +slug: Web/API/Document/getElementsByTagNameNS +tags: + - API + - DOM + - Elements + - Méthodes + - Nom + - XPath +translation_of: Web/API/Document/getElementsByTagNameNS +--- +

{{ ApiRef("DOM") }}

+ +

{{ fx_minversion_note("3.6","Voir la section Notes de element.getElementsByTagNameNS pour les changements qui s'appliquent aussi à cet API dans Firefox 3.6.") }}

+ +

Renvoie une liste d'éléments avec la balise de nom donnée appartenant à l'espace de noms donné. Le document complet est recherché, y compris le noeud racine.

+ +

Syntaxe

+ +
elements = document.getElementsByTagNameNS(namespace,name)
+
+ + + +
Note : Tandis que la spécification W3C indique que les elements sont des NodeList, cette méthode renvoie une {{domxref("HTMLCollection")}} dans Gecko et Internet Explorer. Opera retourne une NodeList, mais avec une méthode implémentée namedItem, ce qui la rend similaire à une HTMLCollection. À partir de Janvier 2012, dans les navigateurs WebKit seulement, la valeur retournée est une pure NodeList. Voir bug 14869 pour plus de détails.
+ +

Exemple

+ +

Dans l'exemple suivant, getElementsByTagNameNS commence à partir d'un élément parent particulier et cherche dans le DOM récursivement de haut en bas à partir de cet élément parent, les éléments enfants correspondant au paramètre name de la balise.

+ +

Notez que lorsque le noeud sur lequel getElementsByTagName est invoqué n'est pas un noeud document, la méthode element.getElementsByTagNameNS est en fait utilisée.

+ +

Pour utiliser l'exemple suivant, il suffit de le copier/coller dans un nouveau fichier enregistré avec l'extension .xhtml.

+ +
<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<title>getElementsByTagNameNS example</title>
+
+<script type="text/javascript">
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = allParas.length;
+
+  alert("There are " + num + " &lt;p&gt; elements in this document");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div1Paras.length;
+
+  alert("There are " + num + " &lt;p&gt; elements in div1 element");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div2Paras.length;
+
+  alert("There are " + num + " &lt;p&gt; elements in div2 element");
+}
+
+</script>
+</head>
+
+<body style="border: solid green 3px">
+<p>Some outer text</p>
+<p>Some outer text</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+
+    <div id="div2" style="border: solid red 3px">
+    <p>Some div2 text</p>
+    <p>Some div2 text</p>
+    </div>
+  </div>
+
+<p>Some outer text</p>
+<p>Some outer text</p>
+
+<button onclick="getAllParaElems();">
+ show all p elements in document</button><br />
+
+<button onclick="div1ParaElems();">
+ show all p elements in div1 element</button><br />
+
+<button onclick="div2ParaElems();">
+ show all p elements in div2 element</button>
+
+</body>
+</html>
+
+ +

Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath

+ +

Si le navigateur souhaité ne supporte pas XPath, une autre approche (comme traverser le DOM à travers tous ses enfants, identifier toutes les instances de @xmlns, etc.) serait nécessaire pour trouver toutes les balises avec le nom local et l'espace de noms, mais XPath est beaucoup plus rapide. (Pour adapter à Explorer, on pourrait appeler un wrapper XPath au lieu du XPath dans la fonction ci-dessous (comme Explorer supporte XPath avec une API différente), comme cette classe wrapper.)

+ +
function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
+	if (!doc) {
+		doc = document;
+	}
+	if (!context) {
+		context = doc;
+	}
+
+	var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+
+        var a = [];
+        for(var i = 0; i < result.snapshotLength; i++) {
+            a[i] = result.snapshotItem(i);
+        }
+        return a;
+}
+
+ +

Spécifications

+ +

DOM Level 2 Core: Document.getElementsByTagNameNS

diff --git a/files/fr/web/api/document/getselection/index.html b/files/fr/web/api/document/getselection/index.html new file mode 100644 index 0000000000..5a0bb35861 --- /dev/null +++ b/files/fr/web/api/document/getselection/index.html @@ -0,0 +1,14 @@ +--- +title: document.getSelection +slug: Web/API/Document/getSelection +tags: + - API + - DOM + - Méthodes + - Reference + - Selection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +--- +

{{APIRef("DOM")}}

+ +

Cette méthode fonctionne de manière identique à la méthode {{domxref ("Window.getSelection()")}} ; elle renvoie un objet {{domxref ("Selection")}} représentant le texte actuellement sélectionné dans le document.

diff --git a/files/fr/web/api/document/hasfocus/index.html b/files/fr/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..4b70cdaf0a --- /dev/null +++ b/files/fr/web/api/document/hasfocus/index.html @@ -0,0 +1,151 @@ +--- +title: document.hasFocus +slug: Web/API/Document/hasFocus +tags: + - API + - DOM + - Focus + - Méthodes + - Reference +translation_of: Web/API/Document/hasFocus +--- +

{{ ApiRef() }}

+ +

La méthode Document.hasFocus() retourne une valeur  {{jsxref("Boolean")}} true (vrai) indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus.

+ +
+

Note : Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus.

+
+ +

Syntaxe

+ +
focused = document.hasFocus();
+
+ +

Valeur retournée

+ +

false (faux) si l'élément actif dans le document n'a pas de focus ; true (vrai) si l'élément actif dans le document a le focus.

+ +

Exemple

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>TEST</title>
+<style>
+#message { font-weight: bold; }
+</style>
+<script>
+setInterval( checkPageFocus, 200 );
+
+function checkPageFocus() {
+  var info = document.getElementById("message");
+
+  if ( document.hasFocus() ) {
+    info.innerHTML = "The document has the focus.";
+  } else {
+    info.innerHTML = "The document doesn't have the focus.";
+  }
+}
+
+function openWindow() {
+  window.open (
+    "http://developer.mozilla.org/",
+    "mozdev",
+    "width=640,height=300,left=150,top=260"
+  );
+}
+</script>
+</head>
+<body>
+  <h1>JavaScript hasFocus example</h1>
+  <div id="message">Waiting for user action</div>
+  <div><button onclick="openWindow()">Open a new window</button></div>
+</body>
+</html>
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}{{Spec2('HTML WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support30{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1.9") }}6.0{{ CompatNo() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.9") }}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}
+
+ +

Voir aussi

+ + + +

 

+ +
 
+ +

 

diff --git a/files/fr/web/api/document/head/index.html b/files/fr/web/api/document/head/index.html new file mode 100644 index 0000000000..1fa6aa3fa3 --- /dev/null +++ b/files/fr/web/api/document/head/index.html @@ -0,0 +1,75 @@ +--- +title: document.head +slug: Web/API/Document/head +tags: + - DOM + - Document + - HTML5 +translation_of: Web/API/Document/head +--- +

Résumé

+

Retourne l'élément {{HTMLElement("head")}} du document courant. S'il y a plus d'un élément <head>, le premier est retourné.

+

Syntaxe

+
var objRef = document.head;
+
+

Exemple

+
// en HTML: <head id="my-document-head">
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+
+

Notes

+

document.head est en lecture seule. Essayer d'assigner une valeur à cettre propriété échouera en silence ou lancera une TypeError si le mode strict d'ECMAScript est activé dans un navigateur Gecko.

+

Compatibilité

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4.0{{CompatGeckoDesktop("2")}}9.011.05.0
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("2")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+

Spécification

+ diff --git a/files/fr/web/api/document/height/index.html b/files/fr/web/api/document/height/index.html new file mode 100644 index 0000000000..8f69f2dbbc --- /dev/null +++ b/files/fr/web/api/document/height/index.html @@ -0,0 +1,44 @@ +--- +title: Document.height +slug: Web/API/Document/height +translation_of: Web/API/Document/height +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +
+

Note: Apparu avec {{Gecko("6.0")}}, document.height n'est plus supporté. Utilisez à la place document.body.clientHeight. Voir {{domxref("element.clientHeight")}}.

+
+ +

Résumé

+ +

Retourne la hauteur de l'objet {{domxref("document")}}. Dans la plupart des cas, ceci est égal à l'élément {{HTMLElement("body")}} du document courant.

+ +

Syntaxe

+ +
height_value = document.height
+
+ +

Exemple

+ +
// alert document height
+alert(document.height);
+
+ +

Alternatives

+ +
document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+
+ +

Spécification

+ +

HTML5

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/hidden/index.html b/files/fr/web/api/document/hidden/index.html new file mode 100644 index 0000000000..d4b6aaf64b --- /dev/null +++ b/files/fr/web/api/document/hidden/index.html @@ -0,0 +1,43 @@ +--- +title: Document.hidden +slug: Web/API/Document/hidden +translation_of: Web/API/Document/hidden +--- +

{{ ApiRef("DOM") }}

+ +

La propriété Document.hidden retourne un Booléen qui indique si la page est considérée cachée ou pas.

+ +

Syntaxe

+ +
var boolean = document.hidden
+ +

Exemples

+ +
document.addEventListener("visibilitychange", function() {
+  console.log( document.hidden );
+  // Modifier le comportement...
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}{{Spec2('Page Visibility API')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Document.hidden")}}

diff --git a/files/fr/web/api/document/images/index.html b/files/fr/web/api/document/images/index.html new file mode 100644 index 0000000000..56ae7fba48 --- /dev/null +++ b/files/fr/web/api/document/images/index.html @@ -0,0 +1,28 @@ +--- +title: document.images +slug: Web/API/Document/images +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Document/images +--- +

{{ ApiRef() }}

+

Résumé

+

document.images renvoie une collection des images du document HTML courant.

+

Syntaxe

+
HTMLCollection = document.images
+
+

Exemple

+
var listeimg = document.images;
+for(var i = 0; i < listeimg.length; i++) {
+    if(listeimg[i] == "banner.gif") {
+         // l'image banner a été trouvée
+    }
+}
+
+

Notes

+

document.images fait partie du DOM HTML, et fonctionne uniquement pour les document HTML.

+

Spécification

+ diff --git a/files/fr/web/api/document/implementation/index.html b/files/fr/web/api/document/implementation/index.html new file mode 100644 index 0000000000..5f7d1a8bff --- /dev/null +++ b/files/fr/web/api/document/implementation/index.html @@ -0,0 +1,47 @@ +--- +title: document.implementation +slug: Web/API/Document/implementation +tags: + - API + - DOM + - Propriétés + - Reference +translation_of: Web/API/Document/implementation +--- +

Résumé

+ +

Retourne un objet {{domxref("DOMImplementation")}} associé avec le document courant.

+ +

Syntaxe

+ +
DOMImpObj = document.implementation;
+
+ +

Exemple

+ +
var modName = "HTML";
+var modVer = "2.0";
+var conformTest = document.implementation.hasFeature( modName, modVer );
+
+alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest );
+
+// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge.
+ +

Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la Conformance Section DOM niveau 2.

+ +

Notes

+ +

La recommandation DOM niveau 1 du W3C ne spécifiait que la méthode hasFeature, qui est un moyen de déterminer si un module DOM est supporté par un navigateur (voir l'exemple ci-dessus et ce que votre agent utilisateur prétend prendre en charge ?). Si disponibles, d'autres méthodes DOMImplementation fournissent des services pour contrôler des choses en dehors d'un document unique. Par exemple, l'interface DOMImplementation inclut une méthode createDocumentType avec laquelle des DTD peuvent être créées pour un ou plusieurs documents gérés par l'implémentation.

+ +

Spécifications

+ + + +

Notes propres à Gecko

+ + diff --git a/files/fr/web/api/document/importnode/index.html b/files/fr/web/api/document/importnode/index.html new file mode 100644 index 0000000000..32bef68f4a --- /dev/null +++ b/files/fr/web/api/document/importnode/index.html @@ -0,0 +1,92 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +tags: + - API + - Copie + - Document + - Méthodes + - Noeud + - Reference +translation_of: Web/API/Document/importNode +--- +

{{APIRef("DOM")}}

+ +

La méthode {{domxref ("Document")}} importNode() crée une nouvelle copie du {{domxref ("Node")}} ou {{domxref ("DocumentFragment")}} spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.

+ +

Syntaxe

+ +
var node = document.importNode(externalNode, deep);
+
+ +
+
externalNode
+
Le nouveau Node ou DocumentFragment à importer dans le document courant. Après l'importation, le nouveau parentNode du noeud est null, car il n'a pas encore été inséré dans l'arborescence du document.
+
deep
+
Une valeur booléenne qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de externalNode. Si ce paramètre est true (vrai), alors externalNode et tous ses descendants sont copiés; si false (faux), seul le nœud unique, externalNode, est importé.
+
+ +
+

Note : Dans la spécification DOM4, deep est répertorié en tant qu'argument facultatif. S'il est omis, la méthode agit comme si la valeur de deep était true, par défaut, elle utilisait le clonage profond comme comportement par défaut. Pour créer un clone superficiel, la profondeur doit être définie sur false.
+
+ Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de deep était false. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument deep à la fois pour la compatibilité en amont et en aval. Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.

+
+ +

Exemple

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+ +

Notes

+ +

Le noeud d'origine n'est pas supprimé du document d'origine. Le noeud importé est un clone de l'original.

+ +

 

+ +

Les nœuds provenant de documents externes doivent être clonés à l'aide de document.importNode() (ou adoptés avec document.adoptNode()) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes de Node.ownerDocument, consultez la FAQ DOM du W3C (en anglais).

+ +

Gecko n'obligeait pas à utiliser document.importNode() et document.adoptNode() avant sa version 1.9. Depuis les versions 1.9 alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

+ +

 

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}{{Spec2("DOM2 Core")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.Document.importNode")}}  

+
+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/api/document/index.html b/files/fr/web/api/document/index.html new file mode 100644 index 0000000000..fa8a1dd365 --- /dev/null +++ b/files/fr/web/api/document/index.html @@ -0,0 +1,490 @@ +--- +title: document +slug: Web/API/Document +tags: + - API + - DOM + - Document + - Interface + - Reference +translation_of: Web/API/Document +--- +

{{ApiRef}}

+ +

L'interface Document représente n'importe quelle page Web chargée dans le navigateur et sert de point d'entrée dans le contenu de la page Web, qui est l'arborescence DOM. L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} (corps) et {{HTMLElement ("table")}} (tableau), parmi beaucoup d'autres. Il fournit des fonctionnalités globales au document, comme le moyen d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document.

+ +

{{inheritanceDiagram}}

+ +

L'interface Document décrit les propriétés et méthodes communes à tout type de document. En fonction du type de document (HTML, XML, SVG, ...), une API plus grande est disponible : les documents HTML, servis avec le type text/html, implémentent également l'interface {{domxref ("HTMLDocument")}}, alors que les documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}.

+ +

Constructeur

+ +
+
{{domxref("Document.Document","Document()")}}{{non-standard_inline}}
+
crée un nouvel objet Document .
+
+ +

Propriétés

+ +

Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref("EventTarget")}} .

+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
fournit un accès à tous les éléments du document. C'est une interface héritée non standard qui ne doit pas être utilisée.
+
+ +
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
utilisé avec {{domxref("document.load")}} pour indiquer une requête asynchrone.
+
+ +
+
{{domxref("Document.characterSet")}} {{readonlyinline}} {{Deprecated_inline}}
+
renvoie le jeu de caractères utilisé par le document.
+
+ +
+
{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}
+
indique si le document est rendu en mode Quirks ou Strict.
+
+ +
+
{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}
+
Renvoie le type de contenu de l'en-tête MIME du document courant.
+
+ +
+
{{domxref("Document.doctype")}} {{readonlyinline}}
+
Renvoie le DTD (Document Type Definition) du document courant.
+
+ +
+
{{domxref("Document.documentElement")}} {{readonlyinline}}
+
Renvoie l'{{domxref("Element")}} qui est l'enfant direct du document. Pour les documents HTML, il s'agit normalement de l'élément {{HTMLElement("HTML")}}.
+
{{domxref("Document.documentURI")}} {{readonlyinline}}
+
retroune l'emplacement du document sous la forme d'une chaîne de caractères.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
devrait retourner un objet {{domxref("DOMConfiguration")}} .
+
{{domxref("Document.fullscreen")}} {{obsolete_inline}}
+
true (vrai) quand le document est en {{domxref("Using_full-screen_mode","mode plein écran")}}.
+
{{domxref("Document.hidden")}} {{readonlyinline}}
+
...
+
{{domxref("Document.implementation")}} {{readonlyinline}}
+
Renvoie l'implémentation DOM associée au document courant.
+
{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}
+
alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place.
+
{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}
+
retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur null jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de  {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
retourne un {{jsxref("Boolean")}} qui est true (vrai) seulement si le document est synthétique, tel qu'une image autonome, une vidéo, un fichier audio ou similaire.
+
{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
L'élément qui est actuellement affiché en mode plein écran pour ce document.
+
{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true (vrai) si l'appel  {{domxref("Element.mozRequestFullscreen()")}}  est réussi dans le document courant.
+
{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}
+
renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé. null si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document.
+
{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}
+
renvoie la page de style préférée spécifiée par l'auteur de la page.
+
{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}
+
retourne une référence à l'{{domxref("Element")}} qui fait défiler le document.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
renvoie la feuille de style actuellement utilisée.
+
{{domxref("Document.styleSheets")}} {{readonlyinline}}
+
Renvoie une liste de tous les objets {{domxref("stylesheet")}} (feuilles de styles) du document courant.
+
{{domxref("Document.timeline")}} {{readonlyinline}}
+
...
+
{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}
+
...
+
{{domxref("Document.visibilityState")}} {{readonlyinline}}
+
renvoie une string (chaîne de caractères) indiquant l'état de visibilité du document. Les valeurs possibles sont visible , hidden (masqué) , prerender (pré-rendu) et unloaded (déchargées).
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
retourne le codage déterminé par une déclaration XML.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
renvoie true si la déclaration XML précise que le document doit être autonome (par exemple, une partie externe de la DTD du contenu du document), sinon false (faux).
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
retourne le numéro de la version spécifié dans la déclaration XML ou "1.0" si la déclaration est absente.
+
+ +

L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :

+ +

{{page("/fr/docs/Web/API/ParentNode","Propriétés")}}

+ +

Extensions du document HTML

+ +

L'interface Document, pour les documents HTML, hérite de l'interface {{domxref("HTMLDocument")}}  ou depuis HTML5, est étendue pour eux.

+ +
+
{{domxref("Document.activeElement")}} {{readonlyinline}}
+
Renvoie l'élément courant qui a la focus.
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Renvoie ou définit la couleur des liens actifs du corps du document.
+
{{domxref("Document.anchors")}}
+
Renvoie une liste de toutes les ancres du document.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Renvoie une liste ordonnée des "applets" du document.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
bgColor renvoie ou définit la couleur d'arrière-plan du document courant.
+
+ +
+
{{domxref("Document.body")}}
+
body renvoie l'élément  {{HTMLElement("body")}} du document en cours.
+
{{domxref("Document.cookie")}}
+
Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie.
+
+ +
+
{{domxref("Document.defaultView")}} {{readonlyinline}}
+
Renvoie une référence à l'objet window.
+
{{domxref("Document.designMode")}}
+
renvoie ou définit les capacités d'édition du document entier.
+
{{domxref("Document.dir")}} {{readonlyinline}}
+
Assigne / renvoie le sens du texte (rtl/ltr) (de gauche à droite / de droite à gauche) du document.
+
{{domxref("Document.domain")}}
+
renvoie ou affecte le domaine de l'élément courant.
+
{{domxref("Document.embeds")}} {{readonlyinline}}
+
renvoie une liste des objets {{HTMLElement('embed')}} inclus dans le document courant.
+
+ +
+
{{domxref("Document.fgColor")}} {{Deprecated_inline}}
+
renvoie ou définit la couleur du texte du document courant.
+
{{domxref("Document.forms")}} {{readonlyinline}}
+
forms renvoie une liste des éléments {{HTMLElement("form")}} du document courant
+
{{domxref("Document.head")}} {{readonlyinline}}
+
Renvoie l'élément {{HTMLElement("head")}} du document.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
renvoie ou définit la hauteur du document courant.
+
{{domxref("Document.images")}} {{readonlyinline}}
+
renvoie une liste des images du document courant.
+
{{domxref("Document.lastModified")}} {{readonlyinline}}
+
Renvoie la date de dernière modification du document.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Renvoie ou définit la couleur des liens du document.
+
{{domxref("Document.links")}} {{readonlyinline}}
+
Renvoie un tableau de tous les liens du document.
+
{{domxref("Document.location")}} {{readonlyinline}}
+
Renvoie l'URI (Uniform Ressource Identifier : identifiant uniforme de ressource) du document courant.
+
{{domxref("Document.plugins")}} {{readonlyinline}}
+
Renvoie une liste des plugins disponibles.
+
{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}
+
retourne l'état du chargement du document.
+
{{domxref("Document.referrer")}} {{readonlyinline}}
+
Renvoie l'URI de la page qui a amené à cette page.
+
{{domxref("Document.scripts")}} {{readonlyinline}}
+
renvoie tous les éléments {{HTMLElement("script")}}  sur le document.
+
{{domxref("Document.title")}}
+
Renvoie le titre du document courant.
+
{{domxref("Document.URL")}}  {{readonlyInline}}
+
Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", repère uniforme de ressource) du document courant.
+
+ +
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Renvoie ou définit la couleur des liens visités du document.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Renvoie la largeur du document courant.
+
+ +

Gestionnaire d'évènements

+ +
+
{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("afterscriptexecute")}}
+
{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}
+
retourne le code de gestion d'évènements pour l'évènement {{event("beforescriptexecute")}} .
+
{{domxref("Document.oncopy")}} {{non-standard_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("copy")}} .
+
{{domxref("Document.oncut")}} {{non-standard_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("cut")}} .
+
{{domxref("Document.onfullscreenchange")}}
+
est un  {{domxref("EventHandler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé.
+
{{domxref("Document.onfullscreenerror")}}
+
{{domxref("Document.onfullscreenchange")}}
+
est un  {{domxref("EventHandler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé.
+
{{domxref("Document.onpaste")}} {{non-standard_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("paste")}} .
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("pointerlockchange")}} .
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("pointerlockerror")}} .
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} .
+
{{domxref("Document.onselectionchange")}} {{experimental_inline}}
+
est un  {{domxref("EventHandler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé.
+
{{domxref("Document.onvisibilitychange")}}
+
est un  {{domxref("EventHandler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé.
+
{{domxref("Document.onwheel")}} {{non-standard_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} .
+
+ +

L'interface Document est étendue avec l'interface {{domxref("GlobalEventHandlers")}} :

+ +

{{Page("/fr/docs/Web/API/GlobalEventHandlers", "Propriétés")}}

+ +

Méthodes

+ +

Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.

+ +
+
{{domxref("Document.adoptNode()")}}
+
adopte le noeud d'un document externe.
+
{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}
+
voir {{domxref("Window.captureEvents")}}.
+
{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}
+
obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées.
+
{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}
+
Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées.
+
{{domxref("Document.createAttribute()")}}
+
Crée un nouvel objet {{domxref("Attr")}} et le renvoie.
+
{{domxref("Document.createAttributeNS()")}}
+
Crée un nouveau noeud dans l'espace nom donné et le renvoie.
+
{{domxref("Document.createCDATASection()")}}
+
Crée un nouveau nœud CDATA et le renvoie.
+
{{domxref("Document.createComment()")}}
+
Crée un nouveau nœud de commentaire et le renvoie.
+
{{domxref("Document.createDocumentFragment()")}}
+
Crée un nouveau fragment de document.
+
{{domxref("Document.createElement()")}}
+
Crée un nouvel élément avec l'étiquette spécifiée.
+
{{domxref("Document.createElementNS()")}}
+
Crée un nouvel élément du type et avec l'URI d'espace de nom spécifiés.
+
{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}
+
Crée un nouvel objet de référence à une entité et le renvoie.
+
{{domxref("Document.createEvent()")}}
+
Crée un nouvel évènement.
+
{{domxref("Document.createNodeIterator()")}}
+
crée un objet {{domxref("NodeIterator")}} .
+
{{domxref("Document.createProcessingInstruction()")}}
+
crée un nouvel objet {{domxref("ProcessingInstruction")}} .
+
{{domxref("Document.createRange()")}}
+
Crée un objet {{domxref("Range")}} .
+
{{domxref("Document.createTextNode()")}}
+
Crée un nœud de texte.
+
{{domxref("Document.createTouch()")}} {{Deprecated_inline}}
+
crée un objet {{domxref("Touch")}}
+
{{domxref("Document.createTouchList()")}}
+
crée un objet {{domxref("TouchList")}}
+
{{domxref("Document.createTreeWalker()")}}
+
Crée un objet {{domxref("TreeWalker")}} .
+
{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}
+
Renvoie l'élément visible aux coordonnées spécifiées.
+
{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}
+
Renvoie un tableau de tous les éléments aux coordonnées spécifiées.
+
{{domxref("Document.enableStyleSheetsForSet()")}}
+
active les feuilles de style pour l'ensemble de feuilles de style spécifié.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Supprime le verrou du pointeur.
+
{{domxref("Document.getAnimations()")}} {{experimental_inline}}
+
retourne un tableau de tous les objets {{domxref("Animation")}} actuels, dont les éléments cibles sont les descendants de ce document.
+
+ +
+
{{domxref("Document.getElementsByClassName()")}}
+
Renvoie une liste des éléments ayant le nom de classe donné.
+
+ +
+
{{domxref("Document.getElementsByTagName()")}}
+
Renvoie une liste des éléments ayant le nom de balise donné.
+
+ +
+
{{domxref("Document.getElementsByTagNameNS()")}}
+
Renvoie une liste des éléments du nom de balise et de l'espace de noms spécifiés.
+
+ +
+
{{domxref("Document.importNode()")}}
+
Renvoie une copie (un clone) d'un élément provenant d'un document externe.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
remplace les entités, normalise les noeuds de texte, etc.
+
{{domxref("Document.registerElement()")}} {{experimental_inline}}
+
Enregistre un composant Web.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Libère la capture de la souris en cours s'il s'agit d'un élément de ce document.
+
{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
voir {{domxref("Window.releaseEvents()")}}.
+
{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
Voir {{domxref("Window.routeEvent()")}}.
+
{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié.
+
+ +

L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :

+ +
+
{{domxref("document.getElementById","document.getElementById(String id)")}}
+
retourne une référence d'objet à l'élément identifié.
+
{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Renvoie le premier noeud Element dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés.
+
{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés.
+
+ +

L'interface Document est étendue avec l'interface  {{domxref("XPathEvaluator")}} :

+ +
+
{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}
+
compile une XPathExpression qui peut ensuite être utilisée pour des évaluations (répétées).
+
{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}
+
crée un objet {{domxref("XPathNSResolver")}} .
+
{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
évalue l'expression XPath .
+
+ +

Extensions pour les documents HTML

+ +
+
{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien.
+
{{domxref("document.close()")}}
+
ferme un flux de document pour l'écriture.
+
{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}
+
Sur un document modifiable, exécute une commande de formatage.
+
{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}
+
retourne une liste d'éléments ayant le nom donné.
+
{{domxref("document.getSelection()")}}
+
retourne un objet {{domxref("Selection")}} relatif au texte sélectionné dans le document.
+
{{domxref("document.hasFocus()")}}
+
retourne true (vrai) si le focus est actuellement localisé n'importe où sur le document spécifié.
+
{{domxref("document.open()")}}
+
Ouvre un flux pour l'écriture dans le document.
+
{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}
+
Renvoie true si la commande de formatage peut être exécutée sur la plage courante.
+
{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}
+
Renvoie true si la commande de formatage est dans un état indéterminé sur la plage courante.
+
{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}
+
Renvoie true si la commande de formatage a été exécutée sur la plage courante.
+
{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}
+
retourne true (vrai) si la commande de formatage est supportée sur la plage courante.
+
{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}
+
renvoie la valeur courante de la plage en cours pour une commande de formatage.
+
{{domxref("document.write","document.write(String text)")}}
+
Écrit du texte dans le document.
+
{{domxref("document.writeln","document.writeln(String text)")}}
+
Écrit une ligne de texte dans le document.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}{{Spec2('Page Visibility API')}}Ajoute onvisibilitychange.
{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}{{Spec2('Selection API')}}Ajoute onselectstartet onselectionchange.
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Définition initiale pour l'interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Remplace DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}remplace DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}en vue de remplacer DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Transforme l'interface {{domxref("HTMLDocument")}} en une extension de Document
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document.
{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}{{Spec2('Page Visibility API')}}Étend l'interface Document  avec les attributs visibilityState et hidden.
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Étend l'interface Document
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Étend l'interface Document
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Étend l'interface Document
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Étend l'interface Document
+ +

Compatibilité des navigateurs notes

+ +

Notes concernant Firefox :

+ +

Mozilla définit un ensemble de propriétés non-standard créées seulement pour le contenu XUL :

+ +
+
{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution.
+
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+
(extensions Mozilla seulement) retourne l'objet  {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect).
+
{{domxref("document.popupNode")}}
+
retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle.
+
{{domxref("document.tooltipNode")}}
+
retourne le noeud qui est la cible de l'info-bulle actuelle.
+
+ +

Mozilla a également défini quelques méthodes non standard :

+ +
+
{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
Cette méthode n'a jamais rien fait et a toujours lancé une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.
+
{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}
+
Utiliser la méthode {{domxref("Element.getBoundingClientRect()")}} à la place.
+
{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}
+
charge dynamiquement un XUL overlay . Celui-ci fonctionne seulement dans les documents XUL.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
Cette méthode n'a jamais rien fait d'autre que de lancer une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.
+
+ +

Notes concernant Internet Explorer

+ +

Microsoft a défini quelques propriétés non standard :

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir  MSDN.
+
+ +

Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document :

+ +
+
{{domxref("document.contains")}}
+
Pour contourner le problème, document.body.contains () peut être utilisé.
+
diff --git a/files/fr/web/api/document/keypress_event/index.html b/files/fr/web/api/document/keypress_event/index.html new file mode 100644 index 0000000000..e0560ef1df --- /dev/null +++ b/files/fr/web/api/document/keypress_event/index.html @@ -0,0 +1,102 @@ +--- +title: keypress +slug: Web/API/Document/keypress_event +tags: + - DOM + - Déprécié + - Evènement + - KeyboardEvent + - Reference +translation_of: Web/API/Document/keypress_event +--- +
{{APIRef}} {{deprecated_header}}
+ +

L'évènement keypress est déclenché lorsqu'une touche produisant un caractère est pressée. Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches Alt, Shift, Ctrl ou Meta ne sont pas concernées.

+ +
+

Attention ! Cet évènement est déprécié et il faudrait plutôt utiliser beforeinput ou keydown.

+
+ + + + + + + + + + + + + + + + + + + + + + +
Interface{{domxref("KeyboardEvent")}}
Remonte sur les parents (bubbles)Oui
AnnulableOui
Action par défautCela peut varier : évènement keypress ; ouverture du système de composition du texte ; évènements blur et focus ; évènement DOMActivate {{deprecated_inline}}; autre évènement.
+ +

Exemples

+ +

Ajout d'un addEventListener

+ +

Dans cet exemple, on affiche la valeur de {{domxref("KeyboardEvent.code")}} lorsqu'on appuie sur une touche :

+ +
<p>
+   Cliquez dans l'iframe pour lui passer le focus
+   puis appuyez sur des touches du clavier.
+</p>
+<p id="log"></p>
+ +
const log = document.getElementById('log');
+
+document.addEventListener('keypress', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

{{EmbedLiveSample("addEventListener_keypress_example")}}

+ +

Équivalent onkeypress

+ +
document.onkeypress = logKey;
+ +

Spécifications

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

Compatibilité des navigateurs

+ +

{{Compat("api.Document.keypress_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/lastmodified/index.html b/files/fr/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..c9f26ad21b --- /dev/null +++ b/files/fr/web/api/document/lastmodified/index.html @@ -0,0 +1,67 @@ +--- +title: Document.lastModified +slug: Web/API/Document/lastModified +translation_of: Web/API/Document/lastModified +--- +
{{APIRef("DOM")}}
+ +

Retourne une chaîne de caractère contenant la date et l'heure à laquelle le présent document a été modifié pour la dernière fois.

+ +

Syntaxe

+ +
string = document.lastModified;
+
+ +

Exemples

+ +

Exemple #1: Utilisation simple

+ +
alert(document.lastModified);
+// renvoie: 11/28/2015 16:11:15
+
+ +

Exemple #2: Transformer lastModified en un objet de type Date

+ +
var oLastModif = new Date(document.lastModified);
+
+ +

Exemple #3: Transformer lastModified en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale.

+ +
var nLastModif = Date.parse(document.lastModified);
+
+ +

Notes

+ +

Veuillez noter qu'en tant que chaîne de caractères, lastModified ne peut être facilement utilisé pour des comparaisons entre les dates modifées des documents. Voici un exemple possible qui montre comment afficher une alerte quand la page change (voir aussi: API des cookies en JavaScript):

+ +
if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) {
+    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
+    alert("Cette page a changé !");
+}
+ +

… le même exemple, mais en ignorant la première visite:

+ +
var
+
+    nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")),
+    nLastModif = Date.parse(document.lastModified);
+
+if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
+    if (isFinite(nLastVisit)) {
+        alert("Cette page a changé !");
+    }
+}
+ +
Note: WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local.
+(Voir: Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local)
+ +

Si vous voulez savoir si une page externe a changé, veuillez lire ce paragraphe à propos de l'API XMLHttpRequest().

+ +

Spécification

+ +

HTML5

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.lastModified")}}

diff --git a/files/fr/web/api/document/laststylesheetset/index.html b/files/fr/web/api/document/laststylesheetset/index.html new file mode 100644 index 0000000000..2f24656c13 --- /dev/null +++ b/files/fr/web/api/document/laststylesheetset/index.html @@ -0,0 +1,46 @@ +--- +title: Document.lastStyleSheetSet +slug: Web/API/Document/lastStyleSheetSet +tags: + - API + - DOM + - Feuilles de styles + - Propriétés +translation_of: Web/API/Document/lastStyleSheetSet +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}

+ +

Renvoie le dernier jeu de feuilles de styles activé ; cette valeur de la propriété change chaque fois que la propriété {{ domxref("document.selectedStyleSheetSet") }} est modifiée.

+ +

Syntaxe

+ +
lastStyleSheetSet = document.lastStyleSheetSet
+
+ +

En retour, lastStyleSheetSet indique le jeu de feuilles de styles qui a été défini le plus récemment. Si le jeu de feuilles de style en cours n'a pas été modifié en définissant {{ domxref("document.selectedStyleSheetSet") }}, la valeur retournée est null.

+ +
Note : Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.
+ +

Exemple

+ +
var lastSheetSet = document.lastStyleSheetSet;
+if (!lastSheetSet) {
+  lastSheetSet = "Sheet not yet changed";
+}
+console.log("The last sheet set is: " + lastSheetSet);
+
+ +

Voir aussi

+ + + +

Spécifications

+ + diff --git a/files/fr/web/api/document/location/index.html b/files/fr/web/api/document/location/index.html new file mode 100644 index 0000000000..afd9341feb --- /dev/null +++ b/files/fr/web/api/document/location/index.html @@ -0,0 +1,111 @@ +--- +title: Document.location +slug: Web/API/Document/location +tags: + - API + - Document + - HTML DOM + - Propriété + - Reference + - lecture seule +translation_of: Web/API/Document/location +--- +

La propriété en lecture seule Document.location renvoie un objet {{domxref("Location")}}, contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL.

+ +

Bien que Document.location soit un objet  Location en lecture seule, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: document.location = 'http://www.example.com' est un synonyme de document.location.href = 'http://www.example.com'.

+ +

Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété {{domxref("document.URL")}} peut également être utilisée.

+ +

Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est null.

+ +

Syntaxe

+ +
locationObj = document.location
+document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org'
+
+ +

Exemple

+ +
console.log(document.location);
+// Affiche un string-like
+// "http://www.example.com/juicybits.html" dans la console
+
+ +

Spécification

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}{{Spec2('HTML WHATWG')}}Pas de changement avec {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Voir également

+ + diff --git a/files/fr/web/api/document/mozsetimageelement/index.html b/files/fr/web/api/document/mozsetimageelement/index.html new file mode 100644 index 0000000000..1c35bcbcc5 --- /dev/null +++ b/files/fr/web/api/document/mozsetimageelement/index.html @@ -0,0 +1,81 @@ +--- +title: Document.mozSetImageElement() +slug: Web/API/Document/mozSetImageElement +tags: + - API + - Arrière-plan + - CSS + - DOM + - Image + - Méthodes +translation_of: Web/API/Document/mozSetImageElement +--- +

{{ ApiRef("DOM") }}

+ +

{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}

+ +

Change l'élément utilisé comme arrière-plan CSS par un arrière-plan avec un ID d'élément d'arrière-plan donné.

+ +

Syntaxe

+ +
document.mozSetImageElement(imageElementId, imageElement);
+
+ +

Paramètres

+ + + +

Exemple

+ +

Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc.

+ +

Vue de cet exemple en direct.

+ +
<style type="text/css">
+  #mybox {
+    background-image: -moz-element(#canvasbg);
+    text-align: center;
+    width: 400px;
+    height: 400px;
+    cursor: pointer;
+  }
+</style>
+
+ +

Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan.

+ +
var c = 0x00;
+function clicked() {
+  var canvas = document.createElement("canvas");
+  canvas.setAttribute("width", 100);
+  canvas.setAttribute("height", 100);
+
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = "#" + c.toString(16) + "0000";
+  ctx.fillRect(25, 25, 75, 75);
+
+  c += 0x11;
+  if (c > 0xff) {
+    c = 0x00;
+  }
+
+  document.mozSetImageElement("canvasbg", canvas);
+}
+
+ +

Le code ici est appelé chaque fois que l'utilisateur clique sur l'élément {{ HTMLElement("div") }}. Il crée un nouveau {{ HTMLElement("canvas") }} avec la largeur et la hauteur définies à 100 pixels et le dessine dans un carré de 50 par 50 pixels. Chaque fois que la fonction est appelée, le carré est d'une couleur différente (sa composante rouge est augmentée à chaque fois), donc chaque fois que l'utilisateur clique sur l'élément, le fond est plus lumineux et rempli d'un motif plus lumineux de carreaux rouges.

+ +

Une fois le canvas dessiné, document.mozSetImageElement() est appelée pour définir l'arrière-plan de tout CSS en utilisant l'ID "canvasbg" comme ID d'élément d'arrière-plan pour être notre nouveau canvas.

+ +

Spécifications

+ +

Ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.html b/files/fr/web/api/document/mozsyntheticdocument/index.html new file mode 100644 index 0000000000..443c3ca5e0 --- /dev/null +++ b/files/fr/web/api/document/mozsyntheticdocument/index.html @@ -0,0 +1,35 @@ +--- +title: Document.mozSyntheticDocument +slug: Web/API/Document/mozSyntheticDocument +tags: + - API + - DOM + - Document + - Propriétés +translation_of: Web/API/Document/mozSyntheticDocument +--- +

{{ ApiRef("DOM") }}

+ +

Indique si le document est synthétique ou non ; c'est-à-dire un document représentant une image autonome, une vidéo, un son ou analogue.

+ +

Syntaxe

+ +
var isSynthetic = document.mozSyntheticDocument;
+
+ +

En retour, isSynthetic est true (vrai) si le document est synthétique ; sinon, false (faux).

+ +

Exemple

+ +

Il peut être utile, si vous avez un élément de menu contextuel que vous souhaitez uniquement afficher pour les documents synthétiques (ou, inversement, pour les documents qui ne sont pas synthétiques).

+ +
var isSynthetic = document.mozSyntheticDocument;
+
+if (isSynthetic) {
+  /* insert your menu item here */
+}
+
+ +

Spécifications

+ +

Ne fait partie d'aucune spécification.

diff --git a/files/fr/web/api/document/onafterscriptexecute/index.html b/files/fr/web/api/document/onafterscriptexecute/index.html new file mode 100644 index 0000000000..52494ee50e --- /dev/null +++ b/files/fr/web/api/document/onafterscriptexecute/index.html @@ -0,0 +1,48 @@ +--- +title: Document.onafterscriptexecute +slug: Web/API/Document/onafterscriptexecute +tags: + - API + - DOM + - Propriétés + - scripts +translation_of: Web/API/Document/onafterscriptexecute +--- +
{{ ApiRef("DOM") }} {{non-standard_header}}
+ +
 
+ +

Résumé

+ +

Lancé lorsqu'un élément {{HTMLElement("script")}} statique achève l'exécution de son script. N'est pas lancé si l'élément est ajouté dynamiquement, par exemple avec appendChild().

+ +

Syntaxe

+ +
document.onafterscriptexecute = funcRef;
+
+ +

funcRef est une référence de fonction appelée lorsqu'un évènement est lancé. L'attribut de la target (cible) d'évènement est défini sur l'{{domxref("Element")}} script dont l'exécution vient de s'achever.

+ +

Exemple

+ +
function finished(e) {
+  logMessage("Finished script with ID: " + e.target.id);
+}
+
+document.addEventListener("afterscriptexecute", finished, true);
+
+ +

Voir l'exemple sur une page

+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/onbeforescriptexecute/index.html b/files/fr/web/api/document/onbeforescriptexecute/index.html new file mode 100644 index 0000000000..f0fc8ee381 --- /dev/null +++ b/files/fr/web/api/document/onbeforescriptexecute/index.html @@ -0,0 +1,46 @@ +--- +title: Document.onbeforescriptexecute +slug: Web/API/Document/onbeforescriptexecute +tags: + - API + - DOM + - Propriétés + - scripts +translation_of: Web/API/Document/onbeforescriptexecute +--- +
{{ApiRef("DOM")}} {{non-standard_header }}
+ +

Résumé

+ +

Lancé lorsque le code dans un élément {{HTMLElement("script")}} déclaré dans un document HTML est sur le point de s'exécuter. N'est pas déclenché si l'élément est ajouté dynamiquement, par exemple avec appendChild().

+ +

Syntaxe

+ +
document.onbeforescriptexecute = funcRef;
+
+ +

funcRef est une référence de fonction appelée lorsque l'évènement est lancé. L'attribut de la target (cible) d'évènement est défini dans l'{{domxref("Element")}} script qui est sur le point d'être exécuté.

+ +

Exemple

+ +
function starting(e) {
+  logMessage("Starting script with ID: " + e.target.id);
+}
+
+document.addEventListener("beforescriptexecute", starting, true);
+
+ +

Voir l'exemple sur une page

+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/onfullscreenchange/index.html b/files/fr/web/api/document/onfullscreenchange/index.html new file mode 100644 index 0000000000..2736f848e7 --- /dev/null +++ b/files/fr/web/api/document/onfullscreenchange/index.html @@ -0,0 +1,106 @@ +--- +title: Document.onfullscreenchange +slug: Web/API/Document/onfullscreenchange +translation_of: Web/API/Document/onfullscreenchange +--- +
{{ApiRef("Fullscreen API")}}
+ +

La propriété Document.onfullscreenchange est un gestionnaire d'événement pour l'événement {{event("fullscreenchange")}} qui est lancé lorsque le document entre ou sort du mode plein écran.

+ +

Syntaxe

+ +
targetDocument.onfullscreenchange = fullscreenChangeHandler;
+
+ +

Exemple

+ +
document.onfullscreenchange = function ( event ) {
+  console.log("FULL SCREEN CHANGE")
+};
+document.documentElement.onclick = function () {
+  // requestFullscreen() doit être un gestionnaire d'événement, sinon ça échouera
+  document.documentElement.requestFullscreen();
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}{{Spec2("HTML WHATWG")}}Initial definition.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basic{{CompatUnknown}}{{CompatGeckoDesktop("47")}}[1] (behind full-screen-api.unprefix.enabled{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Support basique{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("47")}} [1] (behind full-screen-api.unprefix.enabled{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Depuis Firefox 49, c'était techniquement sur {{domxref("GlobalEventHandlers")}}, mais certains gestionnaires d'événements n'étaient jamais appelés lorsqu'un {{domxref("Element")}} était défini.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/onoffline/index.html b/files/fr/web/api/document/onoffline/index.html new file mode 100644 index 0000000000..c8bfb9026a --- /dev/null +++ b/files/fr/web/api/document/onoffline/index.html @@ -0,0 +1,13 @@ +--- +title: Document.onoffline +slug: Web/API/Document/onoffline +tags: + - API + - DOM + - Document + - Propriétés +translation_of: Web/API/Document/onoffline +--- +

{{APIRef("DOM")}}

+ +

Le gestionnaire d'évènements est appelé lorsqu'un évènement {{event("offline")}} est lancé sur le corps (body) et propagé, quand la propriété navigator.onLine change et devient false (fausse).

diff --git a/files/fr/web/api/document/ononline/index.html b/files/fr/web/api/document/ononline/index.html new file mode 100644 index 0000000000..ba10ffd969 --- /dev/null +++ b/files/fr/web/api/document/ononline/index.html @@ -0,0 +1,39 @@ +--- +title: Document.ononline +slug: Web/API/Document/ononline +tags: + - API + - DOM + - Document + - En ligne + - Propriétés +translation_of: Web/API/Document/ononline +--- +

{{APIRef("DOM")}}

+ +

Un évènement "online" est lancé sur le <body> (corps) de chaque page quand le navigateur bascule entre les modes online (en ligne) et offline (hors ligne). De plus les évènements se propagent de document.body vers document et finalement sur window. Les deux évènements ne sont pas annulables (vous ne pouvez pas empêcher l'utilisateur de se connecter ou de vous déconnecter).

+ +

window.navigator.onLine renvoie un booléen true (vrai) si le navigateur est online et false s'il est définitivement offline (déconnecté du réseau). Les évènements online et offline sont lancés si la valeur de cet attribut change.

+ +
+

Il est important de noter que cet événement et cet attribut sont intrinsèquement peu fiables. Un ordinateur peut être connecté à un réseau sans avoir accès à Internet.

+
+ +

Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles :

+ + + +

Exemple

+ +

Il existe  un cas de test simple que vous pouvez exécuter pour vérifier le fonctionnement des évènements.

+ +

Références

+ + diff --git a/files/fr/web/api/document/open/index.html b/files/fr/web/api/document/open/index.html new file mode 100644 index 0000000000..a4b16f90e4 --- /dev/null +++ b/files/fr/web/api/document/open/index.html @@ -0,0 +1,118 @@ +--- +title: document.open +slug: Web/API/Document/open +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/open +--- +
{{APIRef("DOM")}}
+ +
 
+ +

La méthode document.open() ouvre un document pour l'écriture.

+ +

Syntaxe

+ +
document.open();
+
+ +

Exemple

+ +
// Dans cet exemple, le contenu du document est
+// écrasé au cours de la réinitialisation avec open()
+document.write("<html><p>supprimez-moi</p></html>");
+document.open();
+// Le document est vide.
+
+ +

Notes

+ +

Si un document existe dans la cible, cette méthode le supprime (voir l'exemple ci-dessus).

+ +

Par ailleurs, un appel automatique à document.open() est réalisé lorsque document.write() est appelé après que la page ait été chargée, bien que ce ne soit pas défini dans la spécification du W3C. documenter les paramètres à document.open ne figurant pas dans la spécification

+ +

Cette méthode ne doit pas être confondue avec window.open(). document.open permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que window.open fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme window est l'objet, si on appelle juste open(...), il sera traité comme un appel à window.open(...). Le document ouvert peut être fermé à l'aide de document.close().

+ +

Voir Security check basics  pour plus d'informations sur les principaux.

+ +

Si vous ne voulez pas créer une entrée d'historique, remplacez open() par open("text/html", "replace").

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}{{Spec2("DOM2 HTML")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Notes propres à Gecko

+ +

À partir de Gecko 1.9, cette méthode est soumise à la même règle d'origine que les autres propriétés et ne fonctionne pas si cela change l'origine du document.

+ +

À partir de Gecko 1.9.2, document.open() utilise le principal du document dont il utilise l'URI, au lieu de récupérer le principal hors de la pile. Par conséquent, vous ne pouvez plus appeler {{domxref ("document.write ()")}} dans un document non approuvé à partir de chrome, même en utilisant wrappedJSObject.

diff --git a/files/fr/web/api/document/origin/index.html b/files/fr/web/api/document/origin/index.html new file mode 100644 index 0000000000..54fed5b8e3 --- /dev/null +++ b/files/fr/web/api/document/origin/index.html @@ -0,0 +1,106 @@ +--- +title: Document.origin +slug: Web/API/Document/origin +tags: + - API + - DOM + - Document + - Propriétés + - origine +translation_of: Web/API/Document/origin +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule Document.origin renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à  document.defaultView.location.origin.

+ +

Exemples

+ +
var origin = document.origin;
+// Sur cette page, renvoie:'https://developer.mozilla.org'
+
+var origin = document.origin;
+// Sur "about:blank", renvoie :'null'
+
+var origin = document.origin;
+// Sur "data:text/html,<b>foo</b>", renvoie :'null'
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}{{Spec2('DOM WHATWG')}}Définition initiale.
{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}{{Spec2('HTML WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(41)}}{{CompatNo}} {{bug(931884)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/popupnode/index.html b/files/fr/web/api/document/popupnode/index.html new file mode 100644 index 0000000000..8b6af6e137 --- /dev/null +++ b/files/fr/web/api/document/popupnode/index.html @@ -0,0 +1,43 @@ +--- +title: Document.popupNode +slug: Web/API/Document/popupNode +tags: + - API + - DOM + - Document + - Fenêtre contextuelle + - Propriétés + - XUL +translation_of: Web/API/Document/popupNode +--- +
{{ApiRef("DOM")}}{{deprecated_header}}
+ +
Note : À partir de {{Gecko("2.0")}}, les auteurs sont encouragés à utiliser la propriété menupopup triggerNode à la place.
+ +

Quand une fenêtre contextuelle attachée via les attributs popup ou context est ouverte, la propriété popupNode du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte.

+ +

Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs popup ou context. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode showPopup de la fenêtre contextuelle, vous pouvez définir la propriété popupNode directement au préalable.

+ +

Cette propriété s'applique seulement aux documents XUL.

+ +

Syntaxe

+ +
var node = document.popupNode;
+
+ +

Exemple

+ +
<menupopup id="toolbarContextMenu">
+  ...
+  <menuitem oncommand="mailNewsCore.deleteButton(document.popupNode)">
+  ...
+</menupopup>
+
+ +

Voir http://www.mozilla.org/xpfe/xptoolkit/popups.html

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/preferredstylesheetset/index.html b/files/fr/web/api/document/preferredstylesheetset/index.html new file mode 100644 index 0000000000..969a9b39b0 --- /dev/null +++ b/files/fr/web/api/document/preferredstylesheetset/index.html @@ -0,0 +1,48 @@ +--- +title: Document.preferredStyleSheetSet +slug: Web/API/Document/preferredStyleSheetSet +tags: + - API + - CSSOM + - Document + - Feuilles de style + - Propriétés + - Reference +translation_of: Web/API/Document/preferredStyleSheetSet +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}
+ +

Retourne la feuille de style préférée, telle que définie par l'auteur de la page.

+ +

Syntaxe

+ +
preferredStyleSheetSet = document.preferredStyleSheetSet
+
+ +

Au retour, preferredStyleSheetSet indique la feuille de style préférée par l'auteur. Ceci est déterminé par l'ordre des déclarations des feuilles de style et par l'entête HTTP intitulé Default-Style.

+ +

En l'absence de feuille de style préférée, une chaine vide ("") est retournée.

+ +

Exemple

+ +
if (document.preferredStyleSheetSet) {
+  console.log("La feuille de style préférée est : " + document.preferredStyleSheetSet);
+} else {
+  console.log("Il n'y a pas de feuille de style préférée.");
+}
+
+ +

Spécifications

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/querycommandstate/index.html b/files/fr/web/api/document/querycommandstate/index.html new file mode 100644 index 0000000000..7875db98fb --- /dev/null +++ b/files/fr/web/api/document/querycommandstate/index.html @@ -0,0 +1,101 @@ +--- +title: Document.queryCommandState() +slug: Web/API/Document/queryCommandState +tags: + - API + - DOM + - Document +translation_of: Web/API/Document/queryCommandState +--- +
{{ApiRef("DOM")}}
+ +

Syntaxe

+ +
queryCommandState(String command)
+
+ +

Exemple

+ +

TBD

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML Editing','#execcommand()','execCommand')}}{{Spec2('HTML Editing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/querycommandsupported/index.html b/files/fr/web/api/document/querycommandsupported/index.html new file mode 100644 index 0000000000..a46e4374d5 --- /dev/null +++ b/files/fr/web/api/document/querycommandsupported/index.html @@ -0,0 +1,125 @@ +--- +title: Document.queryCommandSupported() +slug: Web/API/Document/queryCommandSupported +tags: + - API + - Commandes + - DOM + - Document + - Méthodes + - editeur +translation_of: Web/API/Document/queryCommandSupported +--- +
{{ApiRef("DOM")}}
+ +

La méthode Document.queryCommandSupported() indique si la commande d'éditeur spécifiée est prise en charge par le navigateur.

+ +

Syntaxe

+ +
isSupported = document.queryCommandSupported(command);
+
+ +
+
+

Paramètres

+
+
command
+
La commande pour laquelle on veut déterminer si elle est prise en charge.
+
+ +

Valeur de retour

+ +

Renvoie un {{jsxref("Boolean")}} qui est true (vrai) si la commande est prise en charge et false (faux) sinon.

+ +

Notes

+ +

La commande 'paste' (coller) renvoie false (faux), pas seulement si la fonctionnalité n'est pas disponible, mais également si le script l'appelant a des privilèges insuffisants pour réaliser l'action [1].

+ +

Exemple

+ +
var flg = document.queryCommandSupported("SelectAll");
+
+if(flg) {
+  // ...Faire quelque chose
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML Editing','#querycommandsupported()','querycommandsupported')}}{{Spec2('HTML Editing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support17{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}[1]4.0{{CompatUnknown}}6.1.6
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Avant Firefox 41, pour la commande 'paste' (coller), Firefox renvoyait incorrectement true (vrai) quand la fonctionnalité coller était disponible même si le script appelant avait des privilèges insuffisants pour réaliser l'action.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/queryselector/index.html b/files/fr/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..b466aaad25 --- /dev/null +++ b/files/fr/web/api/document/queryselector/index.html @@ -0,0 +1,178 @@ +--- +title: document.querySelector +slug: Web/API/Document/querySelector +tags: + - API + - CSS + - DOM + - Document + - JavaScript + - Méthodes + - Sélecteurs + - Échappement +translation_of: Web/API/Document/querySelector +--- +
{{ ApiRef("DOM") }}
+ +

La méthode querySelector() de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou null si aucune correspondance n'est trouvée.

+ +
+

Note : La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants.

+
+ +

Syntaxe

+ +
element = document.querySelector(sélecteurs);
+
+ +

Paramètres

+ +
+
selectors (sélecteurs)
+
une  {{domxref("DOMString")}} (chaîne de caractères) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception SYNTAX_ERR est lancée. Voir Localisation des éléments DOM avec les sélecteurs pour plus d'informations sur les sélecteurs et leur gestion.
+
+ +
+

Note : les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations.

+
+ +

Valeur retournée

+ +

Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de sélecteurs CSS spécifié, ou null s'il n'y a pas de correspondances.

+ +

Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place.

+ +

Exception

+ +
+
SYNTAX_ERR
+
La syntaxe des sélecteurs spécifiés est invalide.
+
+ +

Notes d'utilisation

+ +

Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné.

+ +

Les pseudo-éléments CSS ne retourneront jamais aucun élément, comme spécifié dans l'API des sélecteurs (en).

+ +

Caractère spécial d'échappement

+ +

Pour faire correspondre un ID (identifiant) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper deux fois (une pour la chaîne de caractères JavaScript et une autre fois pour querySelector) :

+ +
<div id="machin\bidule"></div>
+<div id="machin:bidule"></div>
+
+<script>
+  console.log('#machin\bidule')               // "#machinidule" (\b est le caractère de contrôle retour arrière)
+  document.querySelector('#machin\bidule')    // ne correspond à rien
+
+  console.log('#machin\\bidule')              // "#machin\bidule"
+  console.log('#machin\\\\bidule')            // "#machin\\bidule"
+  document.querySelector('#machin\\\\bidule') // correspond au premier div
+
+  document.querySelector('#machin:bidule')    // ne correspond à rien
+  document.querySelector('#machin\\:bidule')  // correspond au second div
+</script>
+
+ +

Exemples

+ +

Trouver le premier élément correspondant à une classe

+ +

Dans cet exemple, le premier élément dans le document qui contient la classe "maclasse" est retourné :

+ +
var el = document.querySelector(".maclasse");
+ +

Un sélecteur plus complexe

+ +

Les sélecteurs peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément <input name="identifiant"/> dans un <div class="panneau-utilisateur principal"> dans le document est retourné :

+ +
var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']");
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}} 
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable()}}

+ +
+
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de base1{{CompatVersionUnknown}}3.58103.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
machin2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}910.03.2
+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/queryselectorall/index.html b/files/fr/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..b9c36f07e7 --- /dev/null +++ b/files/fr/web/api/document/queryselectorall/index.html @@ -0,0 +1,232 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - DOM + - Document + - Méthodes + - Sélecteurs +translation_of: Web/API/Document/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

La méthode querySelectorAll()  de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.

+ +
+

Note : Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode  du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .

+
+ +

Syntaxe

+ +
elements = document.querySelectorAll(selecteurs);
+
+ +

Paramètres

+ +
+
selecteurs
+
une {{domxref("DOMString")}} (chaîne de caractères) qui contient un ou plusieurs sélecteurs CSS ; s'il n'y en a pas, une exception  SyntaxError est lancée. Voir localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.
+
+ +
+

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. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.

+
+ +

Valeur renvoyée

+ +

Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .

+ +
+

Note :  si les selectors spécifiés contiennent un pseudo-element CSS, la liste retournée sera toujours vide.

+
+ +

Exceptions

+ +
+
SyntaxError
+
la syntaxe des chaînes selectors spécifiés n'est pas valide.
+
+ +

Exemples

+ +

Pour obtenir une {{domxref("NodeList")}} (liste de noeuds) de tous les éléments {{HTMLElement("p")}}  dans le document :

+ +
var matches = document.querySelectorAll("p");
+ +

Cet exemple renvoie la liste de tous les éléments div du document dont l'attribut de classe a pour valeur "note" ou "alert" :

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

Ici, nous obtenons une liste des éléments <p> dont l'élément parent immédiat est un {{domxref("div")}} avec la classe "highlighted" et qui sont situés dans un conteneur dont l'identifiant 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")}} dans le document qui contient un attribut nommé "data-src" :

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est "userlist" lequel a 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 renvoyée, vous pouvez l'examiner comme un tableau (array). Si le tableau est vide (c'est quand 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érez ce 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, lors de la sélection de ".outer .inner" dans le contexte, le <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 de base sur lequel la recherche (".select") est effectuée. 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écification

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

+ +
{{CompatibilityTable}}
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1{{CompatGeckoDesktop("1.9.1")}}8103.2 (525.3)
:scope pseudo-class{{ CompatVersionUnknown }}32{{CompatNo}}15[1]7.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
:scope pseudo-class{{ CompatUnknown }}32{{CompatNo}}{{CompatNo}}7.0
+
+ +

[1] Pris en charge dans Opera 15+ en activant les marques "Enable <style scoped>" ou "Enable experimental Web Platform features" dans chrome://flags.

+
+ +

Voir aussi

+
+ + diff --git a/files/fr/web/api/document/readystate/index.html b/files/fr/web/api/document/readystate/index.html new file mode 100644 index 0000000000..57f7b28538 --- /dev/null +++ b/files/fr/web/api/document/readystate/index.html @@ -0,0 +1,131 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - DOM + - HTML + - Référence(2) +translation_of: Web/API/Document/readyState +--- +
{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}
+ +

La valeur Document.readyState est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document.

+ +

À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}.

+ +

Syntaxe

+ +
var string = document.readyState;
+
+ +

Valeurs

+ +

La variable readyState peut valoir :

+ +
+
loading
+
Le {{ domxref("document") }} est encore en chargement.
+
interactive
+
Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis.
+
complete
+
Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.
+
+ +

Exemples

+ +

Différents états de chargement

+ +
switch (document.readyState) {
+  case "loading":
+    // Encore en chargement.
+    break;
+  case "interactive":
+    // Le DOM est construit, on peut y accéder.
+    var span = document.createElement("span");
+    span.textContent = "A <span> element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // La page est pleinement chargée.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}
+
+ +

readystatechange comme alternative à  DOMContentLoaded

+ +
// alternative à DOMContentLoaded
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}
+ +

readystatechange comme alternative à load

+ +
// alternative à load
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}
+ +

readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded

+ +
// Modification du document <body> dès que possible en utilisant un script externe
+var bootstrap = function(evt){
+  if (evt.target.readyState === "interactive") { initLoader(); }
+  else if (evt.target.readyState === "complete") { initApp(); }
+}
+document.addEventListener('readystatechange', bootstrap, false);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationsStatusCommentaires
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}}
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("api.Document.readyState")}}
+ +
+ +

[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5).

+ +

[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' peut être notifié trop tôt avant que le document soit entièrement analysé.

+ +

[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/referrer/index.html b/files/fr/web/api/document/referrer/index.html new file mode 100644 index 0000000000..d8699ada15 --- /dev/null +++ b/files/fr/web/api/document/referrer/index.html @@ -0,0 +1,23 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +tags: + - API + - HTML DOM + - Propriété + - Reference +translation_of: Web/API/Document/referrer +--- +
+ {{APIRef}}
+

Résumé

+

Renvoie l'URI de la page de provenance.

+

Syntaxe

+
string = document.referrer;
+
+

Notes

+

La valeur est une chaîne de caractères vide si l'utilisateur est arrivé directement sur la page (pas grâce à un lien, mais, par exemple, via un marque-page). Étant donné que cette propriété ne retourne qu'une chaîne, elle ne vous donne pas un accès DOM à la page de provenance.

+

Spécification

+ diff --git a/files/fr/web/api/document/registerelement/index.html b/files/fr/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..8f937a8180 --- /dev/null +++ b/files/fr/web/api/document/registerelement/index.html @@ -0,0 +1,115 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +tags: + - API + - Composants Web + - DOM + - Expérimental(2) + - Méthode + - Référence(2) +translation_of: Web/API/Document/registerElement +--- +

{{APIRef("DOM")}} {{Deprecated_header}}

+ +
+

Warning : document.registerElement() est déprécié en faveur de customElements.define().

+
+ +

{{draft}}

+ +

La méthode Document.registerElement() permet d'enregistrer un nouvel élément personnalisé dans le navigateur, et retourne un constructeur pour ce nouvel élément.

+ +
+

Note: Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir Activer les Composants Web dans Firefox.

+
+ +

Syntaxe

+ +
var constructeur = document.registerElement(nom-tag, options);
+ +

Paramètres

+ +
+
nom-tag
+
+
Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple mon-tag.
+
+
options {{optional_inline}}
+
Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre.
+
+ +

Exemple

+ +

Voici un exemple très simple :

+ +
var Montag = document.registerElement('mon-tag');
+
+ +

Le nouveau tag est désormais enregistré dans le navigateur. La variable Montag contient un constructeur que vous pouvez utiliser pour créer des éléments mon-tag dans le document de la façon suivante :

+ +
document.body.appendChild(new Montag());
+ +

Ceci insert un élément mon-tag vide qui sera visible si vous utilisez les outils de développement du navigateur. Il ne sera pas visible si vous utilisez la fonction de visualisation de la source du navigateur. Et il ne sera pas visible dans le navigateur tant que vous n'aurez pas ajouter du contenu au tag. Ce qui suit est un exemple d'ajout de contenu au nouveau tag :

+ +
var montag = document.getElementsByTagName("mon-tag")[0];
+montag.textContent = "Je suis un élément mon-tag.";
+
+ +

Compatibilité avec les navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support3531[1]{{CompatNo}}25{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4.431[1]{{CompatNo}}25{{CompatNo}}
+
+ +

[1] Cette API est implantée mais doit être activée dans les préférences.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/releasecapture/index.html b/files/fr/web/api/document/releasecapture/index.html new file mode 100644 index 0000000000..8c2a9d5bc5 --- /dev/null +++ b/files/fr/web/api/document/releasecapture/index.html @@ -0,0 +1,38 @@ +--- +title: Document.releaseCapture() +slug: Web/API/Document/releaseCapture +tags: + - API + - Capture + - DOM + - Document + - Méthodes + - Souris +translation_of: Web/API/Document/releaseCapture +--- +
{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}
+ +
 
+ +

Libère la capture de la souris si elle est actuellement activée (bouton gauche enfoncé) sur un élément de ce document. L'activation de la capture de la souris sur un élément se fait en appelant {{domxref("element.setCapture()")}}.

+ +

Syntaxe

+ +
document.releaseCapture()
+
+ +

Une fois la capture de la souris relâchée, les événements de souris ne seront plus dirigés vers l'élément sur lequel la capture est activée.

+ +

Exemple

+ +

Voir l'exemple pour {{domxref("element.setCapture()")}}.

+ +

Spécifications

+ +

Basé sur l'implémentation Internet Explorer.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/scripts/index.html b/files/fr/web/api/document/scripts/index.html new file mode 100644 index 0000000000..1e7fe75f40 --- /dev/null +++ b/files/fr/web/api/document/scripts/index.html @@ -0,0 +1,72 @@ +--- +title: Document.scripts +slug: Web/API/Document/scripts +translation_of: Web/API/Document/scripts +--- +
+ {{ApiRef}}
+

 

+

Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}.

+

Syntaxe

+
var scriptList = document.scripts;
+
+

La liste scriptList est un objet {{domxref("HTMLCollection")}} qu'on peut utiliser comme un tableau pour accéder aux éléments qu'elle contient.

+

Exemple

+

Cet exemple détecte la présence d'éléments {{HTMLElement("script")}} dans le document.

+
var scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+
+

Browser compatibility

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+

Specification

+ diff --git a/files/fr/web/api/document/scroll_event/index.html b/files/fr/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..8e1a13b3db --- /dev/null +++ b/files/fr/web/api/document/scroll_event/index.html @@ -0,0 +1,147 @@ +--- +title: scroll +slug: Web/API/Document/scroll_event +tags: + - API + - Event Handler + - Reference + - events + - requestAnimationFrame +translation_of: Web/API/Document/scroll_event +--- +

{{APIRef}}
+ L’évènement scroll (défilement) est émis lorsque l’on fait défiler le document ou un élément.

+ +

Informations générales

+ + + + + + + + + + + + + + + + + + + + + + + + +
BouillonnePas sur les éléments, mais bouillonne vers la defaultView si émis sur le document
AnnulableNon
Interface{{domxref("UIEvent")}}
CibleDefaultView, {{domxref("Document")}}, {{domxref("Element")}}
Action par défautAucune
+ +
+

Note : Sur iOS UIWebViews, les évènements scroll ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir Bootstrap issue #16202. Safari et WKWebViews ne sont pas affectés par ce bogue.

+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}La cible de l’évènement (la plus haute dans l’arbre DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Le type d’évènement.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Si l’évènement bouillonne ou non.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Si l’évènement est annulable ou non.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (objet window du document)
detail {{readonlyInline}}long (float)0.
+ +

Exemple

+ +

Temporisation des évènements scroll

+ +

Comme les évènements scroll peuvent être émis à une fréquence élevée, le gestionnaire d’évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l’évènement en utilisant {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("window.setTimeout()", "setTimeout()")}} ou un {{domxref("CustomEvent")}}, comme suit.

+ +

Notez, cependant, que les évènements d’interface utilisateur et les frames d’animation sont émises à peu près à la même fréquence, et ainsi l’optimisation qui suit est souvent superflue. Cet exemple optimise l’évènement scroll avec requestAnimationFrame.

+ +
// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+var derniere_position_de_scroll_connue = 0;
+var ticking = false;
+
+function faireQuelqueChose(position_scroll) {
+  // faire quelque chose avec la position du scroll
+}
+
+window.addEventListener('scroll', function(e) {
+  derniere_position_de_scroll_connue = window.scrollY;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      faireQuelqueChose(derniere_position_de_scroll_connue);
+      ticking = false;
+    });
+  }
+
+  ticking = true;
+});
+ +

Autres exemples

+ +

Pour plus d’exemples similaires, voir l’évènement resize.

+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('CSSOM View', '#scrolling-events')}}{{Spec2('CSSOM View')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.scroll_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/selectedstylesheetset/index.html b/files/fr/web/api/document/selectedstylesheetset/index.html new file mode 100644 index 0000000000..8c66beecb4 --- /dev/null +++ b/files/fr/web/api/document/selectedstylesheetset/index.html @@ -0,0 +1,51 @@ +--- +title: Document.selectedStyleSheetSet +slug: Web/API/Document/selectedStyleSheetSet +tags: + - API + - DOM + - Document + - Feuilles de styles + - Propriétés +translation_of: Web/API/Document/selectedStyleSheetSet +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}

+ +

Indique le nom du jeu de feuilles de styles actuellement utilisé.

+ +

Syntaxe

+ +
currentStyleSheetSet = document.selectedStyleSheetSet
+
+document.selectedStyleSheet = newStyleSheetSet
+
+ +

En retour, currentStyleSheetSet indique le nom du jeu de feuilles de styles en cours d'utilisation. Vous pouvez aussi définir celui-ci en utilisant cette propriété.

+ +

La définition de la valeur de cette propriété équivaut à appeler {{ domxref("document.enableStyleSheetsForSet()") }} avec la valeur de currentStyleSheetSet, puis de définir la valeur de lastStyleSheetSet sur cette valeur.

+ +
Note : Cette valeur d'attribut est directe : sa modification affectera la valeur de l'attribut.
+ +

Exemple

+ +
console.log("Current style sheet set: " + document.selectedStyleSheetSet);
+
+document.selectedStyleSheetSet = "Some other style sheet";
+
+ +
Note : Cet exemple vous aidera à comprendre la différence de comportement entre la définition de la valeur de selectedStyleSheetSet et l'appel de {{ domxref("document.enableStyleSheetsForSet()") }}.
+ +

Voir aussi

+ + + +

Spécifications

+ + diff --git a/files/fr/web/api/document/stylesheets/index.html b/files/fr/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..71a48a5f68 --- /dev/null +++ b/files/fr/web/api/document/stylesheets/index.html @@ -0,0 +1,55 @@ +--- +title: Document.styleSheets +slug: Web/API/Document/styleSheets +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +
{{APIRef}}
+ +
La propriété Document.styleSheets est en lecture seule et retourne une liste {{domxref("StyleSheetList")}} d'objets {{domxref("StyleSheet")}}, qui font référence à l'ensemble des feuilles de style contenues ou embarquées dans le document.
+ +
 
+ +

Syntaxe

+ +
var styleSheetList = document.styleSheets;
+
+ +

L'objet retourné est une liste {{domxref("StyleSheetList")}}.

+ +

Il s'agit d'une collection ordonnée d'objets {{domxref("StyleSheet")}}. styleSheetList.item(index) ou  styleSheetList{{ mediawiki.External('index') }} retourne un seul objet stylesheet par son index (index débute par 0).

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}}{{Spec2('CSSOM')}} 
{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}}{{Spec2('DOM2 Style')}} 
+ +

Voir aussi

+ + + + diff --git a/files/fr/web/api/document/stylesheetsets/index.html b/files/fr/web/api/document/stylesheetsets/index.html new file mode 100644 index 0000000000..14adac7a18 --- /dev/null +++ b/files/fr/web/api/document/stylesheetsets/index.html @@ -0,0 +1,58 @@ +--- +title: Document.styleSheetSets +slug: Web/API/Document/styleSheetSets +tags: + - API + - DOM + - Document + - Feuilles de styles + - Propriétés +translation_of: Web/API/Document/styleSheetSets +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}
+ +

Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.

+ +

Syntaxe

+ +
sets = document.styleSheetSets
+
+ +

En retour, sets est une liste de jeux de feuilles de styles disponibles.

+ +

Exemple

+ +

Étant donné un élément {{HTMLElement("ul")}} (liste) avec l'ID "sheetList", vous pouvez le remplir avec tous les noms de tous les jeux de feuilles de styles disponibles avec un code comme celui-ci :

+ +
var list = document.getElementById("sheetList");
+var sheets = document.styleSheetSets;
+
+list.innerHTML = "";
+
+for (var i = 0; i < sheets.length; i++) {
+  var item = document.createElement("li");
+
+  item.innerHTML = sheets[i];
+  list.appendChild(item);
+}
+ +

Notes

+ +

La liste des jeux de feuilles de styles disponibles est construite par énumération de toutes les feuilles de styles disponibles pour le document, dans l'ordre dans lequel elles sont répertoriées dans l'attribut {{domxref("document.styleSheets")}}, en ajoutant le title (titre) de chacune de celles en ayant un. Les doublons sont supprimés de la liste (en utilisant une comparaison sensible à la casse).

+ +

Spécifications

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/title/index.html b/files/fr/web/api/document/title/index.html new file mode 100644 index 0000000000..98cb79bb34 --- /dev/null +++ b/files/fr/web/api/document/title/index.html @@ -0,0 +1,54 @@ +--- +title: Document.title +slug: Web/API/Document/title +translation_of: Web/API/Document/title +--- +
{{APIRef("DOM")}}
+ +

Obtient ou défini le titre de la page.

+ +

Syntaxe

+ +
var docTitle = document.title;
+
+ +

title est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par document.title, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous).

+ +
document.title = newTitle;
+
+ +

newTitle sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de document.title, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML <title>).

+ +

Exemple

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>Hello World!</title>
+</head>
+<body>
+
+<script>
+alert(document.title); // Affiche "Hello World!"
+document.title = "Goodbye World!";
+alert(document.title); // Affiche "Goodbye World!"
+</script>
+
+</body>
+</html>
+
+ +

Notes

+ +

Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko.

+ +

Pour les documents HTML, la valeur initiale de document.title est le texte de la balise <title>. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL.

+ +

En XUL, accéder à document.title avant que le document soit complètement chargé a des conséquences variables (document.title peut retourner une chaîne vide et définir document.title peut n'avoir aucun effet).

+ +

Spécification

+ + diff --git a/files/fr/web/api/document/tooltipnode/index.html b/files/fr/web/api/document/tooltipnode/index.html new file mode 100644 index 0000000000..681797c298 --- /dev/null +++ b/files/fr/web/api/document/tooltipnode/index.html @@ -0,0 +1,25 @@ +--- +title: Document.tooltipNode +slug: Web/API/Document/tooltipNode +tags: + - API + - DOM + - Document + - Propriétés + - XUL +translation_of: Web/API/Document/tooltipNode +--- +

{{ ApiRef("DOM") }}

+ +

{{draft}}

+ +

Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}.

+ +

Syntaxe

+ +
document.tooltipNode;
+
+ +

Spécification

+ +

XUL-specific method. Not part of any specification. Defined in {{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}.

diff --git a/files/fr/web/api/document/touchend_event/index.html b/files/fr/web/api/document/touchend_event/index.html new file mode 100644 index 0000000000..f7067637ab --- /dev/null +++ b/files/fr/web/api/document/touchend_event/index.html @@ -0,0 +1,186 @@ +--- +title: touchend +slug: Web/API/Document/touchend_event +tags: + - Tactile + - TouchEvent + - events +translation_of: Web/API/Document/touchend_event +--- +
{{APIRef}}
+ +

L'événement touchend est déclenché quand un point de contact est retiré de la surface.

+ +

Informations générales

+ +
+
Spécification
+
Touch Events
+
Interface
+
{{domxref("TouchEvent")}}
+
Bubbles
+
Oui
+
Cancelable
+
Oui
+
Target
+
Document, Element
+
Default Action
+
indéfinie
+
+ +

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.
touches {{readonlyInline}}TouchListA list of Touches for every point of contact currently touching the surface.
targetTouches {{readonlyInline}}TouchListA list of Touches for every point of contact that is touching the surface and started on the element that is the target of the current event.
changedTouches {{readonlyInline}}TouchListA list of Touches for every point of contact which contributed to the event.
+ For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemples

+ +

Des exemples d'implémentation de cet événement sont disponibles : Touch events.

+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome("22.0")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("52.0")}}[2]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("6.0")}}{{CompatVersionUnknown}}11{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Les Touch events ont été implémentés dans Gecko 18.0, mais ont été supprimés dans la version 24.0 {{geckoRelease("24.0")}} dans la version bureau en raison de problèmes d'incompatibilités ({{bug(888304)}}).

+ +

[2] Depuis 52.0, le support des Touch events a été réparé et réactivé dans les versions bureau de Windows.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/transitionend_event/index.html b/files/fr/web/api/document/transitionend_event/index.html new file mode 100644 index 0000000000..ab96cecb4e --- /dev/null +++ b/files/fr/web/api/document/transitionend_event/index.html @@ -0,0 +1,85 @@ +--- +title: 'Document: évènement transitionend' +slug: Web/API/Document/transitionend_event +translation_of: Web/API/Document/transitionend_event +--- +
{{APIRef}}
+ +

L’évènement transitionend est émis quand une transition CSS a terminé. Dans le cas où une transition est supprimée avant d’avoir terminé, comme lorsqu’une {{cssxref("transition-property")}} est supprimée ou lorsque {{cssxref("display")}} reçoit la valeur none, l’évènement n’est pas généré.

+ + + + + + + + + + + + + + + + + + + + +
BouillonneOui
Est annulableOui
Interface{{domxref("TransitionEvent")}}
Propriété gestionnaire d’évènementontransitionend
+ +

L’évènement transitionend est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement transitioncancel est émis, l’évènement transitionend ne se produira pas.

+ +

La cible originale pour cet évènement est l’Element sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface Window pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page HTMLElement: transitionend.

+ +

Exemples

+ +

Le code suivant ajoute un gestionnaire sur l’évènement transitionend :

+ +
document.addEventListener('transitionend', () => {
+  console.log('Transition terminée');
+});
+ +

La même chose, mais en utilisant la propriété ontransitionend au lieu de addEventListener() :

+ +
document.ontransitionend = () => {
+  console.log('Transition terminée');
+};
+ +

Voir un exemple en direct sur cet évènement.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.transitionend_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/url/index.html b/files/fr/web/api/document/url/index.html new file mode 100644 index 0000000000..32b79c706d --- /dev/null +++ b/files/fr/web/api/document/url/index.html @@ -0,0 +1,24 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +
{{APIRef("DOM")}}
+ +

Retourne l'URL du {{domxref("Document")}} sous forme de string (lecture seule).

+ +

Syntaxe

+ +
var string = document.URL
+
+ +

Exemple

+ +
var currentURL = document.URL;
+alert(currentURL);
+ +

Specification

+ + diff --git a/files/fr/web/api/document/visibilitystate/index.html b/files/fr/web/api/document/visibilitystate/index.html new file mode 100644 index 0000000000..4f8c7ec071 --- /dev/null +++ b/files/fr/web/api/document/visibilitystate/index.html @@ -0,0 +1,123 @@ +--- +title: Document.visibilityState +slug: Web/API/Document/visibilityState +tags: + - API + - DOM + - Document + - Propriétés + - Visibilité +translation_of: Web/API/Document/visibilityState +--- +

{{ ApiRef("DOM") }}

+ +

La propriété en lecture seule Document.visibilityState renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont :

+ + + +

Lorsque la valeur de cette propriété change, l'évènement {{event('visibilitychange')}} est envoyé au {{domxref("Document")}}.

+ +

L'utilisation typique de ceci peut être d'empêcher le téléchargement de certains éléments actifs lorsque le document est uniquement prérendu, ou d'arrêter certaines activités lorsque le document est en arrière-plan ou réduit au minimum.

+ +

Syntaxe

+ +
var string = document.visibilityState
+ +

Exemples

+ +
document.addEventListener("visibilitychange", function() {
+  console.log( document.visibilityState );
+  // Modifier le comportement...
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}{{Spec2('Page Visibility API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13 {{property_prefix("webkit")}}
+ 33		{{CompatGeckoDesktop(18)}} [2]1012.10[1]7
prerender{{CompatVersionUnknown}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4 {{property_prefix("webkit")}}{{CompatGeckoMobile(18)}} [2]{{CompatUnknown}}12.10[1]7
prerender{{CompatVersionUnknown}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Ne lance pas l'évènement {{event('visibilitychange')}} lorsque la fenêtre du navigateur est réduite, ni si hidden est défini à true.

+ +

[2] De Firefox 10 à Firefox 51 inclus, cette propriété peut être utilisée avec le préfixe -moz-.

diff --git a/files/fr/web/api/document/width/index.html b/files/fr/web/api/document/width/index.html new file mode 100644 index 0000000000..94c91d793d --- /dev/null +++ b/files/fr/web/api/document/width/index.html @@ -0,0 +1,45 @@ +--- +title: Document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +
+

Remarque: À partir de {{Gecko("6.0")}}, document.width n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}.

+
+ +

Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels.

+ +

Non pris en charge par Internet Explorer.

+ +

Syntaxe

+ +
pixels = document.width;
+
+ +

Exemple

+ +
function init() {
+    alert("La largeur du document est " + document.width + " pixels.");
+}
+
+ +

Alternatives

+ +
document.body.clientWidth              /* largeur de <body> */
+document.documentElement.clientWidth   /* largeur de <html> */
+window.innerWidth                      /* largeur de la fenêtre */
+
+ +

Spécification

+ +

HTML5

+ +

Voir également

+ + diff --git a/files/fr/web/api/document/write/index.html b/files/fr/web/api/document/write/index.html new file mode 100644 index 0000000000..e0aec07be3 --- /dev/null +++ b/files/fr/web/api/document/write/index.html @@ -0,0 +1,96 @@ +--- +title: document.write +slug: Web/API/Document/write +tags: + - API + - DOM + - Document + - Méthodes + - Rérérence +translation_of: Web/API/Document/write +--- +

{{ ApiRef("DOM") }}

+ +

Écrit une chaîne de texte dans un document ouvert par document.open().

+ +
+

Note : comme document.write écrit dans le flux de documents, appeler document.write sur un document fermé (chargé) appelle automatiquement document.open, ce qui efface le document.

+
+ +

Syntaxe

+ +
document.write(balisage);
+
+ +

Paramètres

+ +
+
markup
+
est une chaîne de caractères contenant le texte à écrire dans le document.
+
+ +

Exemple

+ +
<html>
+
+<head>
+<title>Exemple de document.write</title>
+
+<script type="text/javascript">
+
+function nouveauContenu()
+{
+alert("chargement du nouveau contenu");
+document.open();
+document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>");
+document.close();
+}
+
+</script>
+</head>
+
+<body onload="nouveauContenu();">
+<p>Ceci est le contenu original du document.</p>
+</body>
+</html>
+
+ +

Notes

+ +

Écrire dans un document qui a déjà été chargé sans appeler document.open() provoquera un appel automatique à document.open. Une fois l'écriture terminée, il est recommandé d'appeler document.close() pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément h1 devient un nœud dans le document.

+ +

Si l'appel à document.write() est intégré directement dans le code HTML, il n'appellera pas document.open(). Par exemple :

+ +
<script>
+  document.write("<h1>Main title</h1>")
+</script>
+ +
+

Note : document.write et document.writeln ne fonctionnent pas dans les documents XHTML (vous obtiendrez une erreur  "Operation is not supported" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier  .xhtm ou pour tout document servi avec une  application/xhtml+xml de type MIME. Plus d'informations disponibles dans la   foire aux questions W3C XHTML (en).

+
+ +
+

Note : document.write dans les scripts deferred (différé) ou asynchronous (asynchrone) sera ignoré et vous recevrez un message comme  "A call to document.write() from an asynchronously-loaded external script was ignored" dans la console d'erreurs.

+
+ +
+

Note : Dans Edge seulement, appeler plusieurs fois document.write dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." (autorisation refusée).

+
+ +
+

Note : À partir de la version 55, Chrome n'exécute pas les éléments <script> injectés via document.write() en cas d'échec de cache HTTP pour les utilisateurs sur une connexion 2G.

+
+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/writeln/index.html b/files/fr/web/api/document/writeln/index.html new file mode 100644 index 0000000000..046c069cbc --- /dev/null +++ b/files/fr/web/api/document/writeln/index.html @@ -0,0 +1,58 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/writeln +--- +

{{ ApiRef("DOM") }}

+ +

Écrit une chaine de caractères suivie d'un retour de ligne.

+ +

Syntaxe

+ +
document.writeln(ligne);
+
+ +

Paramètres

+ + + +

Exemple

+ +
document.writeln("<p>Entrez votre mot de passe :</p>");
+
+ +

Notes

+ +

document.writeln est identique à {{domxref("document.write")}}, mais ajoute une nouvelle ligne.

+ +
Note : document.writeln (comme document.write) n'a aucun effet en XHTML documents (vous obtiendrez une erreur "Operation is not supported" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) dans la console). Ceci est le cas si un fichier est ouvert en local avec l'extension .xhtml ou pour tous documents utilisant le type MIME application/xhtml+xml. Pour plus d'informations, visitez W3C XHTML FAQ.
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}{{Spec2("DOM2 HTML")}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.writeln")}}

diff --git a/files/fr/web/api/document/xmlencoding/index.html b/files/fr/web/api/document/xmlencoding/index.html new file mode 100644 index 0000000000..e3b98135f1 --- /dev/null +++ b/files/fr/web/api/document/xmlencoding/index.html @@ -0,0 +1,35 @@ +--- +title: Document.xmlEncoding +slug: Web/API/Document/xmlEncoding +tags: + - API + - DOM + - Document + - Encodage + - Propriétés + - XML +translation_of: Web/API/Document/xmlEncoding +--- +

{{APIRef("DOM")}}{{ obsolete_header("10.0") }}

+ +

Renvoie le codage déterminé par la déclaration XML. Devrait être null si non précisé ou inconnu.

+ +
Warning : N'utilisez pas cet attribut ; il a été supprimé de la spécification DOM Niveau 4 et n'est plus pris en charge dans Gecko 10.0 {{ geckoRelease("10.0") }}.
+ +

Si la déclaration XML indique :

+ +
<?xml version="1.0" encoding="UTF-16"?>
+
+ +

... le résultat doit être "UTF-16".

+ +

Cependant, Firefox 3.0 inclut des informations sur l'"endianness" (par exemple, UTF-16BE pour le codage "big endian") et, tandis que cette information supplémentaire est supprimée à partir de Firefox 3.1b3, Firefox 3.1b3 consulte toujours l'encodage du fichier plutôt que la déclaration XML, comme la spécification le prévoit ("Un attribut spécifiant, dans le cadre de la déclaration XML, l'encodage de ce document.").

+ +

 

+ +

Spécification

+ + diff --git a/files/fr/web/api/document/xmlversion/index.html b/files/fr/web/api/document/xmlversion/index.html new file mode 100644 index 0000000000..ce2a197b51 --- /dev/null +++ b/files/fr/web/api/document/xmlversion/index.html @@ -0,0 +1,29 @@ +--- +title: Document.xmlVersion +slug: Web/API/Document/xmlVersion +tags: + - API + - DOM + - Document + - Propriétés + - XML + - version +translation_of: Web/API/Document/xmlVersion +--- +

{{APIRef("DOM")}}{{ obsolete_header("10.0") }}

+ +

Renvoie le numéro de version comme spécifié dans la déclaration XML (par exemple, <?xml version="1.0"?>) ou "1.0" si la déclaration est absente.

+ +

Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) :

+ +
if (document.createElement("foo").tagName == "FOO") {
+  /* le document n'est pas XML */
+}
+
+ +

Spécifications

+ + -- cgit v1.2.3-54-g00ecf