Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'API Fetch.
+
Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'API Fetch.
Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}.
-
Lorsque la requête fetch (extraction) est lancée, nous transmettons le paramètre AbortSignal en tant qu'option dans l'objet d'options de la requête (voir {signal} ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements.
+
Lorsque la requête fetch (extraction) est lancée, nous transmettons le paramètre AbortSignal en tant qu'option dans l'objet d'options de la requête (voir {signal} ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements.
-
var controller = new AbortController();
+
var controller = new AbortController();
var signal = controller.signal;
var downloadBtn = document.querySelector('.download');
@@ -64,7 +64,7 @@ function fetchVideo() {
}
-
Note : Lorsque abort() est appelé, la réponse fetch() rejette avec une erreur AbortError.
+
Note : Lorsque abort() est appelé, la réponse fetch() rejette avec une erreur AbortError.
La propriété fftSize de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT (transfomation de Fourier rapide) à utiliser pour déterminer le domaine fréquentiel.
+
La propriété fftSize de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT (transfomation de Fourier rapide) à utiliser pour déterminer le domaine fréquentiel.
La valeur de la propriété fftSize property's doit être une puissance de 2 non nulle située dans l'intervalle compris entre 32 et 32768 ; sa valeur par défaut est 2048.
-
Note: si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception INDEX_SIZE_ERR est levée.
+
Note : Si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception INDEX_SIZE_ERR est levée.
- La propriété frequencyBinCount de l'objet AnalyserNode est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation.
+ La propriété frequencyBinCount de l'objet AnalyserNode est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation.
Syntaxe
@@ -20,7 +20,7 @@ var tailleMemoireTampon = analyseur.frequencyBinCount;
- La méthode getByteFrequencyData() de l'objet AnalyserNode copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.
+ La méthode getByteFrequencyData() de l'objet AnalyserNode copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.
Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés.
var contexteAudio =newAudioContext();
-var analyseur = contexteAudio.createAnalyser();
+
var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
-
// La taille du tableau Uint8Array doit correspondre à la valeur de la propriété fftSize
-var tableauDonnees = new Uint8Array(analyseur.fftSize);
+// La taille du tableau Uint8Array doit correspondre à la valeur de la propriété fftSize
+var tableauDonnees = new Uint8Array(analyseur.fftSize);
// remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
analyseur.getByteTimeDomainData(tableauDonnees);
L'exemple suivant montre comment créer simplement un AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic (et en particulier app.js lignes 128–205).
-
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
+
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
...
diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.html b/files/fr/web/api/analysernode/getfloatfrequencydata/index.html
index 86cbae8c06..fb4e6e2785 100644
--- a/files/fr/web/api/analysernode/getfloatfrequencydata/index.html
+++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.html
@@ -27,7 +27,7 @@ analyseur.getByteTimeDomainData(tableauDonnees);
array
-
{{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est -Infinity.
+
{{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est -Infinity.
L'exemple suivant montre comment créer simplement un AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic (et en particulier app.js lines 128–205).
-
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
var analyseur = contexteAudio.createAnalyser();
...
@@ -110,8 +110,7 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon);
analyseur.getByteTimeDomainData(tableauDonnees);
// dessine un oscilloscope de la source audio
-
-var canvas = document.getElementById("oscilloscope");
+var canvas = document.getElementById("oscilloscope");
var contexteCanvas = canvas.getContext("2d");
function dessiner() {
@@ -149,7 +148,7 @@ function dessiner() {
contexteCanvas.stroke();
};
- dessiner();
La propriété smoothingTimeConstant de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente unemoyenneentre le buffer courant et le buffer précédent - elle sert à lisser la transition entre les valeurs.
+
La propriété smoothingTimeConstant de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente une moyenne entre le buffer courant et le buffer précédent - elle sert à lisser la transition entre les valeurs.
La valeur est 0.8 par défaut; elle doit être comprise entre 0 et 1. Lorsqu'elle vaut 0, aucune moyenne n'est effectuée, tandis que la valeur 1 signifie que le chevauchement entre le buffer en cours et le buffer précédent est conséquent lors du calcul des valeurs, ce qui a pour effet d'adoucir le changement lors des appels {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}}.
En termes techniques, on applique une fenêtre de Blackman pour lisser les valeurs dans le temps. La valeur par défaut convient à la plupart des cas.
-
Note: Si la valeur n'est pas comprise entre 0 et 1, une exception INDEX_SIZE_ERR est levée.
+
Note : Si la valeur n'est pas comprise entre 0 et 1, une exception INDEX_SIZE_ERR est levée.
L'interface Animation de l'API Web Animations correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation.
+
L'interface Animation de l'API Web Animations correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation.
Un {{domxref("DOMString")}} représentant le nom du type de AnimationEvent. Il est sensible à la casse (majuscule-minuscule) et peut être: 'animationstart', 'animationend', or 'animationiteration'.
animationName {{optional_inline}}
-
Un {{domxref("DOMString")}} contenant la valeur de la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut "".
+
Un {{domxref("DOMString")}} contenant la valeur de la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut "".
elapsedTime {{optional_inline}}
Un float donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évenenement est déclenché, excluant le temps de pause des animations. Pour un évènement "animationstart" , elapsedTime est de 0.0 jusqu'a ce qu'il y ai une valeur négative pour une valeur {{cssxref("animation-delay")}}, dans le case où l'évenement est déclenché par elapsedTime contenant (-1 * délais). SA valeur par défaut vaut 0.0.
pseudoElement {{optional_inline}}
-
Is a {{domxref("DOMString")}}, starting with "::", containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: "". It defaults to "".
+
Is a {{domxref("DOMString")}}, starting with "::", containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: "". It defaults to "".
La propriété en lecture seule AnimationEvent.pseudoElement est une {{domxref("DOMString")}}, commençant par '::', contenant le nom du pseudo-élément sur lequel tourne l'animation. Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : ''.
+
La propriété en lecture seule AnimationEvent.pseudoElement est une {{domxref("DOMString")}}, commençant par '::', contenant le nom du pseudo-élément sur lequel tourne l'animation. Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : ''.
Note : DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés.
- Comme cela n'est pas vrai quand les objetsAttr sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété.
+
Note : DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés.
+ Comme cela n'est pas vrai quand les objets Attr sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété.
-
Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}.
+
Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}.
Cette propriété renvoie toujours la valeur true.À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et false si sa valeur provenait de la valeur par défaut définie dans la DTD du document.
+
Cette propriété renvoie toujours la valeur true. À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et false si sa valeur provenait de la valeur par défaut définie dans la DTD du document.
{{domxref("Attr.value", "Value")}}
La valeur de l'attribut.
@@ -50,7 +50,7 @@ translation_of: Web/API/Attr
Cette modification est implémentée dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.
-
Propriétés et méthodesdépréciées
+
Propriétés et méthodes dépréciées
Les propriétés suivantes ont été dépréciées. Si elle est disponible, la méthode ou propriété de remplacement appropriée est fournie.
@@ -62,7 +62,7 @@ translation_of: Web/API/Attr
firstChild {{obsolete_inline(14)}}
Cette propriété retourne désormais toujours NULL.
isId {{readOnlyInline}}
-
Indique si l'attribut est un "attribut ID".Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM.En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres.Qu'un attribut soit unique ou non est souvent déterminé par un {{Glossary("DTD")}} ou une autre description de schéma.
+
Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par un {{Glossary("DTD")}} ou une autre description de schéma.
Les informations de type associées à cet attribut.Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de {{domxref("Document.normalizeDocument")}}, cette propriété peut ne pas être fiable si le nœud a été déplacé.
+
Les informations de type associées à cet attribut. Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de {{domxref("Document.normalizeDocument")}}, cette propriété peut ne pas être fiable si le nœud a été déplacé.
Ce n'est pas une valeur calculée, mais le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un attribut est figé à l'heure de création de l'attribut.
-
Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est null. Dans les versions ultérieures, en conformité avec HTML5, il est https://www.w3.org/1999/xhtml comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}
+
Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est null. Dans les versions ultérieures, en conformité avec HTML5, il est https://www.w3.org/1999/xhtml comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}
Vous pouvez créer un attribut avec le namespaceURI spécifié en utilisant la méthode de DOM niveau 2 {{domxref("Element.setAttributeNS")}}.
-
Selon la spécification Namespaces en XML, un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms.
+
Selon la spécification Namespaces en XML, un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms.
Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.
Le constructeur AudioBuffer créer un nouvel objet {{domxref("AudioBuffer")}}.
+
Le constructeur AudioBuffer créer un nouvel objet {{domxref("AudioBuffer")}}.
Syntax
@@ -16,13 +16,13 @@ var audioBuffer = new AudioBuffer(context[, options]);
context {{obsolete_inline("")}}
-
Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails.
+
Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails.
options {{optional_inline}}
Les options sont les suivantes:
-
length: Longueur de l'échantillonnage du tampon.
+
length: Longueur de l'échantillonnage du tampon.
numberOfChannels: Nombre de cannaux du buffer. La valeur par défaut est 1.
-
sampleRate: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du context utilisé dans la construction de cet objet
+
sampleRate: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du context utilisé dans la construction de cet objet
La méthode copyToChannel() de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'AudioBuffer spécifié.
-
+
La méthode copyToChannel() de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'AudioBuffer spécifié.
var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
tableauTampon.duration;
Valeur
@@ -20,7 +20,7 @@ tableauTampon.duration;
Exemple
-
// Stereo
+
// Stereo
var nombreCanaux = 2;
// Crée une mémoire tampon vide de 2 secondes
diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.html b/files/fr/web/api/audiobuffer/getchanneldata/index.html
index bab087dc68..7f64f907a0 100644
--- a/files/fr/web/api/audiobuffer/getchanneldata/index.html
+++ b/files/fr/web/api/audiobuffer/getchanneldata/index.html
@@ -5,15 +5,11 @@ translation_of: Web/API/AudioBuffer/getChannelData
---
{{ APIRef("Web Audio API") }}
-
-
-
La méthode getChannelData() de l'interface {{ domxref("AudioBuffer") }} renvoie un {{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal).
-
-
+
La méthode getChannelData() de l'interface {{ domxref("AudioBuffer") }} renvoie un {{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal).
Syntaxe
-
var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
var tampon = tableauDonnees.getChannelData(canal);
Valeur
@@ -24,7 +20,7 @@ var tampon = tableauDonnees.getChannelData(canal);
Dans l'exemple suivant crée un buffer de 2 secondes, le remplit avec du bruit blanc puis le lit via un {{ domxref("AudioBufferSourceNode") }}. Vous pouvez aussi exécuter le code, or voir le code source.
-
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
var bouton = document.querySelector('button');
var preformate = document.querySelector('pre');
var monScript = document.querySelector('script');
diff --git a/files/fr/web/api/audiobuffer/index.html b/files/fr/web/api/audiobuffer/index.html
index effd8fd44c..faa4f0f309 100644
--- a/files/fr/web/api/audiobuffer/index.html
+++ b/files/fr/web/api/audiobuffer/index.html
@@ -40,51 +40,51 @@ translation_of: Web/API/AudioBuffer
{{domxref("AudioBuffer.getChannelData()")}}
Retourne un {{domxref ("Float32Array")}} contenant les données PCM associés au canal, défini par l'index du canal (0 représentant le premier canal).
{{domxref("AudioBuffer.copyFromChannel()")}}
-
Copie les échantillons du canal associé à AudioBuffer dans un tableau de destination.
+
Copie les échantillons du canal associé à AudioBuffer dans un tableau de destination.
{{domxref("AudioBuffer.copyToChannel()")}}
-
Copie les échantillons dans le canal associé à AudioBuffer, depuis le tableau source.
+
Copie les échantillons dans le canal associé à AudioBuffer, depuis le tableau source.
Exemple
L'exemple suivant montre comment créer un AudioBuffer et le remplir avec du bruit blanc. Le code source est disponible sur notre repo audio-buffer demo; une version live est également consultable.
-
// Stéréo
-var nombreCanaux =2;
+
// Stéréo
+var nombreCanaux = 2;
-// Crée une mémoire tampon vide de 2 secondes
-// à la fréquence d'échantillonage du contexte AudioContext
-var nombreFrames = contexteAudio.sampleRate *2.0;
-var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-bouton.onclick =function(){
- // remplit la mémoire tampon avec du bruit blanc
- // valeurs aléatoires entre -1.0 et 1.0
- for(var canal =0; canal < nombreCanaux; canal++){
- // génère le tableau contenant les données
- var tampon = tableauDonnees.getChannelData(canal);
- for(var i =0; i < nombreFrames; i++){
- // Math.random() donne une valeur comprise entre [0; 1.0]
- // l'audio doit être compris entre [-1.0; 1.0]
- tampon[i]= Math.random()*2-1;
- }
- }
+bouton.onclick = function() {
+ // remplit la mémoire tampon avec du bruit blanc
+ // valeurs aléatoires entre -1.0 et 1.0
+ for (var canal = 0; canal < nombreCanaux; canal++) {
+ // génère le tableau contenant les données
+ var tampon = tableauDonnees.getChannelData(canal);
+ for (var i = 0; i < nombreFrames; i++) {
+ // Math.random() donne une valeur comprise entre [0; 1.0]
+ // l'audio doit être compris entre [-1.0; 1.0]
+ tampon[i] = Math.random() * 2 - 1;
+ }
+ }
- // Récupère un AudioBufferSourceNode.
- // C'est un AudioNode à utiliser quand on veut jouer AudioBuffer
- var source = contexteAudio.createBufferSource();
+ // Récupère un AudioBufferSourceNode.
+ // C'est un AudioNode à utiliser quand on veut jouer AudioBuffer
+ var source = contexteAudio.createBufferSource();
- // assigne le buffer au AudioBufferSourceNode
- source.buffer = tableauDonnees;
+ // assigne le buffer au AudioBufferSourceNode
+ source.buffer = tableauDonnees;
- // connecte le AudioBufferSourceNode avec
- // la destination pour qu'on puisse entendre le son
- source.connect(contexteAudio.destination);
+ // connecte le AudioBufferSourceNode avec
+ // la destination pour qu'on puisse entendre le son
+ source.connect(contexteAudio.destination);
- // lance la lecture du so
- source.start();
+ // lance la lecture du so
+ source.start();
-}
// Stereo
var nombreCanaux = 2;
// Crée une mémoire tampon vide de 2 secondes
diff --git a/files/fr/web/api/audiobuffersourcenode/buffer/index.html b/files/fr/web/api/audiobuffersourcenode/buffer/index.html
index 08181c687c..377e917158 100644
--- a/files/fr/web/api/audiobuffersourcenode/buffer/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/buffer/index.html
@@ -5,9 +5,7 @@ translation_of: Web/API/AudioBufferSourceNode/buffer
---
{{ APIRef("Web Audio API") }}
-
La propriété buffer de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio.
-
Si la propriété buffer a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0).
var audioCtx = new AudioContext();
var nbChan = 2;
var nbFrames = audioCtx.sampleRate * 2.0;
diff --git a/files/fr/web/api/audiobuffersourcenode/index.html b/files/fr/web/api/audiobuffersourcenode/index.html
index b689f99b77..ce90a90902 100644
--- a/files/fr/web/api/audiobuffersourcenode/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/index.html
@@ -11,20 +11,18 @@ translation_of: Web/API/AudioBufferSourceNode
---
{{APIRef("Web Audio API")}}
-
L'interface AudioBufferSourceNode est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}.
+
L'interface AudioBufferSourceNode est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}.
{{InheritanceDiagram}}
-
Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété {{domxref("AudioBufferSourceNode.buffer", "buffer")}}. Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0).
+
Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété {{domxref("AudioBufferSourceNode.buffer", "buffer")}}. Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0).
- Un {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction AudioBufferSourceNode.start() est autorisé. Pour rejouer le son, il faut créer un nouvel AudioBufferSourceNode. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables AudioBuffers peuvent être réutilisés. On dit que les AudioBufferSourceNodes doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée.
+ Un {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction AudioBufferSourceNode.start() est autorisé. Pour rejouer le son, il faut créer un nouvel AudioBufferSourceNode. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables AudioBuffers peuvent être réutilisés. On dit que les AudioBufferSourceNodes doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée.
Plusieurs appels à la fonction AudioBufferSourceNode.stop() sont autorisés. Le dernier appel remplace le précédent, à condition que le AudioBufferSourceNode n'ait pas déjà atteint la fin du buffer.
{{domxref ("AudioParam")}} de type a-rate qui définit le facteur de vitesse à laquelle la ressource audio sera jouée. Comme aucune correction de pitch n'est appliquée sur la sortie, il peut être utilisé pour modifier le pitch de l'échantillon.
-
Gestionnaires d'évènement
+
Gestionnaires d'évènement
Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}.
var contexteAudio =new(window.AudioContext || window.webkitAudioContext)();
-var bouton = document.querySelector('button');
-var pre = document.querySelector('pre');
-var monScript = document.querySelector('script');
-
-pre.innerHTML = monScript.innerHTML;
-
-// Stéréo
-var canaux =2;
-
-// Crée un tampon vide de deux secondes
-// au taux d'échantillonnage du AudioContext
-var compteurTrames = contexteAudio.sampleRate *2.0;
-
-var myArrayBuffer = contexteAudio.createBuffer(2, compteurTrames, contexteAudio.sampleRate);
-
-bouton.onclick =function(){
- // remplit le tampon avec du bruit blanc;
- // valeurs aléatoires entre -1.0 et 1.0
- for(var canal =0; canal < canaux; canal++){
- // crée le ArrayBuffer qui contient les données
- var nowBuffering = myArrayBuffer.getChannelData(canal);
- for(var i =0; i < compteurTrames; i++){
- // Math.random() est compris entre [0; 1.0]
- // audio doit être compris entre [-1.0; 1.0]
- nowBuffering[i]= Math.random()*2-1;
- }
- }
-
- // crée AudioBufferSourceNode.
- // c'est AudioNode utilisé pour lire un AudioBuffer
- var source = contexteAudio.createBufferSource();
- // initialise le tampon du AudioBufferSourceNode
- source.buffer = myArrayBuffer;
- // connecte l'AudioBufferSourceNode avec la destination
- // de façon à ce qu'on puisse entendre le son
- source.connect(contexteAudio.destination);
- // lance la lecture de la source
- source.start();
-}
+
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var bouton = document.querySelector('button');
+var pre = document.querySelector('pre');
+var monScript = document.querySelector('script');
+
+pre.innerHTML = monScript.innerHTML;
+
+// Stéréo
+var canaux = 2;
+
+// Crée un tampon vide de deux secondes
+// au taux d'échantillonnage du AudioContext
+var compteurTrames = contexteAudio.sampleRate * 2.0;
+
+var myArrayBuffer = contexteAudio.createBuffer(2, compteurTrames, contexteAudio.sampleRate);
+
+bouton.onclick = function() {
+ // remplit le tampon avec du bruit blanc;
+ // valeurs aléatoires entre -1.0 et 1.0
+ for (var canal = 0; canal < canaux; canal++) {
+ // crée le ArrayBuffer qui contient les données
+ var nowBuffering = myArrayBuffer.getChannelData(canal);
+ for (var i = 0; i < compteurTrames; i++) {
+ // Math.random() est compris entre [0; 1.0]
+ // audio doit être compris entre [-1.0; 1.0]
+ nowBuffering[i] = Math.random() * 2 - 1;
+ }
+ }
+
+ // crée AudioBufferSourceNode.
+ // c'est AudioNode utilisé pour lire un AudioBuffer
+ var source = contexteAudio.createBufferSource();
+ // initialise le tampon du AudioBufferSourceNode
+ source.buffer = myArrayBuffer;
+ // connecte l'AudioBufferSourceNode avec la destination
+ // de façon à ce qu'on puisse entendre le son
+ source.connect(contexteAudio.destination);
+ // lance la lecture de la source
+ source.start();
+}
-
Note: Pour un exemple de decodeAudioData(), voir la page {{domxref("AudioContext.decodeAudioData")}}.
+
Note : Pour un exemple de decodeAudioData(), voir la page {{domxref("AudioContext.decodeAudioData")}}.
var source = audioCtx.createBufferSource();
source.loop = true;
@@ -34,10 +34,10 @@ source.loop = true;
Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de playbackRate en temps réel. Quand la lecture est terminée, elle boucle.
function getData() {
source = audioCtx.createBufferSource();
request = new XMLHttpRequest();
diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.html b/files/fr/web/api/audiobuffersourcenode/loopend/index.html
index fa1bde9140..c580e48ecb 100644
--- a/files/fr/web/api/audiobuffersourcenode/loopend/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.html
@@ -16,7 +16,7 @@ translation_of: Web/API/AudioBufferSourceNode/loopEnd
Syntaxe
-
var source = contexteAudio.createBufferSource();
+
var source = contexteAudio.createBufferSource();
source.loopEnd = 3;
@@ -31,7 +31,7 @@ source.loopEnd = 3;
Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant loopStart et loopEnd. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.
function getData() {
diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.html b/files/fr/web/api/audiobuffersourcenode/loopstart/index.html
index b155c78b81..11a5b2165e 100644
--- a/files/fr/web/api/audiobuffersourcenode/loopstart/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.html
@@ -8,7 +8,7 @@ translation_of: Web/API/AudioBufferSourceNode/loopStart
Syntaxe
-
var source = contexteAudio.createBufferSource();
+
var source = contexteAudio.createBufferSource();
source.loopStart = 3;
@@ -23,7 +23,7 @@ source.loopStart = 3;
Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant loopStart et loopEnd. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.
function getData() {
diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html
index e9c4047369..5f13016165 100644
--- a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html
@@ -6,7 +6,7 @@ translation_of: Web/API/AudioBufferSourceNode/playbackRate
{{ APIRef("Web Audio API") }}
-
La propriété playbackRate de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type k-rate qui définit la vitesse à laquelle le contenu audio sera lu.
+
La propriété playbackRate de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type k-rate qui définit la vitesse à laquelle le contenu audio sera lu.
Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est 1.0. Pour toute autre valeur l'AudioBufferSourceNode rééchantillone le son avant de l'envoyer vers la sortie.
@@ -17,10 +17,8 @@ translation_of: Web/API/AudioBufferSourceNode/playbackRate
source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse normale
-
-
Note: Bien que le AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.
-
+
Note : Bien que le AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.
Valeur
@@ -40,14 +38,14 @@ source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse
Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés playbackRate, loopStart et loopEnd à la volée.
function getData() {
source = contexteAudio.createBufferSource();
requete = new XMLHttpRequest();
diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.html b/files/fr/web/api/audiobuffersourcenode/start/index.html
index 99f3314c3c..b07993659d 100644
--- a/files/fr/web/api/audiobuffersourcenode/start/index.html
+++ b/files/fr/web/api/audiobuffersourcenode/start/index.html
@@ -51,7 +51,7 @@ translation_of: Web/API/AudioBufferSourceNode/start
source.start(contexteAudio.currentTime + 1,3,10);
-
Note: Pour un exemple plus complexe montrant la méthode start() en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi l'exemple complet et son code source.
+
Note : Pour un exemple plus complexe montrant la méthode start() en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi l'exemple complet et son code source.
diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.html b/files/fr/web/api/audiocontext/createmediaelementsource/index.html
index 7c5344a346..3809f56dcd 100644
--- a/files/fr/web/api/audiocontext/createmediaelementsource/index.html
+++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.html
@@ -32,7 +32,7 @@ var source = audioCtx.createMediaElementSource(myMediaElement);
Cet exemple simple crée une source depuis un élément {{ htmlelement("audio") }} grâce à createMediaElementSource(), puis passe le signal audio à travers un {{ domxref("GainNode") }} avant de l’injecter dans le {{ domxref("AudioDestinationNode") }} pour la lecture. Quand le pointeur de la souris est déplacé, la fonction updatePage() est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas.
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
@@ -73,7 +73,7 @@ source.connect(gainNode);
gainNode.connect(audioCtx.destination);
-
Note : Du fait de l’appel à createMediaElementSource(), la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur.
+
Note : Du fait de l’appel à createMediaElementSource(), la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur.
Spécifications
diff --git a/files/fr/web/api/audiocontext/index.html b/files/fr/web/api/audiocontext/index.html
index c69aae1f26..6378d52164 100644
--- a/files/fr/web/api/audiocontext/index.html
+++ b/files/fr/web/api/audiocontext/index.html
@@ -167,6 +167,6 @@ var finish = contexteAudio.destination;
L'interface AudioListener représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une spatialisation audio. Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet AudioListener stocké dans la propriété {{domxref ("AudioContext.listener")}}.
-
Il est importantde noter qu'il n'ya qu'un seulauditeurparcontexte, et qu'il ne s'agit pas d'un {{domxref("AudioNode")}}.
+
Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il ne s'agit pas d'un {{domxref("AudioNode")}}.
-
+
Propriétés
Hérite des propriétés de son parent, AudioNode.
-
Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, AudioListener.positionX, tandis que la même propriété est définir à l'aide de AudioListener.positionX.value. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL.
+
Note : Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, AudioListener.positionX, tandis que la même propriété est définir à l'aide de AudioListener.positionX.value. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL.
Un AudioNode a des entrées et sorties, chacune avec un certain nombre de canaux.Un AudioNode avec zero entrée et une ou plusieurs sorties est appelée un noeud source. Le traitement exact varie d'un AudioNode à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part).
Plusieurs noeuds peuvent être reliés dans un graphe de traitement. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque AudioNode fait partie d'exactement un contexte. Les noeuds de traitement héritent des propriétés et méthodse d'AudioNode, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil Web Audio API.
-
Note: Un AudioNode peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}.
+
Note : Un AudioNode peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}.
Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes AudioNode peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page Web Audio API (par exemple Violent Theremin.)
+
Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes AudioNode peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page Web Audio API (par exemple Violent Theremin.)
-
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
diff --git a/files/fr/web/api/audioparam/index.html b/files/fr/web/api/audioparam/index.html
index 66812ad876..bd0fca5e56 100644
--- a/files/fr/web/api/audioparam/index.html
+++ b/files/fr/web/api/audioparam/index.html
@@ -67,7 +67,7 @@ translation_of: Web/API/AudioParam
Ce premier exemple simple montre la définition de la valeur de gain d'un{{domxref("GainNode")}}. gain est un exemple de paramètre audio de type a-rate, car sa valeur peut potentiellement être différente pour chaque trame d'échantillon.
-
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
var gainNode = audioCtx.createGain();
@@ -75,7 +75,7 @@ gainNode.gain.value = 0;
Ce deuxième exemple montre la définition de plusieurs paramètres d'un {{ domxref("BiquadFilterNode") }}. Ce sont des exemples de paramètre audio de type k-rate AudioParam's, comme les valeurs sont définies une fois pour l'ensemble des échantillons.
-
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
var biquadFilter = audioCtx.createBiquadFilter();
diff --git a/files/fr/web/api/audioprocessingevent/index.html b/files/fr/web/api/audioprocessingevent/index.html
index 09678f539d..a43186edb4 100644
--- a/files/fr/web/api/audioprocessingevent/index.html
+++ b/files/fr/web/api/audioprocessingevent/index.html
@@ -10,10 +10,10 @@ translation_of: Web/API/AudioProcessingEvent
---
{{APIRef("Web Audio API")}}{{deprecated_header}}
-
AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.
+
AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.
-
Note: Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les Audio Workers.
+
Note : Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les Audio Workers.
L'interface AudioWorklet dans l'API Web Audio est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence. Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio.
+
L'interface AudioWorklet dans l'API Web Audio est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence. Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio.
L'accès à distance d'AudioWorklet du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}.
L'exemple suivant montre une utilisation basique d'un AudioContext pour créer un nœud de filtre Biquad. Pour un exemple fonctionnel complet, visitez notre démonstration voice-change-o-matic (et lisez de même le code source).
Un nombre entier représentant le nombre de canaux que ce tampon doit avoir. Les implémentations doivent prendre en charge un minimum de 1 canal et un maximum de 32 canaux.
longueur
-
Un entier représentant la taille du tampon dans les trames d'échantillons.
+
Un entier représentant la taille du tampon dans les trames d'échantillons.
frequenceDEchantillonnage
La fréquence d'échantillonnage des données audio linéaires en trames d'échantillons par seconde. Une implémentation doit supporter des fréquences d'échantillonnage comprises au minimum dans la plage 22050 et 96000.
@@ -64,7 +64,7 @@ var tampon = ctxAudio.createBuffer(1, 22050, 22050);
Examinons maintenant un exemple de createBuffer() plus complexe, dans lequel nous créons un tampon de deux secondes, le remplissons de bruit blanc, puis le reproduisons via {{domxref("AudioBufferSourceNode")}}. Le commentaire devrait clairement faire comprendre ce qui se passe. Vous pouvez également exécuter le code en direct ou regarder le source.
-
var ctxAudio = new (window.AudioContext || window.webkitAudioContext)();
+
var ctxAudio = new (window.AudioContext || window.webkitAudioContext)();
// Création d'un tampon stéréo vide de trois secondes à la fréquence d'échantillonnage de l'AudioContext
var monArrayBuffer = ctxAudio.createBuffer(2, ctxAudio.sampleRate * 3, ctxAudio.sampleRate);
diff --git a/files/fr/web/api/baseaudiocontext/createbuffersource/index.html b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html
index 18d96da80c..9a9dfe08cf 100644
--- a/files/fr/web/api/baseaudiocontext/createbuffersource/index.html
+++ b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html
@@ -5,7 +5,9 @@ translation_of: Web/API/BaseAudioContext/createBufferSource
---
{{ APIRef("Web Audio API") }}
-
La méthode createBufferSource() de l’interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{ domxref("AudioBufferSourceNode") }}, qui peut être employé pour jouer des données audio contenues dans un objet {{ domxref("AudioBuffer") }}. Des {{ domxref("AudioBuffer") }} peuvent être créés en utilisant {{domxref("BaseAudioContext.createBuffer")}}, ou sont retournés par la méthode {{domxref("BaseAudioContext.decodeAudioData")}} quand elle a terminé de décoder une piste audio avec succès.
+
La méthode createBufferSource() de l’interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{ domxref("AudioBufferSourceNode") }}, qui peut être employé pour jouer des données audio contenues dans un objet {{ domxref("AudioBuffer") }}.
+
+
Des {{ domxref("AudioBuffer") }} peuvent être créés en utilisant {{domxref("BaseAudioContext.createBuffer")}}, ou sont retournés par la méthode {{domxref("BaseAudioContext.decodeAudioData")}} quand elle a terminé de décoder une piste audio avec succès.
Dans cet exemple, on crée un tampon de deux secondes, on le remplit avec du bruit blanc, puis on le joue via un {{ domxref("AudioBufferSourceNode") }}. Les commentaires devraient expliquer clairement ce qui se passe.
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var button = document.querySelector('button');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');
@@ -87,5 +89,5 @@ button.onclick = function() {
var contexteAudio = new AudioContext();
var gainNode = contexteAudio.createGain();
-
Retourne
+
Retourne
-
Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type a-rate {{domxref("GainNode.gain")}}.
+
Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type a-rate {{domxref("GainNode.gain")}}.
-
Exemple
+
Exemple
L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain.
diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.html b/files/fr/web/api/baseaudiocontext/createpanner/index.html
index 9630c4af5f..2c11e2a02e 100644
--- a/files/fr/web/api/baseaudiocontext/createpanner/index.html
+++ b/files/fr/web/api/baseaudiocontext/createpanner/index.html
@@ -120,7 +120,7 @@ function positionPanner() {
}
-
Note: In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
+
Note : In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
La méthode createPeriodicWave() de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer une {{domxref("PeriodicWave")}} (onde périodique), qui sert à définir une onde sinusoïdale périodique qui peut être utilisée pour modeler la sortie d'un {{ domxref("OscillatorNode") }}.
-
+
La méthode createPeriodicWave() de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer une {{domxref("PeriodicWave")}} (onde périodique), qui sert à définir une onde sinusoïdale périodique qui peut être utilisée pour modeler la sortie d'un {{ domxref("OscillatorNode") }}.
L'interface BaseAudioContext agit comme une définition de base pour les graphiques de traitement audio en ligne et hors ligne, comme représenté par {{domxref("AudioContext")}} et {{domxref("OfflineAudioContext")}} respectivement. Vous n'utiliseriez pas BaseAudioContext directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.
+
L'interface BaseAudioContext agit comme une définition de base pour les graphiques de traitement audio en ligne et hors ligne, comme représenté par {{domxref("AudioContext")}} et {{domxref("OfflineAudioContext")}} respectivement. Vous n'utiliseriez pas BaseAudioContext directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.
Un BaseAudioContext peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}.
Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.
+
Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
var oscillatorNode = audioCtx.createOscillator();
@@ -129,7 +129,7 @@ var finish = audioCtx.destination;
charging indique si battery, qui est un objet du type {{domxref("BatteryManager")}}, est en charge; si la batterie est en charge, la variable a la valeur true. Sinon, dans le cas de la décharge, la variable a la valeurvaux false.
Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée.
-
Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.
+
Note : Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.
time est le temps restant en secondes jusqu'à que battery, qui est un objet de type {{domxref("BatteryManager")}}, soit rechargée, ou vaut 0 si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut Infinity.
navigator.getBattery().then(function(battery) {
var time = battery.chargingTime;
diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.html b/files/fr/web/api/batterymanager/dischargingtime/index.html
index 2ebddfe7db..8ad8ea8602 100644
--- a/files/fr/web/api/batterymanager/dischargingtime/index.html
+++ b/files/fr/web/api/batterymanager/dischargingtime/index.html
@@ -10,16 +10,16 @@ translation_of: Web/API/BatteryManager/dischargingTime
Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée.
-
Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.
+
Note : Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.
Syntax
var time = battery.dischargingTime
-
time est le temps restant en secondes jusqu'à que battery, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut Infinity si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant.
+
time est le temps restant en secondes jusqu'à que battery, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut Infinity si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant.
La valeur 1.0 est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie.
-
Exemple
+
Exemple
Code HTML
-
<div id="level">(niveau de batterie inconnu)</div>
-
+
<div id="level">(niveau de batterie inconnu)</div>
+
Les navigateurs basés sur WebKit ne suivent pas la spécification concernant la demande de confirmation. Un exemple similaire fonctionnant sur presque tous les navigateurs serait plutôt comme :
-
window.addEventListener("beforeunload", function (e) {
+
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
(e || window.event).returnValue = confirmationMessage; // Gecko + IE
diff --git a/files/fr/web/api/biquadfilternode/frequency/index.html b/files/fr/web/api/biquadfilternode/frequency/index.html
index 64bdce0416..508cf54cf8 100644
--- a/files/fr/web/api/biquadfilternode/frequency/index.html
+++ b/files/fr/web/api/biquadfilternode/frequency/index.html
@@ -18,7 +18,7 @@ var filtreBiquad = contexteAudio.createBiquadFilter();
filtreBiquad.frequency.value = 3000;
-
Note: Bien que le AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.
+
Note : Bien que le AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.
L'interface BiquadFilterNode représente un simple filtre de bas niveau, créé avec la méthode {{ domxref("AudioContext.createBiquadFilter()") }}. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un BiquadFilterNode a toujours exactement une entrée et une sortie.
+
L'interface BiquadFilterNode représente un simple filtre de bas niveau, créé avec la méthode {{ domxref("AudioContext.createBiquadFilter()") }}. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un BiquadFilterNode a toujours exactement une entrée et une sortie.
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz.
{{domxref("BiquadFilterNode.detune")}}
-
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en cents.
+
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en cents.
{{domxref("BiquadFilterNode.Q")}}
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant un facteur Q, ou facteur de qualité.
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant le gainutilisé dans l'algorithme de filtrage.
{{domxref("BiquadFilterNode.type")}}
-
Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente:
-
La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous)
-
+
Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente: La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous)
Filtre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les fréquences supérieures sont atténuées.
La fréquence de coupure
-
Indique comment la fréquence a culminéautour de la coupure. Plus la valeur est élevée, plus le point culminant est haut
+
Indique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut
Non utilisé
highpass
Filtre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées.
La fréquence de coupure
-
Indique comment la fréquence a culminéautour de la coupure. Plus la valeur est élevée, plus le point culminant est haut
+
Indique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut
Non utilisé
diff --git a/files/fr/web/api/blob/blob/index.html b/files/fr/web/api/blob/blob/index.html
index fa229550e2..eb08cd3667 100644
--- a/files/fr/web/api/blob/blob/index.html
+++ b/files/fr/web/api/blob/blob/index.html
@@ -41,7 +41,7 @@ var aBlob = new Blob( array, options );
Exemples
-
// Un tableau qui contient une seule DOMString
+
// Un tableau qui contient une seule DOMString
var aFileParts = ['<a id="a"><b id="b">Coucou :) !</b></a>'];
// Le blob
diff --git a/files/fr/web/api/blob/index.html b/files/fr/web/api/blob/index.html
index a036e2723c..6cf6467846 100644
--- a/files/fr/web/api/blob/index.html
+++ b/files/fr/web/api/blob/index.html
@@ -19,7 +19,9 @@ translation_of: Web/API/Blob
Note : La méthode slice() utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur début + longueur qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob.
-
Note : La méthode slice() doit être utilisée avec certains préfixes sur certaines versions de navigateurs : blob.mozSlice() pour Firefox 12 et antérieur, blob.webkitSlice() dans Safari. Un ancienne version de slice() sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de blob.mozSlice() a été abandonnée avec Firefox 30.
+
+
Note : La méthode slice() doit être utilisée avec certains préfixes sur certaines versions de navigateurs : blob.mozSlice() pour Firefox 12 et antérieur, blob.webkitSlice() dans Safari. Un ancienne version de slice() sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de blob.mozSlice() a été abandonnée avec Firefox 30.
L'interface BlobBuilder fournit une manière simple de construire des objets {{domxref("Blob")}}. Il suffit de créer un BlobBuilder et de lui ajouter des données en appellant la méthode {{manch("append")}}. Une fois finalisé, l'appel à la méthode {{manch("getBlob")}} permet de récupérer un {{domxref("Blob")}} contenant les données envoyées au constructeur dudit Blob.
-
Note: L'interface BlobBuilder est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.
+
+
Note: L'interface BlobBuilder est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.
+
Aperçu des méthodes
@@ -57,7 +59,7 @@ void append(
);
-
Paramètres
+
Paramètres
data
@@ -75,14 +77,14 @@ void append(
);
-
Paramètres
+
Paramètres
contentType {{optional_inline}}
Le type MIME des données retournées par le {{domxref("Blob")}}. Ce sera la valeur de la propriété 'type' de l'objet Blob.
-
Valeur de retour
+
Valeur de retour
Un objet {{domxref("Blob")}} contenant toutes les données passées en argument de chaque appel à {{manch("append")}} depuis la création du BlobBuilder. Cela remet aussi à zéro (reset) le BlobBuilder de tel sorte que le prochain appel à {{manch("append")}} démarrera la création d'un nouveau blob vierge.
@@ -96,7 +98,7 @@ void append(
);
-
Paramètres
+
Paramètres
name
@@ -105,7 +107,7 @@ void append(
Le type MIME des données retournées par le {{domxref("File")}}. Ce sera la valeur de la propriété 'type' de l'objet File.
-
Valeur deretour
+
Valeur deretour
Un objet {{domxref("File")}}.
diff --git a/files/fr/web/api/btoa/index.html b/files/fr/web/api/btoa/index.html
index 9c07b8bb40..3d4bad306e 100644
--- a/files/fr/web/api/btoa/index.html
+++ b/files/fr/web/api/btoa/index.html
@@ -46,7 +46,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/btoa
var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
-
Notes
+
Notes
Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.
Dans la plupart des navigateurs, l'appel de btoa() sur une chaîne Unicode engendrera une exception InvalidCharacterError.
-
Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par Johan Sundström :
+
Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par Johan Sundström :
-
// Chaîne ucs-2 en ascii encodé en base64
+
// Chaîne ucs-2 en ascii encodé en base64
function uena(chn) {
return window.btoa(unescape(encodeURIComponent(chn)));
}
@@ -73,7 +73,7 @@ aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"
La méthode addAll() de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées.
-
Note: addAll() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération put() ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode addAll().
+
Note :addAll() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération put() ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode addAll().
Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir Suppression des anciens caches.
-
-
Note : Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.
+
+
Note : Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.
-
-
Note : L'algorithme des correspondances de clés est dépendant de la valeur de l'en-tête VARY. Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.
+
+
Note : L'algorithme des correspondances de clés est dépendant de la valeur de l'en-tête VARY. Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.
@@ -62,7 +62,9 @@ translation_of: Web/API/Cache
Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans CURRENT_CACHES.
-
Note: In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing.
+
+
Note: In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing.
La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée.
options {{optional_inline}}
-
Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération keys. Les options disponibles sont :
-
+
Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération keys. Les options disponibles sont :
ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées). Est à false par défaut.
Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée.
-
Note: Cache.match() est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).
+
Note :Cache.match() est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).
L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause catch() est déclenchée quand l'appel à fetch() lève une exception. A l'intérieur de la clause catch(), match() est utilisée to pour retourner la réponse appropriée.
-
Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition if() est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler event.respondWith(). Si aucun gestionnaire fetch ne décide d'appeler event.respondWith(), la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si fetch() retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause catch() ne sera PAS appelée.
+
Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition if() est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler event.respondWith(). Si aucun gestionnaire fetch ne décide d'appeler event.respondWith(), la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si fetch() retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause catch() ne sera PAS appelée.
self.addEventListener('fetch', function(event) {
// We only want to call event.respondWith() if this is a GET request for an HTML document.
diff --git a/files/fr/web/api/cache/matchall/index.html b/files/fr/web/api/cache/matchall/index.html
index 50126ead5c..86d1dad2bf 100644
--- a/files/fr/web/api/cache/matchall/index.html
+++ b/files/fr/web/api/cache/matchall/index.html
@@ -30,7 +30,7 @@ translation_of: Web/API/Cache/matchAll
request
La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}.
options {{optional_inline}}
-
Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes :
+
Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes :
ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à false par défaut.
Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.
-
Note: {{domxref("Cache.match()")}} est quasiment identique à Cache.matchAll(), si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).
+
Note : {{domxref("Cache.match()")}} est quasiment identique à Cache.matchAll(), si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).
Note: put() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.
+
Note :put() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.
-
Note: Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage. Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver.
+
Note : Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage. Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver.
-
Note: Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS.
+
Note : Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS.
Une {{jsxref("Promise", "Promesse")}} est retournée avec void.
-
Note: La promesse sera rompue avec un TypeError si le schéma d'URL n'est pas http ou https.
+
Note : La promesse sera rompue avec un TypeError si le schéma d'URL n'est pas http ou https.
-
Exemples
+
Exemples
Cet extrait de code est tiré du MDN sw-test example (lancez sw-test dans votre navigateur). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante :
Une {{jsxref("Promise", "Promesse")}} qui renvoie true si l'objet {{domxref("Cache")}} est trouvé et supprimé, false sinon.
-
Exemples
+
Exemples
Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec delete().
Une {{jsxref("Promise", "Promesse")}} qui renvoie true si le cache existe.
-
Exemples
+
Exemples
L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse has() est rejetée) alors nous exécutons une sorte d'initialisation du cache.
Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit).
-
Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.
-
Note: CacheStorage échouera systématiquement avec une SecurityError sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.
+
+
Note : CacheStorage échouera systématiquement avec une SecurityError sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.
+
-
Note: {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}.
+
+
Note : {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}.
Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.
-
Exemples
+
Exemples
Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec delete().
Les objets Cache sont cherchés par ordre de création.
-
Note: {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée.
+
+
Note : {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée.
ignoreSearch: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à true, la partie ?value=bar de http://foo.com/?value=bar sera ignoré lors d'un rapporchement. La valeur par défaut est false.
ignoreMethod: Un {{domxref("Boolean")}} qui, quand défini à true, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} http (normalement, seulement GET et HEAD sont authorisés) La valeur par défaut est false.
ignoreVary: Un {{domxref("Boolean")}} qui, quand défini à true, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header VARY. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header VARY. La valeur par défaut est false.
-
cacheName: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.
+
cacheName: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.
Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.
-
Exemples
+
Exemples
Cet exemple est tiré du MDN sw-test example (voir sw-test running live). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit:
Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.
-
Note: Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec cacheName et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}.
+
Note : Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec cacheName et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}.
Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.
-
Exemples
+
Exemples
Cet exemple est tiré de l'exemple MDN sw-test (voir sw-test en direct). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler CacheStorage.open() pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments.
Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons.
+
Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons.
Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <canvas> dont j'avais entendu parler (en), non seulement allait être supporté par Firefox, mais étaitdéjà supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.
+
Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <canvas> dont j'avais entendu parler (en), non seulement allait être supporté par Firefox, mais étaitdéjà supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.
-
La présentation et le tutoriel canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.
+
La présentation et le tutoriel canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.
-
Comment ?
+
Comment ?
-
L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va y conduire, et je voulais voir si je pouvais y arriver.
+
L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va y conduire, et je voulais voir si je pouvais y arriver.
Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon.
-
Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe Tricks of the Game Programming Gurus (ISBN: 0672305070), et d'un Projeteur de rayons Java que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.
+
Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe Tricks of the Game Programming Gurus (ISBN: 0672305070), et d'un Projeteur de rayons Java que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.
-
Résultats
+
Résultats
Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement.
De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =)
-
Le projeteur de rayons (ray-caster)
+
Le projeteur de rayons (ray-caster)
-
De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un coup d'oeil, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).
+
De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un coup d'oeil, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).
Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément <canvas> et amusez-vous!
Ajouté en HTML5, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts JavaScript. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.
+
Ajouté en HTML5, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts JavaScript. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.
-
Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire Firefox 1.5). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X et pour Safari. Internet Explorer supporte <canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de <canvas> en incluant un script depuis le projet Explorer Canvas de Google.
+
Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire Firefox 1.5). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X et pour Safari. Internet Explorer supporte <canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de <canvas> en incluant un script depuis le projet Explorer Canvas de Google.
-
L'élément <canvas> est aussi utilisé par WebGL pour afficher des graphismes 3D avec accélération matérielle sur des pages web.
+
L'élément <canvas> est aussi utilisé par WebGL pour afficher des graphismes 3D avec accélération matérielle sur des pages web.
En combinant les possibilités de l'élément video avec celles de l'élément canvas, vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (fond vert) en utilisant JavaScript.
+
En combinant les possibilités de l'élément video avec celles de l'élément canvas, vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (fond vert) en utilisant JavaScript.
Ce document dispose de deux balises canvas, avec les IDs c1 et c2 : l'élément c1 est utilisé pour afficher l'image courante de la vidéo originale, pendant que c2 est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; c2 est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.
+
Ce document dispose de deux balises canvas, avec les IDs c1 et c2 : l'élément c1 est utilisé pour afficher l'image courante de la vidéo originale, pendant que c2 est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; c2 est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.
Le code JavaScript est importé dans le script nommé main.js ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé.
Quand le document se charge, la méthode processor.doLoad(), dans le script main.js, est exécutée.
La métode doLoad() est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (chroma-key), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo.
Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément video et les deux éléments canvas. Il définit également les contextes graphique de chacun des éléments canvas. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation.
Ensuite, l'écouteur d'évènement addEventListener() est appelé sur l'élément video pour détecter le moment où l'utilisateur va cliquer sur le bouton de lecture. Dès lors, le code récupère la hauteur et la largeur de la vidéo, que l'on divise par deux (nécessaire pour plus tard effectuer l'effet d'incrustation), puis on appelle la méthode timerCallback() pour surveiller l'avancement de la vidéo et appliquer l'effet visuel.
-
Le rappel du minuteur
+
Le rappel du minuteur
-
Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".
+
Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".
La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer.Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.
+
La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer. Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.
-
Ensuite, il appelle la méthode computeFrame(), qui effectue l'effet "chroma-keying" sur l'image vidéo en cours.
+
Ensuite, il appelle la méthode computeFrame(), qui effectue l'effet "chroma-keying" sur l'image vidéo en cours.
-
La dernière chose que fait le rappel est d'appeler setTimeout() pour programmer un nouvel appel.En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.
+
La dernière chose que fait le rappel est d'appeler setTimeout() pour programmer un nouvel appel. En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.
Manipulation des données des images vidéo
La méthode computeFrame() , présentée ci-dessous, est en charge de récupérer les données de chaque image et d'y appliquer l'effet d'incrustation.
-
processor.computeFrame =functioncomputeFrame(){
- this.ctx1.drawImage(this.video,0,0,this.width,this.height);
- let frame =this.ctx1.getImageData(0,0,this.width,this.height);
- let l = frame.data.length /4;
-
- for(let i =0; i < l; i++){
- let r = frame.data[i *4+0];
- let g = frame.data[i *4+1];
- let b = frame.data[i *4+2];
- if(g >100&& r >100&& b <43)
- frame.data[i *4+3]=0;
- }
- this.ctx2.putImageData(frame,0,0);
- return;
- }
+
processor.computeFrame = function computeFrame() {
+ this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+ let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+ let l = frame.data.length / 4;
+
+ for (let i = 0; i < l; i++) {
+ let r = frame.data[i * 4 + 0];
+ let g = frame.data[i * 4 + 1];
+ let b = frame.data[i * 4 + 2];
+ if (g > 100 && r > 100 && b < 43)
+ frame.data[i * 4 + 3] = 0;
+ }
+ this.ctx2.putImageData(frame, 0, 0);
+ return;
+ }
²
Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à :
-
+
À la seconde ligne, cette image est copiée dans le contexte graphique ctx1 du premier élément canvas, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode drawImage(). Voici ce que cela donne :
-
+
-
La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode getImageData() sur le premier contexte.Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler.La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.
+
La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode getImageData() sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.
-
La boucle for, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de foo.png.
+
La boucle for, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de foo.png.
-
Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent.En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.
+
Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.
-
L'image résultante ressemble à ceci :
+
L'image résultante ressemble à ceci :
-
+
-
Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.
+
Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.
Dans le dernier chapitre, nous avons réalisé des animations basiques et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.
-
+
Dans le dernier chapitre, nous avons réalisé des animations basiques et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.
Dessinons une balle
Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canevas.
Comme d'habitude, nous avons tout d'abord besoin de dessiner le contexte. Pour dessiner la balle, nous allons créer un objet ball contenant des propriétés et une méthode draw() afin de la placer sur le canevas.
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ball = {
@@ -42,9 +40,9 @@ ball.draw();
Ajout de la vitesse
-
Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le dernier chapitre de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} (nettoyé) les canvas pour supprimer les anciens cercles des "frames" précédents.
+
Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le dernier chapitre de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} (nettoyé) les canvas pour supprimer les anciens cercles des "frames" précédents.
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;
@@ -87,7 +85,7 @@ ball.draw();
Si aucun test de collision n'est effectué, notre balle sort hors du canevas rapidement. Nous avons ici besoin de vérifier si les positions x et y de la balle sont hors des dimensions du canevas et si c'est le cas, d'inverser la direction des vecteurs de vitesse. Pour faire cela, nous ajoutons les vérifications suivantes à la méthode draw :
Jusqu'à maintenant, nous avons utilisé la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} pour effacer les images précédentes. En la remplaçant par la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} et en utilisant un remplissage semi-transparent, on obtient un effet de traînée.
Afin d'obtenir quelques contrôles sur la balle, nous pouvons faire suivre notre souris en utilisant l'événement mousemove, par exemple. L'événement click relâche la balle et la laisse rebondir à nouveau.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;
var running = false;
@@ -365,13 +355,13 @@ ball.draw();
Casse-briques
-
Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ?Consultez notre zone de développement de jeux pour plus d'articles liés aux jeux.
+
Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ? Consultez notre zone de développement de jeux pour plus d'articles liés aux jeux.
Dans le chapitre sur les formes géométriques, nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins.
-
+
Dans le chapitre sur les formes géométriques, nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins.
-
Les couleurs
+
Les couleurs
Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dessin. Si nous voulons appliquer des couleurs à une forme, il y a deux propriétés importantes que nous pouvons utiliser : fillStyle et strokeStyle .
color est une chaîne représentant un CSS {{cssxref("<color>")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur #000000 de CSS color).
-
Remarque: Lorsque vous définissez strokeStyle et fillStyle, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter fillStyle ou strokeStyle.
+
Note : Lorsque vous définissez strokeStyle et fillStyle, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter fillStyle ou strokeStyle.
Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("<color>")}}. Chacun des exemples suivants décrit la même couleur.
-
// Les valeurs possibles de fillStyle pour "orange"
+
// Les valeurs possibles de fillStyle pour "orange"
-ctx.fillStyle ='orange';
-ctx.fillStyle ='#FFA500';
-ctx.fillStyle ='rgb(255, 165, 0)';
-ctx.fillStyle ='rgba(255, 165, 0, 1)';
Dans cet exemple, nous utilisons une nouvelle fois deux boucles for pour dessiner une grille de rectangles, chacun dans une couleur différente. L'image résultante devrait ressembler à la capture d'écran. Il n'y a rien de spectaculaire ici. Nous utilisons les deux variables i et j pour générer une couleur RVB unique pour chaque carré, et seulement modifier les valeurs rouges et vertes. Le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sortes de palettes. En augmentant les étapes, vous pouvez obtenir quelque chose qui ressemble à des palettes de couleurs que Photoshop utilise.
-
function draw() {
+
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
@@ -57,44 +55,43 @@ ctx.fillStyle
-
Cet exemple est similaire à celui ci-dessus, mais utilise strokeStyle pour changer les couleurs des contours des formes. Nous utilisons la méthode arc() pour dessiner des cercles au lieu de carrés.
En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de globalAlpha ou en attribuant une couleur semi-transparente à strokeStyle et/ou fillStyle.
@@ -107,7 +104,7 @@ ctx.fillStyle //Affecter des couleurs transparentes pour dessiner et remplir le style
+
//Affecter des couleurs transparentes pour dessiner et remplir le style
ctx.strokeStyle = "rgba(255, 0, 0, .5)";
ctx.fillStyle = "rgba(255, 0, 0, .5)";
@@ -115,77 +112,74 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
La fonction rgba()(rvba) est similaire à la fonction rgb()(rvb) mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque).
-
Un exemple globalAlpha
+
Un exemple globalAlpha
Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. globalAlpha est réglé à 0.2 et sera utilisé pour toutes les formes. Chaque étape de boucle for dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image.
Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de rgba() nous donne un peu plus de contrôle et de flexibilité.
Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé.
-
functiondraw(){
- var ctx = document.getElementById('canvas').getContext('2d');
- for(var i =0; i <10; i++){
- ctx.lineWidth =1+ i;
- ctx.beginPath();
- ctx.moveTo(5+ i *14,5);
- ctx.lineTo(5+ i *14,140);
- ctx.stroke();
- }
-}
Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets.
-
+
Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de 1.0, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de 1.0 dans l'exemple précédent.
Note: Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style lineCap, dont la valeur par défaut est butt. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style lineCap à square, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier).
-
Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec closePath (), il n'y a pas de point de départ ni de point final ;à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style lineJoin, dont la valeur par défaut est miter, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux.Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.
+
Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec closePath (), il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style lineJoin, dont la valeur par défaut est miter, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.
-
Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels.
+
Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels .
Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2.
-
Un exemple de lineCap
+
Un exemple de lineCap
La propriété lineCap détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : butt, round et square. Par défaut, la propriété est définie à butt.
La ligne de gauche utilise l'option par défaut butt. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option round. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option square. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne.
-
functiondraw(){
- var ctx = document.getElementById('canvas').getContext('2d');
- var lineCap =['butt','round','square'];
-
- // Dessiner des guides
- ctx.strokeStyle ='#09f';
- ctx.beginPath();
- ctx.moveTo(10,10);
- ctx.lineTo(140,10);
- ctx.moveTo(10,140);
- ctx.lineTo(140,140);
- ctx.stroke();
-
- // Dessiner des lignes
- ctx.strokeStyle ='black';
- for(var i =0; i < lineCap.length; i++){
- ctx.lineWidth =15;
- ctx.lineCap = lineCap[i];
- ctx.beginPath();
- ctx.moveTo(25+ i *50,10);
- ctx.lineTo(25+ i *50,140);
- ctx.stroke();
- }
-}
La propriété lineJoin détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés).
Il existe trois valeurs possibles pour cette propriété : round, bevel et miter. Par défaut, cette propriété est définie à miter. Notez que le paramètre lineJoin n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas.
-
-
round (rond)
Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait.
bevel (biseau)
Ajoute un triangle à l'extrémité commune des segments connectés.
miter (onglet)
-
Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange.Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.
+
Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.
-
L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété lineJoin ;la sortie est montrée ci-dessus.
-
-
functiondraw(){
- var ctx = document.getElementById('canvas').getContext('2d');
- var lineJoin =['round','bevel','miter'];
- ctx.lineWidth =10;
- for(var i =0; i < lineJoin.length; i++){
- ctx.lineJoin = lineJoin[i];
- ctx.beginPath();
- ctx.moveTo(-5,5+ i *40);
- ctx.lineTo(35,45+ i *40);
- ctx.lineTo(75,5+ i *40);
- ctx.lineTo(115,45+ i *40);
- ctx.lineTo(155,5+ i *40);
- ctx.stroke();
- }
-}
L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété lineJoin ; la sortie est montrée ci-dessus.
+
+
function draw() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ var lineJoin = ['round', 'bevel', 'miter'];
+ ctx.lineWidth = 10;
+ for (var i = 0; i < lineJoin.length; i++) {
+ ctx.lineJoin = lineJoin[i];
+ ctx.beginPath();
+ ctx.moveTo(-5, 5 + i * 40);
+ ctx.lineTo(35, 45 + i * 40);
+ ctx.lineTo(75, 5 + i * 40);
+ ctx.lineTo(115, 45 + i * 40);
+ ctx.lineTo(155, 5 + i * 40);
+ ctx.stroke();
+ }
+}
Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent.Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne.Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.
+
Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent. Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne. Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.
-
La propriété miterLimit détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne.Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place.Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété miterLimit (dont la valeur par défaut est 10.0 dans le HTML {{HTMLElement("canvas")}}). miterLimit peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.
+
La propriété miterLimit détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne. Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place. Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété miterLimit (dont la valeur par défaut est 10.0 dans le HTML {{HTMLElement("canvas")}}). miterLimit peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.
-
Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne.Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne.Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :
+
Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :
La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.
-
Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.
-
Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.
-
Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.
+
La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.
+
Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.
+
Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.
+
Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.
-
Voici une petite démo dans laquelle vous pouvez définir dynamiquement miterLimit et voir comment cela affecte les formes sur le canevas.Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.
-
-
Si vous spécifiez une valeur miterLimit inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ;avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ;avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).
-
-
functiondraw(){
- var ctx = document.getElementById('canvas').getContext('2d');
-
- // Éffacer canvas
- ctx.clearRect(0,0,150,150);
-
- // Dessiner des guides
- ctx.strokeStyle ='#09f';
- ctx.lineWidth =2;
- ctx.strokeRect(-5,50,160,50);
-
- // Définir les styles de lignes
- ctx.strokeStyle ='#000';
- ctx.lineWidth =10;
-
- // Vérifier l'entrée (input)
- if(document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)){
- ctx.miterLimit =parseFloat(document.getElementById('miterLimit').value);
- }else{
- alert('Value must be a positive number');
- }
-
- // Dessiner des lignes
- ctx.beginPath();
- ctx.moveTo(0,100);
- for(i =0; i <24; i++){
- var dy = i %2==0?25:-25;
- ctx.lineTo(Math.pow(i,1.5)*2,75+ dy);
- }
- ctx.stroke();
- returnfalse;
-}
-
-
-
<table>
- <tr>
- <td><canvasid="canvas"width="150"height="150"></canvas></td>
- <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br>
- <formonsubmit="return draw();">
- <label>Miter limit</label>
- <inputtype="text"size="3"id="miterLimit"/>
- <inputtype="submit"value="Redraw"/>
- </form>
- </td>
- </tr>
-</table>
Voici une petite démo dans laquelle vous pouvez définir dynamiquement miterLimit et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.
+
+
Si vous spécifiez une valeur miterLimit inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).
+
+
function draw() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+
+ // Éffacer canvas
+ ctx.clearRect(0, 0, 150, 150);
-
setLineDash et lineDashOffset précisent le modèle de lignes. setLineDash accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et lineDashOffset définit un décalage pour commencer le motif.
-
Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base animation basiques..
+
Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base animation basiques..
Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux.Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes.Nous pouvons ensuite affecter cet objet aux propriétés fillStyle ou strokeStyle.
+
Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux. Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes. Nous pouvons ensuite affecter cet objet aux propriétés fillStyle ou strokeStyle.
Crée un dégradé radial.Les paramètres représentent deux cercles, l'un avec son centre à (x1, y1) et un rayon r1, l'autre avec son centre à (x2, y2) avec un rayon r2.
+
Crée un dégradé radial. Les paramètres représentent deux cercles, l'un avec son centre à (x1, y1) et un rayon r1, l'autre avec son centre à (x2, y2) avec un rayon r2.
Par exemple:
-
var lineargradient = ctx.createLinearGradient(0,0,150,150);
-var radialgradient = ctx.createRadialGradient(75,75,0,75,75,100);
Crée un nouvel arrêt de couleur sur l'objet gradient(dégradé).La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument color doit être une chaîne représentant une CSS {{cssxref ("<color>")}}, indiquant la couleur que le dégradédevrait atteindre.
+
Crée un nouvel arrêt de couleur sur l'objet gradient(dégradé). La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument color doit être une chaîne représentant une CSS {{cssxref ("<color>")}}, indiquant la couleur que le dégradé devrait atteindre.
-
Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez.Ci-dessous figure un dégradé linéaire très simple du blanc au noir.
+
Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez. Ci-dessous figure un dégradé linéaire très simple du blanc au noir.
-
var lineargradient = ctx.createLinearGradient(0,0,150,150);
-lineargradient.addColorStop(0,'white');
-lineargradient.addColorStop(1,'black');
Dans cet exemple, nous allons créer deux dégradés différents.Comme vous pouvez le voir ici, les propriétés strokeStyle et fillStyle peuvent accepter un objet canvasGradient comme entrée valide.
+
Dans cet exemple, nous allons créer deux dégradés différents. Comme vous pouvez le voir ici, les propriétés strokeStyle et fillStyle peuvent accepter un objet canvasGradient comme entrée valide.
-
functiondraw(){
- var ctx = document.getElementById('canvas').getContext('2d');
+
function draw() {
+ var ctx = document.getElementById('canvas').getContext('2d');
- // Créer un dégradé
- var lingrad = ctx.createLinearGradient(0,0,0,150);
- lingrad.addColorStop(0,'#00ABEB');
- lingrad.addColorStop(0.5,'#fff');
- lingrad.addColorStop(0.5,'#26C000');
- lingrad.addColorStop(1,'#fff');
+ // Créer un dégradé
+ var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+ lingrad.addColorStop(0, '#00ABEB');
+ lingrad.addColorStop(0.5, '#fff');
+ lingrad.addColorStop(0.5, '#26C000');
+ lingrad.addColorStop(1, '#fff');
- var lingrad2 = ctx.createLinearGradient(0,50,0,95);
- lingrad2.addColorStop(0.5,'#000');
- lingrad2.addColorStop(1,'rgba(0, 0, 0, 0)');
+ var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+ lingrad2.addColorStop(0.5, '#000');
+ lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
- // assigner des dégradés aux styles "fill" et "stroke"
- ctx.fillStyle = lingrad;
- ctx.strokeStyle = lingrad2;
+ // assigner des dégradés aux styles "fill" et "stroke"
+ ctx.fillStyle = lingrad;
+ ctx.strokeStyle = lingrad2;
- // Dessiner des formes
- ctx.fillRect(10,10,130,130);
- ctx.strokeRect(50,50,50,50);
+ // Dessiner des formes
+ ctx.fillRect(10, 10, 130, 130);
+ ctx.strokeRect(50, 50, 50, 50);
-}
Le premier est un dégradé d'arrière-plan.Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position.Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert.Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative.Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.
-
-
Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur.Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.
Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.
-
Un exemple de createRadialGradient
+
Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.
-
Dans cet exemple, nous définirons quatre dégradés radiaux différents.Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire).
functiondraw(){
- var ctx = document.getElementById('canvas').getContext('2d');
+
Un exemple de createRadialGradient
- // Créer un dégradé
- var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
- radgrad.addColorStop(0,'#A7D30C');
- radgrad.addColorStop(0.9,'#019F62');
- radgrad.addColorStop(1,'rgba(1, 159, 98, 0)');
+
Dans cet exemple, nous définirons quatre dégradés radiaux différents. Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire).
Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique.Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.
+
Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique. Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.
-
Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente.Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales.Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé # 019F62 = rgba (1,159,98,1).
+
Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé # 019F62 = rgba (1,159,98,1).
Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images.Il existe cependant une méthode beaucoup plus simple : la méthode createPattern ().
+
Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode createPattern ().
Crée et renvoie un nouvel objet de canvas.image est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, typeest une chaîne indiquant comment utiliser l'image.
+
Crée et renvoie un nouvel objet de canvas. image est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, type est une chaîne indiquant comment utiliser l'image.
-
Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :
+
Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :
repeat
-
Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.
+
Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.
repeat-x
Tapisse la zone en répètant l'image horizontalement mais pas verticalement.
repeat-y
@@ -596,125 +574,120 @@ lineargradient.Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus.Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle.Par exemple :
+
Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle. Par exemple :
-
var img =newImage();
-img.src ='someimage.png';
-var ptrn = ctx.createPattern(img,'repeat');
+
var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
-
Note:Comme avec la méthode drawImage (), vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.
+
Note: Comme avec la méthode drawImage (), vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.
-
Un exemple de createPattern
+
Un exemple de createPattern
-
Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété fillStyle.La seule chose à noter, est l'utilisation du gestionnaire onload de l'image.Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.
+
Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété fillStyle. La seule chose à noter, est l'utilisation du gestionnaire onload de l'image. Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.
-
functiondraw(){
- var ctx = document.getElementById('canvas').getContext('2d');
+
function draw() {
+ var ctx = document.getElementById('canvas').getContext('2d');
- // créer un nouvel objet image à utiliser comme modèle
- var img =newImage();
- img.src ='https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
- img.onload =function(){
+ // créer un nouvel objet image à utiliser comme modèle
+ var img = new Image();
+ img.src = 'canvas_createpattern.png';
+ img.onload = function() {
- // créer le modèle
- var ptrn = ctx.createPattern(img,'repeat');
- ctx.fillStyle = ptrn;
- ctx.fillRect(0,0,150,150);
+ // créer le modèle
+ var ptrn = ctx.createPattern(img, 'repeat');
+ ctx.fillStyle = ptrn;
+ ctx.fillRect(0, 0, 150, 150);
- }
-}
Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet.Cette valeur n'est pas affectée par la matrice de transformation.La valeur par défaut est 0.
+
Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet.Cette valeur n'est pas affectée par la matrice de transformation.La valeur par défaut est 0.
+
Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
Indique la taille de l'effet de floutage ;cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle.La valeur par défaut est 0.
+
Indique la taille de l'effet de floutage ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.
Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent.
-
Les propriétés shadowOffsetX et shadowOffsetY indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y;ces valeurs ne sont pas affectées par la matrice de transformation actuelle.Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite.La valeur par défaut est 0 pour les 2 propriétés.
+
Les propriétés shadowOffsetX et shadowOffsetY indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y; ces valeurs ne sont pas affectées par la matrice de transformation actuelle. Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite. La valeur par défaut est 0 pour les 2 propriétés.
-
La propriété shadowBlur indique la taille de l'effet de flou ;cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle.La valeur par défaut est 0.
+
La propriété shadowBlur indique la taille de l'effet de flou ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.
-
La propriété shadowColor est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ;par défaut, il est entièrement en noir transparent.
+
La propriété shadowColor est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement en noir transparent.
Nous allons regarder la propriété de la font(police de caratères) et la méthode fillText dans le chapitre suivant sur le dessin de texte.
+
Nous allons regarder la propriété de la font(police de caratères) et la méthode fillText dans le chapitre suivant sur le dessin de texte.
-
Règles de remplissage Canvas
+
Règles de remplissage Canvas
-
Lors de l'utilisation de fill (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non.Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué.
+
Lors de l'utilisation de fill (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué.
Deux valeurs sont possibles :
-
"nonzero": la règle non-zero, qui est la règle par défaut.
Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques.
-
La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.
-
Les étapes d'une animation basique
+
Les étapes d'une animation basique
Voici les étapes à suivre à chaque image dessinée (frame) :
@@ -34,7 +32,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques
Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu.
-
Contrôle d'une animation
+
Contrôle d'une animation
Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle for.
Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.
Cette exemple dessine une horloge animée qui affiche l'heure actuelle.
-
function clock(){
+
function clock(){
var now = new Date();
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
@@ -225,22 +221,20 @@ init();
window.requestAnimationFrame(clock);
Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une image du parc Yosemite National récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.
+
Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une image du parc Yosemite National récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.
-
var img = new Image();
+
var img = new Image();
// Variables utilisateur - les personnaliser pour changer l'image qui défile, ses
// directions, et la vitesse.
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+img.src = 'capitan_meadows_yosemite_national_park.jpg';
var CanvasXSize = 800;
var CanvasYSize = 200;
var speed = 30; // plus elle est basse, plus c'est rapide
@@ -324,16 +318,16 @@ function draw() {
En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables CanvasXZSize et CanvasYSize dans le code JavaScript.
Ceci ressemble beaucoup à l'élément <img>. La seule différence est qu'il n'y a pas les attributs src et alt. L'élément <canvas> a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le DOM. Quand les attributs width et height ne sont pas spécifiés, le canvas sera initialement large de 300 pixels et haut de 150 pixels. Les dimensions du canvas peuvent être modifiés par du CSS, mais l'image sera dessinée selon les valeurs width et height du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.
L'élément <canvas> peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.
-
Contenu de repli
Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.
Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.
L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs contextes de rendu, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte WebGL, qui utilise un contexte 3D ("experimental-webgl") inspiré de OpenGL ES.
+
L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs contextes de rendu, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte WebGL, qui utilise un contexte 3D ("experimental-webgl") inspiré de OpenGL ES.
Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une méthode nommée getContext(), qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. getContext() a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".
-
var canvas = document.getElementById('tutorial');
+
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode getContext().
-
Vérification de la prise en charge
Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode getContext(). Notre extrait de code ci-dessus se transforme donc en ceci :
-
var canvas = document.getElementById('tutorial');
+
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
@@ -80,14 +78,13 @@ if (canvas.getContext) {
} else {
// code pour le cas où canvas ne serait pas supporté
}
-
-
+
Un modèle basique
Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.
Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.
Ce code configure les valeurs globales utilisées par le reste du programme.
-
var canvas1 = document.createElement("canvas");
+
var canvas1 = document.createElement("canvas");
var canvas2 = document.createElement("canvas");
var gco = [ 'source-over','source-in','source-out','source-atop',
'destination-over','destination-in','destination-out','destination-atop',
@@ -65,7 +65,7 @@ var height = 340;
Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:
-
window.onload = function() {
+
window.onload = function() {
// lum en sRGB
var lum = {
r: 0.33,
@@ -86,7 +86,7 @@ var height = 340;
Et dans le code suivant, runComposite() gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.
-
function createCanvas() {
+
function createCanvas() {
var canvas = document.createElement("canvas");
canvas.style.background = "url("+op_8x8.data+")";
canvas.style.border = "1px solid #000";
@@ -162,7 +162,7 @@ function runComposite() {
Notre programme repose sur un certain nombbre de fonctions utilitaires:
-
var lightMix = function() {
+
var lightMix = function() {
var ctx = canvas2.getContext("2d");
ctx.save();
ctx.globalCompositeOperation = "lighter";
@@ -186,7 +186,7 @@ function runComposite() {
};
-
var colorSphere = function(element) {
+
var colorSphere = function(element) {
var ctx = canvas1.getContext("2d");
var width = 360;
var halfWidth = width / 2;
@@ -218,7 +218,7 @@ function runComposite() {
};
Dans tous nos exemples précédents, les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété globalCompositeOperation. En complément, la propriété clip nous permet de cacher les parties des formes que nous ne désirons pas.
-
-
globalCompositeOperation
+
globalCompositeOperation
Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.
Un détourage (clipping path en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.
+
Un détourage (clipping path en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.
+
+
Si nous comparons le détourage à la propriété globalCompositeOperation vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec source-in et source-atop. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte.
-
Dans le chapitre "dessiner des formes avec le canevas", nous n'avions mentionné que les méthodes stroke() et fill(), mais il y en a une troisième: clip() — elle permet de faire des détourages.
+
Dans le chapitre "dessiner des formes avec le canevas", nous n'avions mentionné que les méthodes stroke() et fill(), mais il y en a une troisième: clip() — elle permet de faire des détourages.
Il faut utiliser clip() plutot que closePath() pour fermer un chemin et enfaire un détourage.
-
Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente.
+
Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente.
-
Un exemple de clip
+
Un exemple de clip
Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).
-
function draw() {
+
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0, 0, 150, 150);
ctx.translate(75, 75);
@@ -96,16 +96,14 @@ function drawStar(ctx, r) {
}
Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à clip(). Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.
Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction drawStar(). Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.
Maintenant que nous avons défini notre environnement de canevas, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.
+
Maintenant que nous avons défini notre environnement de canevas, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.
La grille
-
Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou système de coordonnées. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin supérieur gauche de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à x pixels à partir de la gauche et à y pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.
+
Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou système de coordonnées. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin supérieur gauche de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à x pixels à partir de la gauche et à y pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.
+
+
Dessin de rectangles
-
Au contraire de SVG, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.
+
Au contraire de SVG, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.
-
Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
@@ -64,7 +63,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
La fonction fillRect() dessine un grand carré noir de 100 pixels de côté. La fonction clearRect() efface ensuite un carré de 60x60 pixels, et finalement, la fonction strokeRect() est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.
La première étape pour créer un trajet est d'appeler beginPath(). En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.
-
Note : lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé beginPath(), ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un moveTo(), indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.
+
+
Note : Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé beginPath(), ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un moveTo(), indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.
+
La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.
La troisième méthode, optionnelle, est l'appel à closePath(). Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.
-
Note : quand vous appelez fill(), toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler closePath(). Ce n'est pas le cas quand vous appelez stroke().
+
+
Note : Quand vous appelez fill(), toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler closePath(). Ce n'est pas le cas quand vous appelez stroke().
+
Dessin d'un triangle
Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :
function dessiner() {
var canevas = document.getElementById('canevas');
if (canevas.getContext) {
var ctx = canevas.getContext('2d');
@@ -137,7 +138,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction draw() que nous avons vue plus tôt.
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
@@ -181,12 +180,12 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
function dessiner() {
var canevas = document.getElementById('canevas');
if (canevas.getContext) {
var ctx = canevas.getContext('2d');
@@ -236,7 +233,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
Il commence par appeler beginPath() pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode moveTo() pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.
Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le closePath() pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.
Regardons plus en détail la méthode arc, qui prend six paramètres : x et y sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. rayon se passe d'explication. Les paramètres angleInitial etangleFinal définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre antihoraire est une valeur booléenne qui, lorsque true, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.
-
Note : les angles dans la fonction arc sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : radians = (Math.PI/180)*degres.
+
Note : Les angles dans la fonction arc sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : radians = (Math.PI/180)*degres.
L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.
-
Les deux boucles for bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant beginPath(). Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.
+
Les deux boucles for bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant beginPath(). Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.
Les coordonnées x et y devraient être claires. rayon et angleInitial sont fixés. L'angleFinal commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.
L'instruction pour le paramètre antihoraire a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction if fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.
-
Note : cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.
+
Note : Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.
Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par x et y, en utilisant les points de contrôle (cp1x, cp1y) et (cp2x, cp2y).
-
La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un point de contrôle (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.
+
La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un point de contrôle (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.
+
+
Les paramètres x et y de ces deux méthodes sont les coordonnées du point d'arrivée. cp1x et cp1y sont les coordonnées du premier point de contrôle, et cp2x et cp2y sont les coordonnées du second point de contrôle.
Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.
function dessiner() {
var canevas = document.getElementById('canevas');
if (canevas.getContext) {
var ctx = canevas.getContext('2d');
@@ -507,14 +498,11 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété fillStyle sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi()). L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.
Nous reviendrons sur fillStyle plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.
-
-
Objets Path2D
@@ -523,14 +511,14 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
{{domxref("Path2D.Path2D", "Path2D()")}}
-
Le constructor Path2D() retourne un objet Path2D nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de trajet SVG.
+
Le constructor Path2D() retourne un objet Path2D nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de trajet SVG.
new Path2D(); // objet trajet vide
new Path2D(trajet); // copie depuis un autre objet Path2D
new Path2D(d); // trajet depuis des données de trajet SVG
-
Toutes les méthodes de trajet telles que moveTo, rect, arc ou quadraticCurveTo, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets Path2D.
+
Toutes les méthodes de trajet telles que moveTo, rect, arc ou quadraticCurveTo, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets Path2D.
L'API Path2D ajoute aussi une manière de combiner des trajets en utilisant la méthode addPath. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.
@@ -543,16 +531,14 @@ new Path2D(d); // trajet depuis des données de trajet SVG
Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets Path2D, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API Path2D, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet Path2D à utiliser au lieu du trajet en cours. Ici, stroke et fill sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.
function dessiner() {
var canevas = document.getElementById('canvas');
if (canevas.getContext){
var ctx = canevas.getContext('2d');
@@ -569,13 +555,13 @@ new Path2D(d); // trajet depuis des données de trajet SVG
Une autre fonctionnalité puissante de la nouvelle API Path2D de canevas est l'utilisation de données de trajet SVG pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.
+
Une autre fonctionnalité puissante de la nouvelle API Path2D de canevas est l'utilisation de données de trajet SVG pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.
-
Le trajet se déplacera au point (M10 10) et se déplacera alors de 80 points horizontalement vers la droite (h 80), ensuite de 80 points vers le bas (v 80), puis de 80 points vers la gauche (h -80), et reviendra alors au départ (z). Vous pouvez voir cet exemple sur la page du constructeur Path2D.
+
Le trajet se déplacera au point (M10 10) et se déplacera alors de 80 points horizontalement vers la droite (h 80), ensuite de 80 points vers le bas (v 80), puis de 80 points vers la gauche (h -80), et reviendra alors au départ (z). Vous pouvez voir cet exemple sur la page du constructeur Path2D.
Après avoir vu comment appliquer les styles et les couleurs dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.
+
Après avoir vu comment appliquer les styles et les couleurs dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.
Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut.Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :
+
Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :
Le style de texte actuel utilisé lors du dessin du texte.Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}.La police par défaut est 10px sans-serif.
+
Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}. La police par défaut est 10px sans-serif.
Paramètre d'alignement du texte.Valeurs possibles : start(début), end(fin), left(gauche), right(droite) ou center(centre).La valeur par défaut est start.
+
Paramètre d'alignement du texte. Valeurs possibles : start(début), end(fin), left(gauche), right(droite) ou center(centre). La valeur par défaut est start.
Paramètre d'alignement de base.Valeurs possibles : top(haut), hanging(suspendu), middle(moyen), alphabetic(alphabétique), ideographic(idéographique), bottom(en bas).La valeur par défaut est alphabetic.
+
Paramètre d'alignement de base. Valeurs possibles : top(haut), hanging(suspendu), middle(moyen), alphabetic(alphabétique), ideographic(idéographique), bottom(en bas). La valeur par défaut est alphabetic.
Retourne un objet {{domxref("TextMetrics")}} contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.
+
Retourne un objet {{domxref("TextMetrics")}} contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.
-
L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.
+
L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.
-
functiondraw(){
- var ctx = document.getElementById('canvas').getContext('2d');
- var text = ctx.measureText('foo');// objet TextMetrics
- text.width;// 16;
-}
+
function draw() {
+ var ctx = document.getElementById('canvas').getContext('2d');
+ var text = ctx.measureText('foo'); // objet TextMetrics
+ text.width; // 16;
+}
-
Notes spécifiques à Gecko
+
Notes spécifiques à Gecko
-
Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas.Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.
+
Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas. Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.
L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.
+
L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.
Moyen de repli
Le contenu à l'intérieur d'un tag <canvas> ... </canvas> peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur html5accessibility.com demontre comment cela peut être fait.
-
<canvas>
+
<canvas>
<h2>Shapes</h2>
<p>A rectangle with a black border.
In the background is a pink circle.
@@ -29,7 +29,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility
Accessible Rich Internet Applications (ARIA) (≈ Les applications Internet Accessibles Riches) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir ARIA et les techniques ARIA pour plus d'informations.
Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple.
-
<canvas id="canvas"></canvas>
+
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
@@ -66,7 +66,7 @@ canvas.addEventListener('mousemove', function(event) {
La méthode addHitRegion() accepte aussi une option de control pour envoyer des événement vers un élément (c'est un enfant des canvas):
-
ctx.addHitRegion({control: element});
+
ctx.addHitRegion({control: element});
Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi codepen demo.
<canvas> est un nouvel élément HTML qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement JavaScript). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire pas si simples). Les images à droite montrent quelques exemples d'implémentations utilisant <canvas> que nous verrons plus tard dans ce tutoriel.
-
<canvas> est un nouvel élément HTML qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement JavaScript). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire pas si simples). Les images à droite montrent quelques exemples d'implémentations utilisant <canvas> que nous verrons plus tard dans ce tutoriel.
+
Ce tutoriel explique comment utiliser l'élément <canvas> pour dessiner des graphiques 2D, en commençant par les bases. Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.
-
Ce tutoriel explique comment utiliser l'élément <canvas> pour dessiner des graphiques 2D, en commençant par les bases.Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.
+
D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <canvas> a depuis été implémenté dans les navigateurs. Aujourd'hui, tous les principaux navigateurs le prennent en charge.
-
D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <canvas> a depuis été implémenté dans les navigateurs.Aujourd'hui, tous les principaux navigateurs le prennent en charge.
+
Avant de commencer
-
Avant de commencer
+
L'utilisation de l'élément <canvas> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de HTML et JavaScript. L'élément <canvas> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de canvas est 300 px × 150 px (largeur × hauteur). Mais les tailles personnalisées peuvent être définies à l'aide des propriétés HTMLheight et width. Afin de dessiner des graphiques sur canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.
-
L'utilisation de l'élément <canvas> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de HTML et JavaScript. L'élément <canvas> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de canvas est 300 px × 150 px (largeur × hauteur).Mais les tailles personnalisées peuvent être définies à l'aide des propriétés HTMLheight et width.Afin de dessiner des graphiques sur canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.
L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.
Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.
Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.
-
ctx.drawImage(myImage, 0.3, 0.5);
+
ctx.drawImage(myImage, 0.3, 0.5);
Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.
Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque jeu où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié.
Les transformations CSS sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.
-
var scaleX = window.innerWidth / canvas.width;
+
var scaleX = window.innerWidth / canvas.width;
var scaleY = window.innerHeight / canvas.height;
var scaleToFit = Math.min(scaleX, scaleY);
@@ -87,7 +85,7 @@ stage.style.transform = "scale(" + scaleToFit + ")";
Si le canvas n'a pas besoin de transparence, ajouter l'attribut moz-opaque dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.
Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).
Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.
Faire attention aux bibliothèques physiques lourdes.
Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels de notre canevas. Avec l'objet ImageData, vous pouvez directement lire et écrire dans le tableau de données de l'image, pour manipuler les pixels un par un. Nous verrons également comment le lissage (anticrénelage) de l'image peut être contrôlé et comment sauvegarder des images depuis votre canevas.
Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut Uint8ClampedArray.length :
-
var nbOctets = imageData.data.length;
+
var nbOctets = imageData.data.length;
Création d'un objet ImageData
Pour créer un nouvel objet ImageData vierge, vous pouvez utiliser la méthode {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode createImageData() :
-
var monImageData = ctx.createImageData(largeur, hauteur);
+
var monImageData = ctx.createImageData(largeur, hauteur);
Cela crée un nouvel objet ImageData avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.
Vous pouvez aussi créer un nouvel objet ImageData ayant les mêmes dimensions que celles de l'objet indiqué par autreImageData. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. Cela ne copie pas les données d'image !
-
var monImageData = ctx.createImageData(autreImageData);
+
var monImageData = ctx.createImageData(autreImageData);
Obtention des données pixel pour un contexte
Pour obtenir un objet ImageData contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode getImageData() :
-
var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);
+
var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);
Cette méthode retourne un objet ImageData représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (left,top) (gauche,haut), (left+width, top) (gauche+largeur, haut), (left, top+height) (gauche, haut+hauteur) et (left+width, top+height) (gauche+largeur, haut+hauteur). Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.
-
Note : Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet ImageData résultant.
+
Note : Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet ImageData résultant.
Dans cet exemple, nous utilisons la méthode getImageData() pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par layerX et layerY, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que getImageData() nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <div> pour afficher la couleur.
+
Dans cet exemple, nous utilisons la méthode getImageData() pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par layerX et layerY, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que getImageData() nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <div> pour afficher la couleur.
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.src = './assets/rhino.jpg';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
img.onload = function() {
@@ -97,33 +93,31 @@ canvas.addEventListener('mousemove', pick);
Peinture des données pixel dans un contexte
-
Vous pouvez utiliser la méthode putImageData() pour peindre les données pixel dans un contexte :
+
Vous pouvez utiliser la méthode putImageData() pour peindre les données pixel dans un contexte :
-
ctx.putImageData(monImageData, dx, dy);
+
ctx.putImageData(monImageData, dx, dy);
Les paramètres dx et dy indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.
Par exemple, pour peindre l'image entière représentée par monImageData dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :
-
ctx.putImageData(monImageData, 0, 0);
+
ctx.putImageData(monImageData, 0, 0);
Niveaux de gris et inversion de couleurs
Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de putImageData(). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale (niveaux de gris) fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir Niveaux de gris sur Wikipedia pour plus d'informations.
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+
var img = new Image();
+img.src = './assets/rhino.jpg';
img.onload = function() {
dessiner(this);
};
@@ -166,20 +160,19 @@ function dessiner(img) {
Zoom et anticrénelage
-
A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails.
+
A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails.
-
Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous.Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons.Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.
+
Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.
Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs.Vous pouvez basculer la case à cocher pour voir l'effet de la propriété imageSmoothingEnabled (qui a besoin de préfixes pour différents navigateurs).
+
Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriété imageSmoothingEnabled (qui a besoin de préfixes pour différents navigateurs).
L' {{domxref ("HTMLCanvasElement")}} fournit une méthode toDataURL (), utile lors de l'enregistrement d'images.Il retourne un URI de données contenant une représentation de l'image dans le format spécifié par le paramètre de type (par défaut en PNG).L'image renvoyée est dans une résolution de 96 dpi.
+
L' {{domxref ("HTMLCanvasElement")}} fournit une méthode toDataURL (), utile lors de l'enregistrement d'images. Il retourne un URI de données contenant une représentation de l'image dans le format spécifié par le paramètre de type (par défaut en PNG ). L'image renvoyée est dans une résolution de 96 dpi.
Crée une image JPG.En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.
+
Crée une image JPG. En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.
-
Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.
+
Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.
-
Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.
+
Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.
Précédemment dans ce tutoriel, nous avons étudié la grille du canevas et le système de coordonnées. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.
+
Précédemment dans ce tutoriel, nous avons étudié la grille du canevas et le système de coordonnées. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.
Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.
-
function draw() {
+
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0, 0, 150, 150); // Dessine un rectangle avec les réglages par défaut
@@ -60,11 +60,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
ctx.fillRect(60, 60, 30, 30); // Dessine un rectangle avec les réglages restaurés
}
La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.
Lorsque la deuxième instruction restore() est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.
La première des méthodes de transformation que nous examinerons est translate (). Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.
+
La première des méthodes de transformation que nous examinerons est translate (). Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.
Déplace la toile et son origine sur la grille. x indique la distance horizontale du déplacement, et y indique à quelle distance déplacer la grille verticalement.
+
+
C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode restore que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.
Dans la fonction draw (), nous appelons la fonction fillRect () neuf fois en utilisant deux boucles for . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à fillRect () utilise les mêmes coordonnées à chaque fois, en s'appuyant sur translate () pour ajuster la position du dessin.
-
function draw() {
+
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
@@ -104,23 +104,24 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
}
}
Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.
+
+
Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode translate ().
Dans cet exemple, nous utiliserons la méthode rotate () pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de translate ().
-
Rappel : Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : radians = (Math.PI/180)*degrees.
+
Note : Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : radians = (Math.PI/180)*degrees.
-
function draw() {
+
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// rectangles de gauche, rotation depuis l'origine du canevas
@@ -163,13 +164,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.
Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle.
-
function draw() {
+
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// dessine un rectangle simple, mais le met à l'échelle.
@@ -203,13 +202,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
ctx.fillText('MDN', -135, 120);
}
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
-
Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par :
-
-
-
-
Si l'un des arguments est infini, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.
+
Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par :
+
Si l'un des arguments est infini, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.
Jusqu'à présent, nous avons créé nos propres formes et styles appliqués. L'une des fonctionnalités les plus intéressantes de <canvas> est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des sprites dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !
+
Jusqu'à présent, nous avons créé nos propres formes et styles appliqués. L'une des fonctionnalités les plus intéressantes de <canvas> est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des sprites dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !
L'importation d'images dans un canevas se déroule en deux étapes :
@@ -125,22 +125,20 @@ function getMyVideo() {
-
Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine <svg>.
+
Note : Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine <svg>.
Exemple : un graphique linéaire simple
Dans l'exemple suivant, nous utiliserons une image externe comme fond pour un petit graphique linéaire. L'utilisation d'images de fond peut rendre vos scripts considérablement plus légers puisqu'il n'est alors pas nécessaire de dessiner des arrières-plans élaborés. Une seule image est utilisée ici, on utilise donc le gestionnaire d'évènement load de l'objet image pour lancer les instructions de dessin. La méthode drawImage() place l'image de fond aux coordonnées (0,0), soit le coin supérieur gauche du canevas.
function draw() {
@@ -178,18 +176,16 @@ function draw() {
Dans cet exemple, nous utiliserons une image comme fond d'écran en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle qui place l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle for s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels.
-
Note : les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.
+
Note : Les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.
Un {{jsxref("Booléen")}} facultatif qui, si à true(vrai), indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.
Exemples
-
En utilisant la méthode arc
+
En utilisant la méthode arc
Voici un code simple permettant de dessiner un cercle .
HTML
-
<canvas id="canvas"></canvas>
+
<canvas id="canvas"></canvas>
JavaScript
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
-ctx.stroke();
+ctx.stroke();
Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :
Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ).
+
Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ).
La courbe débute au point spécifié par moveTo() : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).
Un problème classique avec clearRect est qu'il peut apparaître comme ne fonctionnant pas si l'on n'utilise pas les trajets de façon appropriée. N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé clearRect.
+
Un problème classique avec clearRect est qu'il peut apparaître comme ne fonctionnant pas si l'on n'utilise pas les trajets de façon appropriée. N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé clearRect.
La méthode CanvasRenderingContext2D.createLinearGradient() de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.
-
+
Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.
La coordonnée y dans le canvas de destination où placer le coin supérieur gauche de l'image source.
dLargeur
La largeur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.
-
dHauteur
+
dHauteur
La hauteur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.
sx
La coordonnée x du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.
A partir de {{geckoRelease("5.0")}} drawImage() gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes.
Spécifier une image null ou undefined en appellant drawImage() correctement retournera une exception TYPE_MISMATCH_ERR à partir de {{geckoRelease("5.0")}}.
Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas.
-
Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans corrompre le canvas.
-
Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans corrompre le canevas.
+
Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans corrompre le canvas.
+
Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans corrompre le canevas.
Ceci est seulement un fragment de code simple dessinant une ellipse.
@@ -62,10 +62,9 @@ ctx.stroke();
Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
@@ -92,19 +91,17 @@ edit.addEventListener('click', function() {
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
-
-
{{ EmbedLiveSample('Playable_code', 700, 360) }}
+
{{ EmbedLiveSample('code_jouable', 700, 360) }}
Un exemple fillStyle avec les boucles for
Dans cet exemple, nous allons utiliser deux boucles for pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables i et j pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop.
La propriété CanvasRenderingContext2D.font de l'API Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de police CSS. La police par défaut est 10px sans-serif.
+
La propriété CanvasRenderingContext2D.font de l'API Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de police CSS. La police par défaut est 10px sans-serif.
La méthode CanvasRenderingContext2D.getImageData() de l'API Canvas 2D retourne un objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions (sx, sy) et qui possède des attributs : largeur (sw) et hauteur (sh). Cette méthode n'est pas affectée par la matrice de transformation du canevas.
-
Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.
+
Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.
Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez Manipulation de pixels avec canvas et l'objet {{domxref("ImageData")}}.
+
Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez Manipulation de pixels avec canvas et l'objet {{domxref("ImageData")}}.
var canevas = document.getElementById('canevas');
+
var canevas = document.getElementById('canevas');
var ctx = canevas.getContext('2d');
var zoneTexte = document.getElementById('code');
var effacement = document.getElementById('effacement');
@@ -98,11 +97,10 @@ modifier.addEventListener('click', function() {
zoneTexte.addEventListener('input', dessinerCanevas);
window.addEventListener('load', dessinerCanevas);
-
-
{{ EmbedLiveSample('Playable_code', 700, 380) }}
+
{{ EmbedLiveSample('code_jouable', 700, 380) }}
-
Un exemple de globalAlpha
+
Un exemple de globalAlpha
Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle for dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image.
Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.
-
Exemples
+
exemples
-
Utilisation de la propriété imageSmoothingEnabled
+
Désactiver le lissage d'image
-
Ceci est juste un simple fragment de code utilisant la propriété imageSmoothingEnabled sur une image mise à l'échelle.
+
Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé.
Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :
+
Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :
ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle
ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50
-
Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le tutoriel canvas a davantage d'informations, d'exemples et de ressources également.
+
Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le tutoriel canvas a davantage d'informations, d'exemples et de ressources également.
Dessin de rectangles
@@ -162,7 +162,7 @@ ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d'
Scrolls the current path or a given path into the view.
{{domxref("CanvasRenderingContext2D.clip()")}}
-
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
+
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
var canevas = document.getElementById('canevas');
+
var canevas = document.getElementById('canevas');
var ctx = canevas.getContext('2d');
var zoneTexte = document.getElementById('code');
var effacer = document.getElementById('effacer');
@@ -99,11 +98,10 @@ modifier.addEventListener('click', function() {
zoneTexte.addEventListener('input', dessinerCanevas);
window.addEventListener('load', dessinerCanevas);
-
-
{{ EmbedLiveSample('Playable_code', 700, 360) }}
+
{{ EmbedLiveSample('code_jouable', 700, 360) }}
-
Un exemple de lineCap
+
Un exemple de lineCap
Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété lineCap. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides.
@@ -133,11 +131,9 @@ for (var i = 0; i < lineCap.length; i++) {
}
var ctx = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round', 'bevel', 'miter'];
@@ -94,7 +92,7 @@ for (let i = 0; i < lineJoin.length; i++) {
}
La méthode CanvasRenderingContext2D.measureText() renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).
La méthode setLineDash() de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.
-
Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.
+
Note : Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
@@ -86,11 +85,10 @@ edit.addEventListener('click', function() {
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
-
-
{{ EmbedLiveSample('Playable_code', 700, 360) }}
+
{{ EmbedLiveSample('code_jouable', 700, 360) }}
-
Un exemple strokeStyle
+
Un exemple strokeStyle
Cet exemple utilise la propriété strokeStyle pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés.
@@ -107,13 +105,11 @@ for (var i = 0; i < 6; i++) {
}
Retourne l'{{domxref("Element")}} immédiatement avant celui spécifié dans la liste des enfants de son parent, ou null si l'élément spécifié est le premier de la liste.
-
Méthodes
+
Méthodes
Hérite des méthodes de son parent {{domxref("Node")}}, et implémente les interfaces {{domxref("ChildNode")}} et {{domxref("NonDocumentTypeChildNode")}}.
Renvoie une {{domxref ("DOMString")}} (chaîne de caractères) contenant la partie de CharacterData.data de la longueur spécifiée et commençant au point désigné.
La méthode clearInterval(), rattachée au mixin {{domxref("WindowOrWorkerGlobalScope")}}, permet d'annuler une action répétée minutée initiée via un appel à {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}.
Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur.
-
// client service worker (par exemple un document)
+
// client service worker (par exemple un document)
function sendMessage(message) {
return new Promise(function(resolve, reject) {
// Notez que c'est la version du ServiceWorker.postMessage
@@ -86,7 +86,7 @@ self.addEventListener("message", function(e) {
La méthode get() de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}.
La méthode matchAll() de l'interface {{domxref("Clients")}} retourne une Promesse pour une liste de service worker clients. Inclure le paramètre options permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si options n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker.
+
La méthode matchAll() de l'interface {{domxref("Clients")}} retourne une Promesse pour une liste de service worker clients. Inclure le paramètre options permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si options n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker.
L'objet option vous permet de définir les options pour l'opération. Les options disponibles sont :
+
L'objet option vous permet de définir les options pour l'opération. Les options disponibles sont :
includeUncontrolled: Un {{domxref("Boolean")}} — défini à true, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est false.
type: Défini le type de client que vous voulez observer. Les types disponibles sont window, worker, sharedworker, et all. La valeur par défaut est all.
Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon.
-
+
Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon.
Le presse-papiers est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications.
- Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies.
+
+
Note : Le presse-papiers est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies.
Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces.
-
L’interface Clipboard implémente l’API clipboard, qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web.
+
L’interface Clipboard implémente l’API clipboard, qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web.
Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}.
Les appels aux méthodes de l’objet Clipboard échoueront si l’utilisateur ou l’utilisatrice n’a pas accordé les permissions requises en utilisant l’API permissions, et la permission "clipboard-read" ou "clipboard-write" selon le besoin.
-
Note : En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails.
+
Note : En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails.
Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé.
Par exemple, Firefox ne supporte pas encore les permissions "clipboard-read" et "clipboard-write", et l’accès aux méthodes pour lire et modifier le contenu du presse-papiers sont restreintes d’autres façons.
-
Pour les WebExtensions, vous pouvez demander les permissions "clipboardRead" et "clipboardWrite" afin de pouvoir utiliser clipboard.readText() et clipboard.writeText(). Les {{Glossary("Content Script", "scripts de contenu")}} appliqués à des sites HTTP n’ont pas accès à l’objet Clipboard. Voir extensions in Firefox 63.
+
Pour les WebExtensions, vous pouvez demander les permissions "clipboardRead" et "clipboardWrite" afin de pouvoir utiliser clipboard.readText() et clipboard.writeText(). Les {{Glossary("Content Script", "scripts de contenu")}} appliqués à des sites HTTP n’ont pas accès à l’objet Clipboard. Voir extensions in Firefox 63.
De plus, {{domxref("Clipboard.read", "read()")}} et {{domxref("Clipboard.write", "write()")}} sont désactivées par défaut et requièrent de changer une préférence pour les activer. Consultez les tables de compatibilité de chaque méthode avant de les utiliser.
La methode write() de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller.
+
La methode write() de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller.
Avant de pouvoir écrire dans le presse-papier, vous devez utiliser Permissions API pour avoir l'autorisation "clipboard-write".
La méthode writeText() de l’interface {{domxref("Clipboard")}} écrit le texte spécifié dans le presse-papiers du système.
-
Note : La spécification requiert que l’API Permissions soit utilisée pour obtenir la permission "clipboardWrite" avant d’écrire dans le presse-papiers. Cependant, les prérequis exacts varient de navigateur en navigateur, car c’est une API récente. Consultez la {{anch("Browser compatibility", "table de compatibilité")}} et {{SectionOnPage("/docs/Web/API/Clipboard", "Clipboard availability")}} pour plus de détails.
+
Note : La spécification requiert que l’API Permissions soit utilisée pour obtenir la permission "clipboardWrite" avant d’écrire dans le presse-papiers. Cependant, les prérequis exacts varient de navigateur en navigateur, car c’est une API récente. Consultez la {{anch("Browser compatibility", "table de compatibilité")}} et {{SectionOnPage("/docs/Web/API/Clipboard", "Clipboard availability")}} pour plus de détails.
L'API Clipboard (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'API Permissions : la permission clipboard-write est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission clipboard-read doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers.
-
-
Note : Cette API n'est pas disponible dans les Web Workers (elle n'est pas exposée via {{domxref("WorkerNavigator")}}).
+
+
Note : Cette API n'est pas disponible dans les Web Workers (elle n'est pas exposée via {{domxref("WorkerNavigator")}}).
Cette API est conçue pour remplacer l'accès au presse-papiers précédemment proposé via {{domxref("document.execCommand()")}}.
Un événement CloseEvent est envoyé au client utilisant une WebSocket lorsque la connexion est fermée. Cet événement est envoyé au listener indiqué par l'attribut onclose de la WebSocket.
Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.
Renvoie les caractères générés par la méthode d'entrée qui a relevé l'événement ;cela varie en fonction du type d'événement ayant généré l'objet CompositionEvent.
+
Renvoie les caractères générés par la méthode d'entrée qui a relevé l'événement ; cela varie en fonction du type d'événement ayant généré l'objet CompositionEvent.
Renvoie les paramètres régionaux de la méthode de saisie actuelle (par exemple, les paramètres régionaux de disposition du clavier si la composition est associée à IME).
+
Renvoie les paramètres régionaux de la méthode de saisie actuelle (par exemple, les paramètres régionaux de disposition du clavier si la composition est associée à IME).
Plus précisément, dans les navigateurs, appeler console.assert() avec une condition fausse affichera le message dans la console sans interrompre l'éxecution du code suivant. Dans les versions inférieure à la v10 de Node.js, cependant, une assertion fausse lèvera une exception AssertionError. Cette différence de comportement a été corrigée par la v10 de Node et console.assert() se comporte maintenant de la même façon dans Node et dans les navigateurs.
Si ce paramètre est renseigné, count() affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé.
-
S'il est omis, count() affiche le nombre de fois que la fonction a été appelée sur cette ligne.
+
Une chaîne de caractères. Si ce paramètre est renseigné, count() affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, count() affiche le nombre de fois que la fonction a été appelée sur cette ligne.
Spécifications
@@ -103,8 +101,4 @@ console.count("alice");
Compatibilité des navigateurs
-
{{Compat("api.Console.count")}}
-
-
-
-
+
{{Compat("api.Console.count")}}
\ No newline at end of file
diff --git a/files/fr/web/api/console/countreset/index.html b/files/fr/web/api/console/countreset/index.html
index 2a5106ebfd..7cf74195e7 100644
--- a/files/fr/web/api/console/countreset/index.html
+++ b/files/fr/web/api/console/countreset/index.html
@@ -25,21 +25,21 @@ translation_of: Web/API/Console/countReset
Si le paramètre label à été spécifié :
-
counter-name: 0
+
counter-name: 0
Si aucun label n'as été specifié
-
default: 0
+
default: 0
Warnings
-
Si label est specifié mais n'existe pas countReset() renvoie cet avertissement :
+
Si label est specifié mais n'existe pas countReset() renvoie cet avertissement :
-
Counter "counter-name" doesn’t exist.
+
Counter "counter-name" doesn’t exist.
Si label n'est pas specifé et que count() n'as pas encore été appellé countReset() renvoie cette avertissement :
Affiche un message dans la console web, avec le niveau de log "debug". Le message est affiché uniquement si la console est configurée pour afficher les messages de type debug.
+
Affiche un message dans la console web, avec le niveau de log "debug". Le message est affiché uniquement si la console est configurée pour afficher les messages de type debug.
{{h3_gecko_minversion("Using groups in the console", "9.0")}}
-
Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants.Pour créer un nouveau bloc imbriqué, appelez console.group ().La méthode console.groupCollapsed () est similaire, mais le nouveau bloc est réduit et nécessite de cliquer sur un bouton de divulgation pour le lire.
+
Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants. Pour créer un nouveau bloc imbriqué, appelez console.group (). La méthode console.groupCollapsed () est similaire, mais le nouveau bloc est réduit et nécessite de cliquer sur un bouton de divulgation pour le lire.
Note : De Gecko 9 jusqu'à Gecko 51, la méthode groupCollapsed() n'était pas identique à group(). Les groupes réduits sont entièrement pris en charge depuis Gecko 52. Voir {{bug("1088360")}}.
Pour sortir du groupe courant, appeler console.groupEnd(). Par exemple, étant donné ce code :
-
console.log("This is the outer level");
-console.group();
-console.log("Level 2");
-console.group();
-console.log("Level 3");
-console.warn("More of level 3");
-console.groupEnd();
-console.log("Back to level 2");
-console.groupEnd();
-console.log("Back to the outer level");
+
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.log("Back to the outer level");
-
La sortie ressemble à ceci :
+
La sortie ressemble à ceci :
-
+
-
Pour plus de détail, se reporter à l'article Using groups in the console dans la documentation sur la {{domxref("console")}}.
+
Pour plus de détail, se reporter à l'article Using groups in the console dans la documentation sur la {{domxref("console")}}.
Crée un nouveau groupe intégré dans la console Web. Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit.L'utilisateur devra utiliser le bouton de divulgation à côté pour le développer, en révélant les entrées créées dans le groupe.
+
Crée un nouveau groupe intégré dans la console Web. Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit. L'utilisateur devra utiliser le bouton de divulgation à côté pour le développer, en révélant les entrées créées dans le groupe.
-
Appellez {{domxref("console.groupEnd()")}} pour revenir au groupe parent.
+
Appellez {{domxref("console.groupEnd()")}} pour revenir au groupe parent.
-
Voir Using groups in the console dans la documentation de {{domxref("console")}} pour plus de détails et des exemples.
+
Voir Using groups in the console dans la documentation de {{domxref("console")}} pour plus de détails et des exemples.
Quitte le groupe en ligne actuel dans la console Web. Voir Using groups in the console dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples.
+
Quitte le groupe en ligne actuel dans la console Web. Voir Using groups in the console dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples.
L'objet console donne accès à la console de débogage du navigateur (par exemple., la Console Web dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.
+
L'objet console donne accès à la console de débogage du navigateur (par exemple., la Console Web dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.
-
La console est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console.Par exemple :
+
La console est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple :
-
console.log("Failed to open the specified link")
+
console.log("Failed to open the specified link")
Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'objet console et donne quelques {{anch("Usage", "exemples d'utilisation")}}.
@@ -35,7 +35,7 @@ translation_of: Web/API/Console
-
Note :À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.
+
Note : À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.
Crée un nouveau groupe en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à group(). Pour revenir au niveau précédent, appeler groupEnd().
+
Crée un nouveau groupe en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à group(). Pour revenir au niveau précédent, appeler groupEnd().
{{domxref("Console.groupCollapsed()")}}
-
Crée un nouveau groupe en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à group() , cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir. Pour revenir au niveau précédent, appeler groupEnd().
+
Crée un nouveau groupe en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à group() , cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir. Pour revenir au niveau précédent, appeler groupEnd().
Affiche un message d'information. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
+
Affiche un message d'information. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
{{domxref("Console.log()")}}
-
Permet d'afficher des messages dans la console. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
+
Permet d'afficher des messages dans la console. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'outil performance Firefox).
+
Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'outil performance Firefox).
{{domxref("Console.table()")}}
Affiche des données tabulaires comme un tableau.
{{domxref("Console.time()")}}
-
Démarre un chronomètre que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page.
+
Démarre un chronomètre que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page.
{{domxref("Console.timeEnd()")}}
-
Arrête le chronomètre spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.
+
Arrête le chronomètre spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.
Affiche un message d'avertissement. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
+
Affiche un message d'avertissement. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
-
Exemples d'utilisation
+
Exemples d'utilisation
-
Afficher du texte dans la console
+
Afficher du texte dans la console
La fonction la plus utilisée de la console est d'afficher du texte ou autres données. Il y a quatre sortes d'affichages que vous pouvez générer, en utilisant les méthodes {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, et {{domxref("console.error()")}}. Chacune de ces méthodes génére un affichage différent dans la console, et vous pouvez utiliser les fonctions de filtrage du navigateur pour voir uniquement les types de sortie qui vous intéressent.
@@ -115,7 +115,7 @@ console.info("My first car was a", car, ". The object is: ", someObject);
Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substitution. Lorsque l'on passe en argument une chaîne à l'une des méthodes qui acceptent des chaînes de caractère, on peut utiliser ces caractères de substitution :
-
+
caractère de substitution
@@ -127,7 +127,7 @@ console.info("My first car was a", car, ". The object is: ", someObject);
%d or %i
-
Affiche un entier. Le formatage des nombres est supporté, par exemple console.log ("Foo% .2d", 1.1) affichera le nombre sous forme de deux chiffres significatifs avec un 0 : Foo 01
+
Affiche un entier. Le formatage des nombres est supporté, par exemple console.log ("Foo% .2d", 1.1) affichera le nombre sous forme de deux chiffres significatifs avec un 0 : Foo 01
%s
@@ -160,23 +160,23 @@ console.info("My first car was a", car, ". The object is: ", someObject);
Vous pouvez utiliser l'instruction "%c" pour appliquer du style CSS à l'affichage de la console :
Note :Un certain nombre de propriétés CSS sont supportées par ce style;vous devriez expérimenter et voir lesquels s'avèrent utiles.
+
Note : Un certain nombre de propriétés CSS sont supportées par ce style; vous devriez expérimenter et voir lesquels s'avèrent utiles.
{{h3_gecko_minversion("Using groups in the console", "9.0")}}
Vous pouvez utiliser des groupes imbriqués pour vous aider à vous repérer dans l'affichage. Pour créer un nouveau bloc, appelez console.group(). La méthode console.groupCollapsed() est similaire, mais elle crée un bloc qui sera réduit.
-
Note : "Collapsed groups" ne sont pas supportés pour l'instant dans Gecko; La méthode groupCollapsed() est la même que group() en ce moment.
+
+
Note : "Collapsed groups" ne sont pas supportés pour l'instant dans Gecko; La méthode groupCollapsed() est la même que group() en ce moment.
+
-
Pour quitter le groupe dans lequel on est, appeler console.groupEnd(). Par exemple, examinez ce code :
+
Pour quitter le groupe dans lequel on est, appeler console.groupEnd(). Par exemple, examinez ce code :
console.log("This is the outer level");
console.group();
@@ -192,7 +192,7 @@ console.debug("Back to the outer level");
affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :
-
+
Notez que le nom du chronomètre est affiché deux fois, à son départ et quand il se termine.
-
Note: Il est important de noter que si vous vous servez de ceci pour enregistrer les durées du traffic réseau, le chronomètre renverra le temps total d'échanges, alors que les durées affichées dans l'onglet network représente seulement la durée à la réception du header. Si vous avez activer l'enregistrement de réponse du body, le temps listé pour la réponse du header et du body devrait correspondre à ce qu'affiche la sortie de la console.
+
+
Note: Il est important de noter que si vous vous servez de ceci pour enregistrer les durées du traffic réseau, le chronomètre renverra le temps total d'échanges, alors que les durées affichées dans l'onglet network représente seulement la durée à la réception du header. Si vous avez activer l'enregistrement de réponse du body, le temps listé pour la réponse du header et du body devrait correspondre à ce qu'affiche la sortie de la console.
+
Traces d'appel
@@ -229,9 +231,9 @@ function foo() {
L'affichage dans la console ressemblera à ceci :
-
+
-
Spécification
+
Spécification
@@ -251,18 +253,18 @@ function foo() {
Notes
-
Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox.
-
Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte.À partir de {{Gecko ("12.0")}}, la sortie est mise en cache jusqu'à ce que la console Web soit ouverte, puis affichée à ce moment-là.
-
Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni parFirebug.
+
Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox.
+
Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte. À partir de {{Gecko ("12.0")}}, la sortie est mise en cache jusqu'à ce que la console Web soit ouverte, puis affichée à ce moment-là.
+
Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni par Firebug.
Commence l'enregistrement d'un profil de performance (par exemple, l'outil performance de Firefox).
+
Commence l'enregistrement d'un profil de performance (par exemple, l'outil performance de Firefox).
Vous pouvez éventuellement fournir un argument pour nommer le profil, ce qui vous permet d'arrêter uniquement ce profil si plusieurs profils sont enregistrés. Voir {{domxref("Console.profileEnd()")}} pour voir comment cet argument est interprété.
L'appel de cet API immédiatement après console.profile() peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un setTimeout avec un délai d'au-moins 5 ms. Voir bug #1173588.
+
Attention : L'appel de cet API immédiatement après console.profile() peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un setTimeout avec un délai d'au-moins 5 ms. Voir bug #1173588.
La méthode profileEnd arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}.
Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console.
+
Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console.
-
Voir Timers dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.
+
Voir Timers dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.
Nom qui identifiera le nouveau "timer". Il faut utiliser le même nom pour {{ domxref("console.timeEnd()") }} pour arrêter le "timer" et afficher le temps dans la console.
Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fermer la première pop-up d'alerte, puis le temps que l'utilisateur a pris pour fermer la seconde :
-
+
Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par timeLog() et lorsque le timer est arrêté
Ajoute un seul marqueur à l'outil Performance ou Waterfall du navigateur. Cela vous permet de corréler un point de votre code avec les autres événements enregistrés dans la chronologie, tels que les événements de mise en page et de peinture.
+
Ajoute un seul marqueur à l'outil Performance ou Waterfall du navigateur. Cela vous permet de corréler un point de votre code avec les autres événements enregistrés dans la chronologie, tels que les événements de mise en page et de peinture.
Vous pouvez éventuellement fournir un argument pour étiqueter l'horodatage, et cette étiquette sera ensuite affichée à côté du marqueur.
L'API Console fournit des fonctionnalités permettant aux développeurs d'effectuer des tâches de débogage, telles que la journalisation des messages ou les valeurs des variables à des points définis dans votre code, ou calculer la durée d'une opération.
+
L'API Console fournit des fonctionnalités permettant aux développeurs d'effectuer des tâches de débogage, telles que la journalisation des messages ou les valeurs des variables à des points définis dans votre code, ou calculer la durée d'une opération.
L'API Credential Management (en français : gestion des informations d'authentification) permet à un site web d'enregistrer et de récupérer des informations d'authentifications pour un utilisateur (qu'elles soient fédérées, utilisent un mot de passe ou une paire de clés asymétrique). Un utilisateur peut ainsi se connecter à un service sans avoir à saisir de mot de passe, de voir le compte fédéré utilisé pour se connecter à un site, de rouvrir une session sans avoir à se reconnecter après une session expirée.
-
+
L'API Credential Management (en français : gestion des informations d'authentification) permet à un site web d'enregistrer et de récupérer des informations d'authentifications pour un utilisateur (qu'elles soient fédérées, utilisent un mot de passe ou une paire de clés asymétrique). Un utilisateur peut ainsi se connecter à un service sans avoir à saisir de mot de passe, de voir le compte fédéré utilisé pour se connecter à un site, de rouvrir une session sans avoir à se reconnecter après une session expirée.
Concepts et utilisation de l'API Credential Management
Un objet de type {{domxref("CredentialCreationOptions")}} qui contient des options pour le nouvel objet Credentials demandé. Cet objet doit posséder au moins une des propriétés parmi "password", "federated" ou "publicKey". Les options sont :
-
password: {{optional_inline}} un objet {{domxref("HTMLFormElement")}} ou un objet {{domxref("PasswordCredentialData")}}
+
password: {{optional_inline}} un objet {{domxref("HTMLFormElement")}} ou un objet {{domxref("PasswordCredentialData")}}
id: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.
federated : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont :
+
federated : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont :
id: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.
\ No newline at end of file
diff --git a/files/fr/web/api/css/index.html b/files/fr/web/api/css/index.html
index e63c612007..93f55c6ad4 100644
--- a/files/fr/web/api/css/index.html
+++ b/files/fr/web/api/css/index.html
@@ -5,15 +5,15 @@ translation_of: Web/API/CSS
---
{{APIRef("CSSOM")}}
-
L'interfaceCSS possède les méthodes utiles au CSS.Aucun objet de cette interfacene sont implémentés :il ne contient quedes méthodes statiquesetest donc une interfaceabstraite.
+
L'interface CSS possède les méthodes utiles au CSS. Aucun objet de cette interface ne sont implémentés : il ne contient que des méthodes statiques et est donc une interface abstraite.
Propriétés
-
L'interfaceCSSest uneinterfaceet aucunobjet de ce type ne peut être créé:seules les méthodesstatiquessont définies.
+
L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.
Méthodes
-
L'interfaceCSSest uneinterfaceet aucunobjet de ce type ne peut être créé:seules les méthodesstatiquessont définies.
+
L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.
Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés offsetWidth et offsetHeight.
+
Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés offsetWidth et offsetHeight.
-
La plupart du temps ce sont les mêmes que la largeur et la hauteur de getBoundingClientRect(), quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, offsetWidth et offsetHeight renvoie la disposition de la largeur et la hauteur de l'élément, tandis que getBoundingClientRect() retourne le rendu de la largeur et de la hauteur.
+
La plupart du temps ce sont les mêmes que la largeur et la hauteur de getBoundingClientRect(), quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, offsetWidth et offsetHeight renvoie la disposition de la largeur et la hauteur de l'élément, tandis que getBoundingClientRect() retourne le rendu de la largeur et de la hauteur.
A titre d'exemple, si l'élément a width: 100px; et transform: scale(0.5);getBoundingClientRect() retournera 50 comme largeur, tandis que offsetWidth retournera 100.
-
+
-
Quelle est la taille du contenu affiché ?
+
Quelle est la taille du contenu affiché ?
-
Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés clientWidth et clientHeight :
+
Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés clientWidth et clientHeight :
-
+
-
Grandeur totale
+
Grandeur totale
-
Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés scrollWidth et scrollHeight.
+
Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés scrollWidth et scrollHeight.
Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement.
Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}.
L'orientation de l'écran est quelque chose de légèrement différent de l'orientation de l'appareil. Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.
+
L'orientation de l'écran est quelque chose de légèrement différent de l'orientation de l'appareil. Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.
Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:
-
La première est la media query orientation. Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).
+
La première est la media query orientation. Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).
La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller.
@@ -132,7 +132,7 @@ li {
Verrouiller l'orientation de l'écran
-
Attention: Cette API est expérimentale et est actuellement disponible sur Firefox OS et Firefox pour Android avec le préfixe moz, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe ms.
+
Attention : Cette API est expérimentale et est actuellement disponible sur Firefox OS et Firefox pour Android avec le préfixe moz, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe ms.
Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement.
A CSSRuleList est un objet de type tableau contenant une collection ordonnée d'objects CSSRule.
-
A CSSRuleList est un objet de type tableau contenant une collection ordonnée d'objects CSSRule.
-
-
Description
+
Description
Chaque règle CSSRule peut être atteinte via rules.item(index), ou simplement rules[index], où rules est un objet implementant l'interface CSSRuleList, et index est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est rules.length.
-
Exemple
+
Exemple
// récuperer la première règle de la première feuille de style
var firstRule = document.styleSheets[0].cssRules[0];
Uniquement supporté via getComputedStyle dans Firefox. Retourne la valeur de la propriété en tant que {{domxref("CSSPrimitiveValue")}} ou null pour les propriétés raccourcies.
+
Uniquement supporté via getComputedStyle dans Firefox. Retourne la valeur de la propriété en tant que {{domxref("CSSPrimitiveValue")}} ou null pour les propriétés raccourcies.
-
Exemple
+
Exemple
var objStyle = document.styleSheets[0].cssRules[0].style;
console.log(objStyle.cssText);
@@ -62,17 +60,17 @@ for (var i = objStyle.length; i--;) {
console.log(objStyle.cssText);
-
Notes
+
Notes
Le bloc de déclaration est la partie de la règle de mise en forme qui apparaît dans les accolades et qui fournit les définitions de mise en forme (pour le sélecteur, la partie qui précède les accolades).
CSSStyleRule représente une règle de style CSS unique. Il implémente l'interface {{domxref ("CSSRule")}} avec une valeur de type 1 (CSSRule STYLE_RULE).
+
CSSStyleRule représente une règle de style CSS unique. Il implémente l'interface {{domxref ("CSSRule")}} avec une valeur de type 1 (CSSRule STYLE_RULE).
Déclenchement à partir de code privilégié vers du code non-privilégié
-
Lors du déclenchement d'un CustomEvent depuis du code privilégié (une extension, par exemple) vers du code non-privilégié (une page web par exemple), vous devez prendre en considération la sécurité. Firefox et les autres applications Gecko empêchent qu'un objet créé dans un contexte soit utilisé dans un autre, ce qui empêchera généralement les failles de sécurité, mais ces restrictions peuvent aussi empêcher votre code de s'executer comme prévu.
-
Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même fenêtre que celle où vous déclencherez l'évenement.
+
Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même fenêtre que celle où vous déclencherez l'évenement.
-
// doc est une référence au contenu du document
-functiondispatchCustomEvent(doc){
- var eventDetail = Components.utils.cloneInto({foo:'bar'}, doc.defaultView);
- var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
- doc.dispatchEvent(myEvent);
-}
+
// doc est une référence au contenu du document
+function dispatchCustomEvent(doc) {
+ var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
+ var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
+ doc.dispatchEvent(myEvent);
+}
Notez qu'exposer une fonction permettra au script de l'exécuter avec les privilèges qu'accorde Chrome ce qui peut ouvrir une faille de sécurité.
Les évènements initialisés par ce moyen doivent être créés avec la méthode {{domxref("Document.createEvent()")}}. Cette méthode doit être appelée pour définir l'évènement avant son envoi en utilisant {{domxref("EventTarget.dispatchEvent()") }}. Une fois l'évènement envoyé, la méthode ne fait rien.
-
-
N'utilisez plus cette méthode car elle est dépréciée.
+
+
Attention : N'utilisez plus cette méthode car elle est dépréciée.
-
À la place, utilisez les constructeurs d'évènements spécifiques comme {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. La page Création et déclenchement d'évènements donne plus d'informations sur la façon de les utiliser.
+
À la place, utilisez les constructeurs d'évènements spécifiques comme {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. La page Création et déclenchement d'évènements donne plus d'informations sur la façon de les utiliser.
La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet.
-
Si cette méthode est appelée sans argument, ou que le format donné est une {{domxref("DOMString","chaîne de caractères")}} vide, les données de tous les formats seront retirées.
+
+
Note : Si cette méthode est appelée sans argument, ou que le format donné est une {{domxref("DOMString","chaîne de caractères")}} vide, les données de tous les formats seront retirées.
<span class="tweaked" id="source" draggable="true">
Sélectionnez cet élément, glissez-le et déposez-le dans la Zone de Dépose pour le déplacer.
</span>
<span class="tweaked" id="target">Zone de Dépose</span>
@@ -47,7 +49,7 @@ translation_of: Web/API/DataTransfer/clearData
L'objetDataTransfer contient les données glisséesau cours d'uneopération de glisser-déposer.Il peutcontenir un ou plusieurséléments, du même type ou de types différents.Pour plus d'informations surle glisser-déposer, voirGlisser et déposer.
+
L'objet DataTransfer contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir Glisser et déposer.
-
Cet objet estdisponible depuis la propriétédataTransferde tous les événements deglisser.Ilne peut pas êtrecrééséparément.
+
Cet objet est disponible depuis la propriété dataTransfer de tous les événements de glisser. Il ne peut pas être créé séparément.
L'effet utilisé, qui doit toujours êtrel'une desvaleurs possibles de effectAllowed.
+
L'effet utilisé, qui doit toujours être l'une des valeurs possibles de effectAllowed.
-
Pourles événementsdragenter etdragover, la propriété dropEffectestinitialisée en fonction desactions initiées par l'utilisateur. Ceci estspécifique à la plateforme, mais en général, l'utilisateur peutappuyer surles touches de modificationpour ajusterl'action souhaitée.Dansun gestionnaire d'événementdragenter etdragover, la propriétédropEffect peut être modifiée si l'actionde l'utilisateur demandéen'est pascelle souhaitée.
+
Pour les événements dragenter et dragover, la propriété dropEffect est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement dragenter et dragover, la propriété dropEffect peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée.
Pour les évènements dragstart, drag, and dragleave events, dropEffect est initialisé à "none". Toute valeur peut être assignée à dropEffect, mais elle sera ignorée.
-
Pour les évènements drop et dragend , dropEffectest initialisé en fonction de l'action initiée, et correspond à la dernière valeur de dropEffect après le dernier événementdragenter ou dragover.
+
Pour les évènements drop et dragend , dropEffect est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de dropEffect après le dernier événement dragenter ou dragover.
Valeurs possibles:
-
copy: Une copie del'élément sourceest faiteau nouvel emplacement.
-
move: Unélément est déplacé versun nouvel emplacement.
-
link: Un lien est établi depuis la source vers le nouvel emplacement.
-
none: L'élément ne peutpas être déposé.
+
copy: Une copie de l'élément source est faite au nouvel emplacement.
+
move: Un élément est déplacé vers un nouvel emplacement.
+
link: Un lien est établi depuis la source vers le nouvel emplacement.
+
none: L'élément ne peut pas être déposé.
-
Attribuerune autre valeur n'a aucun effet etconservel'ancienne valeur.
+
Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.
-
effectAllowed
+
effectAllowed
-
Indiqueles effetsqui sont autoriséspour cedéplacer. Il peut être spécifié dansl'évènement dragstartpour définir les effetssouhaitéspour la source,et dansles événementsdragenter etdragoverpour définir les effetssouhaitéspour la cible.Lavaleur n'est pas utiliséepour d'autres événements.
+
Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement dragstart pour définir les effets souhaités pour la source, et dans les événements dragenter et dragover pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements.
Valeurs possibles:
-
copy: Une copie del'élément sourcepeut être faite àson nouvel emplacement.
-
move: Un élémentpeut être déplacévers un nouvel emplacement.
-
link: Unlien peut être établi vers la sourcedepuis le nouvel emplacement.
-
copyLink: Une opération copyou linkest autorisée.
-
copyMove: Une opération copy oumove estautorisée.
-
linkMove: Une opération link ou move est autorisée.
-
all: Toutes les opérationssont autorisées.
-
none: l'élémentne peut être déposé.
-
uninitialized: la valeur par défautlorsque l'effetn'a pas été spécifié, ce qui équivautà all.
+
copy: Une copie de l'élément source peut être faite à son nouvel emplacement.
+
move: Un élément peut être déplacé vers un nouvel emplacement.
+
link: Un lien peut être établi vers la source depuis le nouvel emplacement.
+
copyLink: Une opération copy ou link est autorisée.
+
copyMove: Une opération copy ou move est autorisée.
+
linkMove: Une opération link ou move est autorisée.
+
all: Toutes les opérations sont autorisées.
+
none: l'élément ne peut être déposé.
+
uninitialized: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all.
-
Attribuerune autre valeur n'a aucun effet etconservel'ancienne valeur.
+
Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.
-
files
+
files
-
Contientune liste de tousles fichiers locauxdisponibles sur letransfert de données.Si le glissern'implique pasde fichiers, cette propriété estune liste vide.Unaccès à un indexinvalide sur le {{ domxref("FileList") }}spécifié par cette propriétérenvoie null.
+
Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie null.
Exemple
-
Cet exempleretourne laliste des fichierstraînée dansla fenêtre du navigateur: http://jsfiddle.net/9C2EF/
+
Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur: http://jsfiddle.net/9C2EF/
-
types
+
types
-
Contient uneliste des types deformat des données stockéespour le premier élément,dans le même ordre oú les données ont étéajoutées.Une liste videseraretournée siaucune donnée n'a étéajoutée.
+
Contient une liste des types de format des données stockées pour le premier élément, dans le même ordre oú les données ont été ajoutées. Une liste vide sera retournée si aucune donnée n'a été ajoutée.
L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisée pour contrôler le curseur au cours d'un glisser d'onglet.
-
Note:Cette méthode n'est actuellementimplémentéequesur Windows.
+
+
Note : Cette méthode n'est actuellement implémentée que sur Windows.
Utilise le comportement par défaut de Gecko, qui consiste à utiliser une flèche pour curseur au cours d'un glisser.
-
Note:Si vous spécifiezune valeur autre que"default", "auto"est supposé.
+
+
Note : Si vous spécifiez une valeur autre que "default", "auto" est supposé.
+
-
mozItemCount
+
mozItemCount
-
Le nombre d'élémentsglissés.
+
Le nombre d'éléments glissés.
-
Note:Cette propriété estspécifique aGecko.
+
+
Note : Cette propriété est spécifique a Gecko.
+
mozSourceNode
-
le {{ domxref("Node") }} au dessus duquel lecurseur de la sourisse trouvait lorsquele boutona été pressé pour initialiser le glisser.Cette valeurest nulle pour un glisser externe, ousi l'appelantne peut pasaccéder aunœud.
+
le {{ domxref("Node") }} au dessus duquel le curseur de la souris se trouvait lorsque le bouton a été pressé pour initialiser le glisser. Cette valeur est nulle pour un glisser externe, ou si l'appelant ne peut pas accéder au nœud.
-
Note:Cette propriété estspécifique aGecko.
+
+
Note : Cette propriété est spécifique a Gecko.
+
-
mozUserCancelled
+
mozUserCancelled
-
Cette propriété s'applique uniquementà l'événementdragend, et est positionnée à true sil'utilisateur a annuléle glisseren appuyantsur la touche échappe. Elle est positionnée à falsedans les autres cas, y comprissi le glisser a échouépour toute autre raison, par exempleen raison d'un déposer surun emplacement non valide.Cette propriétén'est pas encore implémentésous Linux.
+
Cette propriété s'applique uniquement à l'événement dragend, et est positionnée à true si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à false dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux.
-
Note:Cette propriété estspécifique aGecko.
+
+
Note : Cette propriété est spécifique a Gecko.
+
-
Methods
+
Methods
-
addElement()
+
addElement()
-
Spécifiela source du glisser. Ceci est rarement utilisé, maisa pour effet de modifier la cible des événementsdrag et dragend.La cible par défautest le nœud qui est glissé.
+
Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements drag et dragend. La cible par défaut est le nœud qui est glissé.
void addElement(
in Element element
);
-
Parametres
+
Parametres
element
L'élément à ajouter.
-
clearData()
+
clearData()
-
Supprimeles données associées au type spécifié.L'argument typeest facultatif.Si le typeest vide ou nonspécifié,les données associées àtous les typessont supprimées.Si les donnéespour le type spécifién'existent pas,ou letransfert de donnéesne contient pas dedonnées,cette méthoden'aura aucun effet.
+
Supprime les données associées au type spécifié. L'argument type est facultatif. Si le type est vide ou non spécifié, les données associées à tous les types sont supprimées. Si les données pour le type spécifié n'existent pas, ou le transfert de données ne contient pas de données, cette méthode n'aura aucun effet.
void clearData(
[optional] in String type
);
-
Parametres
+
Parametres
type
The type of data to remove.
-
getData()
+
getData()
-
Récupèreles données dutype spécifié,ou une chaîne videsi les donnéesde ce typen'existe pas oule transfert de donnéesne contient aucune donnée.
+
Récupère les données du type spécifié, ou une chaîne vide si les données de ce type n'existe pas ou le transfert de données ne contient aucune donnée.
-
Uneerreur de sécuritése produira sivous tentez derécupérer des donnéeslors d'un glisser quia été spécifiéà partir d'undomaine différent ou auquel l'appelantn'a pasaccès.Ces donnéesne seront disponiblesqu'à l'issue du déposer au cours d'un événement drop.
+
Une erreur de sécurité se produira si vous tentez de récupérer des données lors d'un glisser qui a été spécifié à partir d'un domaine différent ou auquel l'appelant n'a pas accès. Ces données ne seront disponibles qu'à l'issue du déposer au cours d'un événement drop.
void getData(
in String type
);
-
Parametres
+
Parametres
type
Le type de donnée à récupérer.
-
setData()
+
setData()
-
Définit une donnée pour le type spécifié.Si des données pourle typen'existe pas, elle estajoutée à la fin,de telle sorte quele dernier élémentdans la liste destypesserale nouveau format.Si une donnée pourle typeexiste déjà,la donnée existante est remplacée à la même position.C'est-à-dire que l'ordre dela liste destypes ne change pas lors du remplacementde la donnéed'un même type.
+
Définit une donnée pour le type spécifié. Si des données pour le type n'existe pas, elle est ajoutée à la fin, de telle sorte que le dernier élément dans la liste des types sera le nouveau format. Si une donnée pour le type existe déjà, la donnée existante est remplacée à la même position. C'est-à-dire que l'ordre de la liste des types ne change pas lors du remplacement de la donnée d'un même type.
Définit l'imageà utiliser pour un glisser, siuneimage personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú uneimage par défaut estcréée à partir dunœud glissé.
+
Définit l'image à utiliser pour un glisser, si une image personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú une image par défaut est créée à partir du nœud glissé.
- Si le nœud estun élément HTMLimg, unélément canvasHTML ou unélément d'imageXUL,la donnée imageest utilisée.Sinon,l'imagedoit êtreun nœudvisible etl'image utilisée pendant le glisser est crééeà partir de ce noeud.Sil'imageest null, toute imagepersonnalisé esteffacée etla valeur par défautest utiliséeà la place.
+ Si le nœud est un élément HTML img, un élément canvas HTML ou un élément d'image XUL, la donnée image est utilisée. Sinon, l'image doit être un nœud visible et l'image utilisée pendant le glisser est créée à partir de ce noeud. Si l'image est null, toute image personnalisé est effacée et la valeur par défaut est utilisée à la place.
- Les coordonnées spécifientle décalage à l'intérieur del'image spécifiant la position ducurseur de la souris.Pour centrer l'image, par exemple,utiliser des valeursqui sontla moitié de lalargeur et de la hauteurde l'image.
+ Les coordonnées spécifient le décalage à l'intérieur de l'image spécifiant la position du curseur de la souris. Pour centrer l'image, par exemple, utiliser des valeurs qui sont la moitié de la largeur et de la hauteur de l'image.
void setDragImage(
in Element image,
@@ -261,7 +271,7 @@ translation_of: Web/API/DataTransfer
);
Supprimeles donnéesassociées au format pourun élémentà l'index spécifié.L'index est compris entre zéro et le nombred'élémentsmoins un.
+
Supprime les données associées au format pour un élément à l'index spécifié. L'index est compris entre zéro et le nombre d'éléments moins un.
- Sile dernier formatdel'élément est supprimé,l'élément entierest retiré, réduisantmozItemCountpar un.
+ Si le dernier format de l'élément est supprimé, l'élément entier est retiré, réduisant mozItemCount par un.
- Sila liste formatest vide, alorsles données associées àtous les formatssont supprimées.Si le formatn'est pas trouvé,alors cette méthoden'a aucun effet.
+ Si la liste format est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet.
Récupère les donnéesassociées au formatdonné pourun élémentà l'index spécifié,ou null si ellen'existe pas.L'indice devrait être compris entre zéroet le nombred'élémentsmoins un.
+
Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un.
Un transfert de donnéespeut stockerplusieurs éléments, chacunà un index commençant à zéro.mozSetDataAt() ne peut êtreappelé qu'avec un index inférieur àmozItemCount,auquel casun élément existantest modifié,ou égal àmozItemCount,auquel cas unnouvel élément est ajouté,et mozItemCountest incrémenté de un.
+
Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. mozSetDataAt() ne peut être appelé qu'avec un index inférieur à mozItemCount, auquel cas un élément existant est modifié, ou égal à mozItemCount, auquel cas un nouvel élément est ajouté, et mozItemCount est incrémenté de un.
- Les données doiventêtre ajoutéespar ordre de préférence,avec le formatle plus spécifiqueajouté en premieret le formatmoins spécifiqueajouté en dernier.Si la donnéedu formatspécifié existedéjà, elle estremplacée dansla même position quela donnée précédente.
+ Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente.
- La donnée doitêtre une chaîne, ou un type primitifbooléen,ou un type numérique (quisera converti enune chaîne), ouune
Contient uneliste des types deformat des donnéesqui sont stockéespour un élémentà l'index spécifié.Sil'index n'est pasdans compris entre 0et le nombre d'élémentsmoins un,uneliste dechaîne vide est retournée.
+
Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée.
-
Note: Cette méthode est spécifique à Gecko.
+
+
Note : Cette méthode est spécifique à Gecko.
+
nsIVariant mozTypesAt(
in unsigned long index
);
-
Parameters
+
Parameters
index
L'index de la donnée pour laquelle récupérer les types.
close() et self.close() sont effectivement équivalents — les deux représentent une instruction close() qui est appelée de l'intérieur de la portée interne du worker.
-
Note : Il y a une autre façon d'arrêter le worker depuis le fil principal : la méthode {{domxref("Worker.terminate")}}.
+
Note : Il y a une autre façon d'arrêter le worker depuis le fil principal : la méthode {{domxref("Worker.terminate")}}.
La propriété accelerationIncludingGravity renvoie la valeur d'accélération enregistrée par l'appareil, en mètres par seconde au carré (m/s2). Contrairement à {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité.
+
La propriété accelerationIncludingGravity renvoie la valeur d'accélération enregistrée par l'appareil, en mètres par seconde au carré (m/s2). Contrairement à {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité.
Cette valeur n'est pas aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope.
-
Syntaxe
+
Syntaxe
var acceleration = instanceOfDeviceMotionEvent.accelerationIncludingGravity;
-
Valeur
+
Valeur
La propriété accelerationIncludingGravity est un objet fournissant une information sur l'accélération des 3 axes. Pour chacun d'eux, elle est représentée par leur propre propriété :
x
-
Représente l'accélération sur l'axe x qui est l'axe est-ouest.
+
Représente l'accélération sur l'axe x qui est l'axe est-ouest.
y
-
Représente l'accélération sur l'axe y qui est l'axe nord-sud
+
Représente l'accélération sur l'axe y qui est l'axe nord-sud
z
-
Représente l'accélération sur l'axe z qui est l'axe haut-bas
+
Représente l'accélération sur l'axe z qui est l'axe haut-bas
acceleration : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en m/s2.
-
accelerationIncludingGravity : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en m/s2.
+
acceleration : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en m/s2.
+
accelerationIncludingGravity : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en m/s2.
rotationRate : un objet donnant la vitesse de rotation du changement d'orientation de l'appareil sur les axes alpha, beta et gamma. La vitesse de rotation est exprimée en degrés par seconde.
interval : Un nombre représentant l'intervalle de temps, en millisecondes, avant d'obtenir des données à partir de l'appareil.
Un objet donnant le taux de changement d'orientation de l'appareil sur les trois axes d'orientation alpha, bêta et gamma. Le taux de rotation est exprimé en degrés par seconde.
+
Un objet donnant le taux de changement d'orientation de l'appareil sur les trois axes d'orientation alpha, bêta et gamma. Le taux de rotation est exprimé en degrés par seconde.
Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir Orientation et mouvement expliqué pour plus de détails.
-
Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir Orientation et mouvement expliqué pour plus de détails.
-
-
Syntaxe
+
Syntaxe
var absolute = instanceOfDeviceOrientationEvent.absolute;
+
\ No newline at end of file
diff --git a/files/fr/web/api/document/adoptnode/index.html b/files/fr/web/api/document/adoptnode/index.html
index 16b8760df2..3c5270aa80 100644
--- a/files/fr/web/api/document/adoptnode/index.html
+++ b/files/fr/web/api/document/adoptnode/index.html
@@ -14,23 +14,23 @@ translation_of: Web/API/Document/adoptNode
-
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.
+
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
+
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.
+
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
+
Exemple
var iframe = document.getElementById('my-iframe');
var iframeImages = iframe.contentDocument.getElementsByTagName('img');
@@ -42,20 +42,20 @@ for (var i = 0; i < iframeImages.length; i++) {
}
-
Notes
+
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).
+
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.
+ WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.
-
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")}}.
+
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.
+
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.
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.
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.
Document.characterSetproprié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.
+
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.
"CSS1Compat" si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mode "proche du standard").
+
"CSS1Compat" si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard").
-
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.
+
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
+
Exemple
if (document.compatMode == "BackCompat") {
// en mode Quirks
}
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
+
Syntaxe
contentType = document.contentType;
contentType est une propriété en lecture seule.
-
Notes
+
Notes
La propriété n'est pas affectée par les balises META.
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.
+
Note : La chaîne de caractères donnée dans le paramètre est convertie en minuscules.
-
Syntaxe
+
Syntaxe
attribut = document.createAttribute(nom)
-
Paramètres
+
Paramètres
nom est une chaîne de caractères contenant le nom de l'attribut.
data est une string (chaîne de caractères) contenant les données à ajouter à la section CDATA.
-
Exemple
+
Exemple
var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml")
@@ -38,14 +38,14 @@ alert(new XMLSerializer().serializeToString(docu));
// Affiche : <xml><![CDATA[Some <CDATA> data & then some]]></xml>
-
Notes
+
Notes
Cela fonctionnera uniquement avec XML, pas avec les documents HTML (car les documents HTML ne supportent pas les sections CDATA) ; le tenter sur un document HTML va lancer une exception NOT_SUPPORTED_ERR.
Va lancer une exception NS_ERROR_DOM_INVALID_CHARACTER_ERR si on essaye de soumettre la séquence CDATA de fermeture ("]]>") en tant que partie des données ; les données fournies par l'utilisateur non échappées, ne peuvent pas être utilisées en toute sécurité sans qu'avec cette méthode on obtienne cette exception (createTextNode() peut souvent être utilisé à sa place).
createComment() crée et retourne un nouveau noeud de type commentaire.
-
Syntaxe
+
Syntaxe
CommentNode = document.createComment(data)
-
Paramètres
+
Paramètres
data
Une chaîne de caractères représentant le contenu du commentaire.
-
Exemple
+
Exemple
var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml");
var comment = docu.createComment('Voici un commentaire pas très bien caché');
@@ -37,5 +37,5 @@ alert(new XMLSerializer().serializeToString(docu));
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
+
Exemple
Cet exemple crée une liste des principaux navigateurs du web.
HTML
-
<ulid="ul">
-</ul>
+
<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'];
+
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);
-});
+browsers.forEach(function(browser) {
+ var li = document.createElement('li');
+ li.textContent = browser;
+ fragment.appendChild(li);
+});
-element.appendChild(fragment);
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.
+
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.
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é.
+
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é.
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.
+
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.
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 :
+
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()">
-<scripttype="text/javascript"><![CDATA[
+<script type="text/javascript"><![CDATA[
var container;
var newdiv;
var txtnode;
@@ -71,21 +68,21 @@ translation_of: Web/API/Document/createElementNS
container.appendChild(newdiv);
}
-]]></script>
+]]></script>
- <vboxid='ContainerBox'flex='1'>
- <html:div>
+ <vbox id='ContainerBox' flex='1'>
+ <html:div>
Le script sur cette page ajoutera du contenu dynamique ci-dessous :
- </html:div>
- </vbox>
+ </html:div>
+ </vbox>
-</page>
+</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.
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.
+
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.
De nombreuses méthodes utilisées avec createEvent, tels que initCustomEvent, sont obsolètes. Utilisez le constructeur d'événement à la place.
+
Attention : 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.
-
Crée un event du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à element.dispatchEvent.
type est une chaîne de caractères qui représente le type d'événement à créer. Les types possibles d'événement incluent "UIEvents", "MouseEvents", "MutationEvents" et "HTMLEvents". Voir la section {{Anch("Notes")}} pour plus de détails.
-
Exemple
+
Exemple
// Crée l'événement.
var event = document.createEvent('Event');
@@ -36,7 +34,7 @@ var event = document.createEvent('Event');
// Nomme l'événement 'build'.
event.initEvent('build', true, true);
-// Écoute l'événement.
+// Écoute l'événement.
elem.addEventListener('build', function (e) {
// e.target correspond à elem
}, false);
@@ -47,9 +45,9 @@ 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.
+
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 :
+
Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :
{{ 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.") }}
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.
+
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.
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.
+
+
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
+
Exemple
var nodeIterator = document.createNodeIterator(
document.body,
@@ -122,16 +124,16 @@ while (currentNode = nodeIterator.nextNode()) {
-
Compatibilité des navigateurs
+
Compatibilité des navigateurs
Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge
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.
+
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.
+
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.
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
+
Exemple
var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml")
@@ -50,6 +50,6 @@ alert(new XMLSerializer().serializeToString(docu));
// Affiche: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/>
document.designModecontrôle sil'ensemble du documentest modifiable.Les valeurs valides sont"on"et "off".Conformément à la spécification,cette propriétéest pardéfautsur "off".Firefoxsuitcette norme.Lesversions antérieures deChromeet IEont par défaut la valeur "inherit". Pour les versions entre IE6-10,la valeurest en majuscule.
+
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.
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.
+
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.
Document.documentElementrenvoie l'Element qui est l'élément racine du document (par exemple, l'élément <html> pour les documents HTML).
+
Document.documentElementrenvoie l'Element qui est l'élément racine du document (par exemple, l'élément <html> pour les documents HTML).
-
Syntaxe
+
Syntaxe
var element = document.documentElement;
-
Exemple
+
Exemple
var racine = document.documentElement;
var premierNiveau = racine.childNodes;
@@ -30,13 +30,13 @@ for (var i = 0; i < premierNiveau.length; i++) {
}
-
Notes
+
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.
+
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.
La propriété en lecture seule Document.documentURIObject renvoie un objet {{ Interface("nsIURI") }} représentant l'URI du document.
+
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.
+
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
+
Syntaxe
-
var uri = doc.documentURIObject;
+
var uri = doc.documentURIObject;
-
Exemple
+
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
@@ -33,6 +33,6 @@ if (uriObj.schemeIs('http')) {
}
Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la politique d'origine identique.
-
Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la politique d'origine identique.
-
-
Syntaxe
+
Syntaxe
var chaineDomaine = document.domain; document.domain = chaine;
-
Exemple
+
Exemple
-
// Pour le document www.example.xxx/good.html,
+
// 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
+
// Pour l'URI https://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
+
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".
+
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).
+
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).
@@ -207,7 +207,7 @@ translation_of: Web/API/Document/drag_event
}, false);
document.addEventListener("drop", function( event ) {
- // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+ // 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" ) {
diff --git a/files/fr/web/api/document/dragend_event/index.html b/files/fr/web/api/document/dragend_event/index.html
index ac2681db24..ce28cf1673 100644
--- a/files/fr/web/api/document/dragend_event/index.html
+++ b/files/fr/web/api/document/dragend_event/index.html
@@ -5,19 +5,19 @@ 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).
@@ -163,33 +163,33 @@ translation_of: Web/API/Document/dragend_event
</style>
<script>
- var dragged;
+ var dragged;
- /* Les événements sont déclenchés sur les objets glissables */
+ /* 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
+ // Stocke une référence sur l'objet glissable
dragged = event.target;
- // transparence 50%
+ // transparence 50%
event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function( event ) {
- // reset de la transparence
+ // reset de la transparence
event.target.style.opacity = "";
}, false);
- /* Les événements sont déclenchés sur les cibles du drop */
+ /* Les événements sont déclenchés sur les cibles du drop */
document.addEventListener("dragover", function( event ) {
- // Empêche default d'autoriser le drop
+ // 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
+ // 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";
}
@@ -197,7 +197,7 @@ translation_of: Web/API/Document/dragend_event
}, false);
document.addEventListener("dragleave", function( event ) {
- // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
+ // 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 = "";
}
@@ -205,16 +205,16 @@ translation_of: Web/API/Document/dragend_event
}, false);
document.addEventListener("drop", function( event ) {
- // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+ // 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
+ // 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);
+ }, false);
</script>
diff --git a/files/fr/web/api/document/dragenter_event/index.html b/files/fr/web/api/document/dragenter_event/index.html
index 2bdc66e42e..7f95865724 100644
--- a/files/fr/web/api/document/dragenter_event/index.html
+++ b/files/fr/web/api/document/dragenter_event/index.html
@@ -7,19 +7,19 @@ translation_of: Web/API/Document/dragenter_event
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.
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
+
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
@@ -165,33 +165,33 @@ translation_of: Web/API/Document/dragenter_event
</style>
<script>
- var dragged;
+ var dragged;
- /* Les événements sont déclenchés sur les objets glissables */
+ /* 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
+ // Stocke une référence sur l'objet glissable
dragged = event.target;
- // transparence 50%
+ // transparence 50%
event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function( event ) {
- // reset de la transparence
+ // reset de la transparence
event.target.style.opacity = "";
}, false);
- /* Les événements sont déclenchés sur les cibles du drop */
+ /* Les événements sont déclenchés sur les cibles du drop */
document.addEventListener("dragover", function( event ) {
- // Empêche default d'autoriser le drop
+ // 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
+ // 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";
}
@@ -199,7 +199,7 @@ translation_of: Web/API/Document/dragenter_event
}, false);
document.addEventListener("dragleave", function( event ) {
- // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
+ // 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 = "";
}
@@ -207,16 +207,16 @@ translation_of: Web/API/Document/dragenter_event
}, false);
document.addEventListener("drop", function( event ) {
- // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+ // 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
+ // 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);
+ }, false);
</script>
diff --git a/files/fr/web/api/document/dragleave_event/index.html b/files/fr/web/api/document/dragleave_event/index.html
index dfccbbc044..9221441d5f 100644
--- a/files/fr/web/api/document/dragleave_event/index.html
+++ b/files/fr/web/api/document/dragleave_event/index.html
@@ -9,7 +9,7 @@ translation_of: Web/API/Document/dragleave_event
@@ -163,33 +163,33 @@ translation_of: Web/API/Document/dragleave_event
</style>
<script>
- var dragged;
+ var dragged;
- /* Les événements sont déclenchés sur les objets glissables */
+ /* 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
+ // Stocke une référence sur l'objet glissable
dragged = event.target;
- // transparence 50%
+ // transparence 50%
event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function( event ) {
- // reset de la transparence
+ // reset de la transparence
event.target.style.opacity = "";
}, false);
- /* Les événements sont déclenchés sur les cibles du drop */
+ /* Les événements sont déclenchés sur les cibles du drop */
document.addEventListener("dragover", function( event ) {
- // Empêche default d'autoriser le drop
+ // 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
+ // 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";
}
@@ -197,7 +197,7 @@ translation_of: Web/API/Document/dragleave_event
}, false);
document.addEventListener("dragleave", function( event ) {
- // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
+ // 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 = "";
}
@@ -205,16 +205,16 @@ translation_of: Web/API/Document/dragleave_event
}, false);
document.addEventListener("drop", function( event ) {
- // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+ // 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
+ // 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);
+ }, false);
</script>
diff --git a/files/fr/web/api/document/dragover_event/index.html b/files/fr/web/api/document/dragover_event/index.html
index 86df0e5440..aca2e8a435 100644
--- a/files/fr/web/api/document/dragover_event/index.html
+++ b/files/fr/web/api/document/dragover_event/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/Document/dragover_event
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.") }}
+
\ No newline at end of file
diff --git a/files/fr/web/api/document/elementsfrompoint/index.html b/files/fr/web/api/document/elementsfrompoint/index.html
index 106b80d8f1..259d9da6fc 100644
--- a/files/fr/web/api/document/elementsfrompoint/index.html
+++ b/files/fr/web/api/document/elementsfrompoint/index.html
@@ -16,7 +16,7 @@ original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint
---
{{APIRef("DOM")}}{{SeeCompatTable}}
-
La propriété elementsFromPoint() de l'interface {{domxref("DocumentOrShadowRoot")}} renvoie un tableau (array) de tous les éléments présents sous le point fourni en paramètre (relatif au viewport).
+
La propriété elementsFromPoint() de l'interface {{domxref("DocumentOrShadowRoot")}} renvoie un tableau (array) de tous les éléments présents sous le point fourni en paramètre (relatif au viewport).
var output = document.getElementById("output");
if (document.elementsFromPoint) {
var elements = document.elementsFromPoint(30, 20);
for(var i = 0; i < elements.length; i++) {
diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.html b/files/fr/web/api/document/enablestylesheetsforset/index.html
index d6fb8bc63f..f0aca39903 100644
--- a/files/fr/web/api/document/enablestylesheetsforset/index.html
+++ b/files/fr/web/api/document/enablestylesheetsforset/index.html
@@ -14,7 +14,7 @@ translation_of: Web/API/Document/enableStyleSheetsForSet
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).
xpathExpression est une chaîne de caractères représentant le XPath à évaluer.
-
contextNode spécifie le noeud de contexte pour la requête (voir XPath specification) . Il est courant de transmettre un document en tant que nœud de contexte.
+
contextNode spécifie le noeud de contexte pour la requête (voir XPath specification) . Il est courant de transmettre un document en tant que nœud de contexte.
namespaceResolver est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. null est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé.
resultType est un nombre entier qui correspond au type de résultat XPathResult à retourner. Utilisez des propriétés de constantes nommées, comme XPathResult.ANY_TYPE du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9.
result est un XPathResult existant à utiliser pour les résultats. null est le plus commun et va créer un nouveau XPathResult
var headings = document . evaluate ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null);
+
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 ( ) ;
@@ -42,17 +42,17 @@ translation_of: Web/API/Document/evaluate
alertText + = thisHeading . textContent + "\n" ;
thisHeading = headings . iterateNext ( ) ;
}
- alert ( alertText ) ; // Alerte le texte de tout élément h2
+ 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 :
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.)
Lorsqu'un document HTML passe en
- designMode, l'objet
- document correspondant expose une méthode execCommand()
- permettant d'exécuter des commandes manipulant la région éditable courante tels que les champs de formulaire ou les éléments
- contentEditable
- .
+
Lorsqu'un document HTML passe en designMode, l'objet document correspondant expose une méthode execCommand() permettant d'exécuter des commandes manipulant la région éditable courante tels que les champs de formulaire ou les éléments contentEditable.
La plupart des commandes affectent la sélection du document (mise en gras, italique, etc.), tandis que
@@ -36,7 +30,7 @@ translation_of: Web/API/Document/execCommand
prise en charge ou si elle est désactivée.
-
Note : document.execCommand() ne renvoie
+
Note :document.execCommand() ne renvoie
true que s'il est appelé à partir d'une interaction utilisateur. On ne
peut pas l'invoquer dans un script afin de vérifier la prise en charge navigateur avant
d'appeler une commande. À partir de Firefox 82, les appels imbriqués à
@@ -62,169 +56,100 @@ translation_of: Web/API/Document/execCommand
backColor
-
Modifie la couleur d'arrière-plan du document. Avec le mode styleWithCss
- cela affecte la couleur d'arrière-plan du bloc englobant. Une chaîne de caractères décrivant
- une valeur {{cssxref("<color>")}} doit être passée en argument.
- On notera qu'Internet Explorer utilise ceci pour la couleur d'arrière-plan du texte.
+
Modifie la couleur d'arrière-plan du document. Avec le mode styleWithCss cela affecte la couleur d'arrière-plan du bloc englobant. Une chaîne de caractères décrivant une valeur {{cssxref("<color>")}} doit être passée en argument. On notera qu'Internet Explorer utilise ceci pour la couleur d'arrière-plan du texte.
bold
-
Active ou désactive la mise en gras pour la sélection ou à partir du point d'insertion
- Internet Explorer utilise la balise {{HTMLElement("strong")}} plutôt que {{HTMLElement("b")}}.
+
Active ou désactive la mise en gras pour la sélection ou à partir du point d'insertion Internet Explorer utilise la balise {{HTMLElement("strong")}} plutôt que {{HTMLElement("b")}}.
ClearAuthenticationCache
-
Supprime toutes les informations d'authentification (credentials) du cache.
+
Supprime toutes les informations d'authentification credentials) du cache.
contentReadOnly
-
Rend le contenu du document en lecture seule ou éditable en fonction du booléen passé
- en argument (n'est pas pris en charge par Internet Explorer)
+
Rend le contenu du document en lecture seule ou éditable en fonction du booléen passé en argument (n'est pas pris en charge par Internet Explorer)
copy
-
Copie la sélection courante vers le presse-papier. Les conditions pour obtenir ce
- comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de
- compatibilité ci-après.
+
Copie la sélection courante vers le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.
createLink
-
Crée un hyperlien à partir de la sélection (sous réserve qu'il y en ait une). Une
- chaîne de caractères formant un URI est nécessaire comme argument afin de fournir
- la valeur de l'attribut href. L'URI doit contenir au moins un caractère
- (qui peut être un blanc). (Internet Explorer créera un lien avec une valeur
- null.)
+
Crée un hyperlien à partir de la sélection (sous réserve qu'il y en ait une). Une chaîne de caractères formant un URI est nécessaire comme argument afin de fournir la valeur de l'attribut href. L'URI doit contenir au moins un caractère (qui peut être un blanc). (Internet Explorer créera un lien avec une valeur null.)
cut
-
Coupe le contenu de la sélection courante et le copie dans le presse-papier.
- Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre.
- Veuillez voir le tableau de compatibilité ci-après.
+
Coupe le contenu de la sélection courante et le copie dans le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.
decreaseFontSize
-
Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou au point
- d'insertion. (Non pris en charge par Internet Explorer.)
+
Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou au point d'insertion. (Non pris en charge par Internet Explorer.)
defaultParagraphSeparator
-
Modifie le séparateur de paragraphe utilisé lorsque de nouveaux paragraphes sont
- créés dans les zones de texte éditables. Voir
- Différences dans la génération du balisage pour plus de détails.
+
Modifie le séparateur de paragraphe utilisé lorsque de nouveaux paragraphes sont créés dans les zones de texte éditables. Voir Différences dans la génération du balisage pour plus de détails.
delete
-
Supprimer la sélection courante.
+
Supprimer la sélection courante.
enableAbsolutePositionEditor
-
Active ou désactive la poignée qui permet de déplacer les éléments positionnés de
- façon absolue. Celle-ci est désactivée par défaut depuis Firefox 64 ({{bug(1490641)}}).
-
+
Active ou désactive la poignée qui permet de déplacer les éléments positionnés de façon absolue. Celle-ci est désactivée par défaut depuis Firefox 64 ({{bug(1490641)}}).
enableInlineTableEditing
-
Active ou désactive les contrôles pour l'insertion ou la suppression des lignes ou
- colonnes de tableau. Les contrôles sont désactivés par défaut depuis Firefox 64
- ({{bug(1490641)}}).
+
Active ou désactive les contrôles pour l'insertion ou la suppression des lignes ou colonnes de tableau. Les contrôles sont désactivés par défaut depuis Firefox 64 ({{bug(1490641)}}).
enableObjectResizing
-
Active ou désactive les contrôles permettant de redimensionner les images, tableaux
- ou les éléments positionnés de façon absolue. Les poignées sont désactivées par défaut
- depuis Firefox 64 ({{bug(1490641)}}).
+
Active ou désactive les contrôles permettant de redimensionner les images, tableaux ou les éléments positionnés de façon absolue. Les poignées sont désactivées par défaut depuis Firefox 64 ({{bug(1490641)}}).
fontName
-
Modifie le nom de la police pour la sélection ou à partir du point d'insertion. La
- valeur fournie en argument doit être un nom de police (ex. "Arial").
+
Modifie le nom de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un nom de police (ex. "Arial").
fontSize
-
Modifie la taille de la police pour la sélection ou à partir du point d'insertion.
- La valeur fournie en argument doit être un entier compris entre 1 et 7.
+
Modifie la taille de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un entier compris entre 1 et 7.
foreColor
-
Modifie la couleur de la police pour la sélection ou à partir du point d'insertion.
- La valeur passée en argument doit être une chaîne de caractères décrivant une couleur
- exprimée en notation hexadécimale.
+
Modifie la couleur de la police pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères décrivant une couleur exprimée en notation hexadécimale.
formatBlock
-
Ajoute un élément HTML de bloc autour de la ligne contenant la sélection courante et
- remplace l'éventuel élément de bloc englobant s'il en existe un (pour Firefox,
- {{HTMLElement("blockquote")}} fera exception et englobera n'importe quel bloc).
- L'argument passé doit être un nom de balise. Tous les éléments de bloc peuvent en
- théorie être utilisés. (Internet Explorer et Edge ne prennent en charge que les
- balises H1H6, ADDRESS, et PRE qui
- doivent être passées entre chevrons : "<H1>".)
+
Ajoute un élément HTML de bloc autour de la ligne contenant la sélection courante et remplace l'éventuel élément de bloc englobant s'il en existe un (pour Firefox, {{HTMLElement("blockquote")}} fera exception et englobera n'importe quel bloc). L'argument passé doit être un nom de balise. Tous les éléments de bloc peuvent en théorie être utilisés. (Internet Explorer et Edge ne prennent en charge que les balises H1H6, ADDRESS, et PRE qui doivent être passées entre chevrons : "<H1>".)
forwardDelete
-
Supprime un caractère à la position du curseur. Le comportement obtenu est le même
- que lorsqu'on appuie sur la touche Suppr d'un clavier Windows.
+
Supprime un caractère à la position du curseur. Le comportement obtenu est le même que lorsqu'on appuie sur la touche Suppr d'un clavier Windows.
heading
-
Ajoute un élément de titre autour de la sélection ou au niveau du point d'insertion.
- L'argument doit être le nom d'une balise de titre ("H1" à "H6").
- (Non pris en charge par Internet Explorer et Safari.)
+
Ajoute un élément de titre autour de la sélection ou au niveau du point d'insertion. L'argument doit être le nom d'une balise de titre ("H1" à "H6"). (Non pris en charge par Internet Explorer et Safari.)
hiliteColor
-
Modifie la couleur d'arrière-plan pour la sélection ou à partir du point d'insertion.
- La valeur passée en argument doit être une chaîne de caractères définissant une couleur
- et useCSS doit valoir true. (Non pris en charge par Internet
- Explorer.)
+
Modifie la couleur d'arrière-plan pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères définissant une couleur et useCSS doit valoir true. (Non pris en charge par Internet Explorer.)
increaseFontSize
-
Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou à partir du point
- d'insertion. (Non pris en charge par Internet Explorer).
+
Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou à partir du point d'insertion. (Non pris en charge par Internet Explorer).
indent
-
Augmente l'indentation de la ligne contenant la sélection ou le point d'insertion.
- Pour Firefox, si la sélection s'étend sur plusieurs lignes ayant différents niveaux
- d'indentation, seules les lignes les moins indentées seront décalées.
+
Augmente l'indentation de la ligne contenant la sélection ou le point d'insertion. Pour Firefox, si la sélection s'étend sur plusieurs lignes ayant différents niveaux d'indentation, seules les lignes les moins indentées seront décalées.
insertBrOnReturn
-
Contrôle si la touche Entrée insère un élément {{HTMLElement("br")}} ou
- si le bloc courant est scindé en deux. (Non pris en charge par Internet Explorer.)
+
Contrôle si la touche Entrée insère un élément {{HTMLElement("br")}} ou si le bloc courant est scindé en deux. (Non pris en charge par Internet Explorer.)
insertHorizontalRule
-
Insère un élément {{HTMLElement("hr")}} au point d'insertion ou remplace la
- sélection courante par cet élément.
+
Insère un élément {{HTMLElement("hr")}} au point d'insertion ou remplace la sélection courante par cet élément.
insertHTML
-
Insère un élément au point d'insertion en supprimant la sélection. Une chaîne de
- caractères HTML valide doit être fournie en argument. (Non pris en charge par Internet
- Explorer.)
+
Insère un élément au point d'insertion en supprimant la sélection. Une chaîne de caractères HTML valide doit être fournie en argument. (Non pris en charge par Internet Explorer.)
insertImage
-
Insère une image au point d'insertion en supprimant la sélection. L'argument doit
- être une chaîne de caractères indiquant l'URL à utiliser pour l'attribut
- src de l'image. Les prérequis de cette valeur sont les mêmes que pour
- createLink.
+
Insère une image au point d'insertion en supprimant la sélection. L'argument doit être une chaîne de caractères indiquant l'URL à utiliser pour l'attribut src de l'image. Les prérequis de cette valeur sont les mêmes que pour createLink.
Crée une liste non-ordonnée pour la
- sélection ou à partir du point d'insertion.
+
Crée une liste non-ordonnée pour la sélection ou à partir du point d'insertion.
insertParagraph
-
Insère un paragraphe autour de la sélection
- pour la ligne courante. (Internet Explorer insère un paragraphe au point d'insertion
- et supprime la sélection.)
+
Insère un paragraphe autour de la sélection pour la ligne courante. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.)
insertText
-
Insère le texte indiqué au point d'insertion (quitte à supprimer l'éventuelle
- sélection courante).
+
Insère le texte indiqué au point d'insertion (quitte à supprimer l'éventuelle sélection courante).
italic
-
Active ou désactive la mise en italique pour la sélection ou à partir du point
- d'insertion. (Internet Explorer utilisera l'élément {{HTMLElement("em")}} plutôt que
- {{HTMLElement("i")}}.)
+
Active ou désactive la mise en italique pour la sélection ou à partir du point d'insertion. (Internet Explorer utilisera l'élément {{HTMLElement("em")}} plutôt que {{HTMLElement("i")}}.)
justifyCenter
-
Centre la sélection ou le point d'insertion.
+
Centre la sélection ou le point d'insertion.
justifyFull
-
Justifie la sélection ou le point d'insertion.
+
Justifie la sélection ou le point d'insertion.
justifyLeft
-
Justifie à gauche la sélection ou le point d'insertion.
+
Justifie à gauche la sélection ou le point d'insertion.
justifyRight
-
Justifie à droite la sélection ou le point d'insertion.
+
Justifie à droite la sélection ou le point d'insertion.
outdent
-
Effectue un retrait d'indentation pour la ligne courante.
+
Effectue un retrait d'indentation pour la ligne courante.
paste
-
Colle le contenu du presse-papier au point d'insertion (et remplace éventuellement
- la sélection actuelle). Fonctionnalité désactivée pour le contenu web.
+
Colle le contenu du presse-papier au point d'insertion (et remplace éventuellement la sélection actuelle). Fonctionnalité désactivée pour le contenu web.
redo
-
Rejoue l'action annulée par la précédente commande undo.
+
Rejoue l'action annulée par la précédente commande undo.
removeFormat
-
Supprime toute mise en forme pour la sélection courante.
+
Supprime toute mise en forme pour la sélection courante.
selectAll
-
Sélectionne l'ensemble du contenu de la région éditable.
+
Sélectionne l'ensemble du contenu de la région éditable.
strikeThrough
-
Active ou désactive la rayure de la sélection ou à partir d'un point d'insertion.
+
Active ou désactive la rayure de la sélection ou à partir d'un point d'insertion.
subscript
-
Active ou désactive la mise en indice
- pour la sélection ou au point d'insertion
+
Active ou désactive la mise en indice pour la sélection ou au point d'insertion
superscript
-
Active ou désactive la mise en exposant
- pour la sélection ou au point d'insertion
+
Active ou désactive la mise en exposant pour la sélection ou au point d'insertion
underline
-
Active ou désactive le soulignement pour
- la sélection ou au point d'insertion.
+
Active ou désactive le soulignement pour la sélection ou au point d'insertion.
Active/désactive l'utilisation de balises HTML ou de CSS pour le balisage généré. La
- valeur de l'argument doit être un booléen.
-
Note : cet argument possède une logique inversée (false permet
- d'utiliser CSS et true permet d'utiliser HTML). Cette valeur n'est pas
- prise en charge par Internet Explorer et a été dépréciée en faveur de
- styleWithCSS.
-
styleWithCSS
-
Remplace la commande useCSS. true modifie/génère des
- attributs style dans le balisage tandis que false génère des
- éléments HTML de présentation.
+
Active/désactive l'utilisation de balises HTML ou de CSS pour le balisage généré. La valeur de l'argument doit être un booléen. Note : cet argument possède une logique inversée (false permet d'utiliser CSS et true permet d'utiliser HTML). Cette valeur n'est pas prise en charge par Internet Explorer et a été dépréciée en faveur de styleWithCSS.
styleWithCSS
+
Remplace la commande useCSS. true modifie/génère des attributs style dans le balisage tandis que false génère des éléments HTML de présentation.
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.
+
+
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
@@ -55,7 +57,7 @@ document.onclick = function (event) {
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
+
Syntaxe
collection = document.forms;
-
Valeur
+
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>.
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")}}.
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
-
+
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.
function changeColor(newColor) {
+ var elem = document.getElementById('para');
+ elem.style.color = newColor;
+}
-
Résultat
+
Résultat
{{ EmbedLiveSample('Example1', 250, 100) }}
-
Notes d'utilisation
+
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.
<!doctypehtml>
-<html>
-<head>
- <metacharset="UTF-8">
- <title>Document</title>
-</head>
-<body>
- <divid="parent-id">
- <p>hello word1</p>
- <pid="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>
+
<!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 !
+
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.
+
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.
{{domxref("Document")}} référence pour d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir la référence vers des éléments du document.
{{domxref("Document.querySelector()")}} pour utiliser des sélecteurs avec des requêtes comme 'div.myclass'
-
xml:id dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).
+
xml:id dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).
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.
+
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
+
Syntaxe
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
-
elementsest une {{domxref ("HTMLCollection")}} des éléments trouvés.
+
elements est une {{domxref ("HTMLCollection")}} des éléments trouvés.
names est une chaîne représentant le nom de la classe des éléments à trouver.
-
getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document.L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.
+
getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.
-
Exemples
+
Exemples
Trouve tous les éléments ayant la classe « 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':
+
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':
<!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 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>
+ var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target
+ console.log(testTarget);//<p class="test">hello word2</p>
+ </script>
+</body>
+</html>
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.
+
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.
+
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.
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 ().
+
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
+
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>
-<htmllang="en">
-<head>
- <metacharset="UTF-8"/>
- <title>getElementsByTagName example</title>
- <script>
- functiongetAllParaElems(){
- var allParas = document.getElementsByTagName('p');
- var num = allParas.length;
- alert('There are '+ num +' paragraph in this document');
- }
-
- functiondiv1ParaElems(){
- var div1 = document.getElementById('div1');
- var div1Paras = div1.getElementsByTagName('p');
- var num = div1Paras.length;
- alert('There are '+ num +' paragraph in #div1');
- }
-
- functiondiv2ParaElems(){
- var div2 = document.getElementById('div2');
- var div2Paras = div2.getElementsByTagName('p');
- var num = div2Paras.length;
- alert('There are '+ num +' paragraph in #div2');
- }
- </script>
-</head>
-<bodystyle="border: solid green 3px">
- <p>Some outer text</p>
- <p>Some outer text</p>
-
- <divid="div1"style="border: solid blue 3px">
- <p>Some div1 text</p>
- <p>Some div1 text</p>
- <p>Some div1 text</p>
-
- <divid="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>
-
- <buttononclick="getAllParaElems();">
- show all p elements in document</button><br/>
-
- <buttononclick="div1ParaElems();">
- show all p elements in div1 element</button><br/>
-
- <buttononclick="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)}}.
+
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.
+ document.getElementsByTagName() est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.
-
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
+
Syntaxe
elements = document.getElementsByTagNameNS(namespace,name)
elements est une {{domxref("NodeList")}} (liste de noeud) directe (mais voir le note ci-dessous) d'éléments trouvés dans l'ordre de leur apparition dans l'arbre.
-
namespace l'URI d'espace de noms des éléments à rechercher (voir element.namespaceURI).
-
name est, soit le nom local des éléments à rechercher, soit la valeur spéciale "*" pour tous les éléments (voir element.localName).
+
namespace l'URI d'espace de noms des éléments à rechercher (voir element.namespaceURI).
+
name est, soit le nom local des éléments à rechercher, soit la valeur spéciale "*" pour tous les éléments (voir element.localName).
-
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.
+
+
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
+
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.
+
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.
http://www.w3.org/1999/xhtml">
<head>
<title>getElementsByTagNameNS example</title>
@@ -46,7 +48,7 @@ translation_of: Web/API/Document/getElementsByTagNameNS
function getAllParaElems()
{
- var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+ var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
var num = allParas.length;
@@ -57,7 +59,7 @@ function getAllParaElems()
function div1ParaElems()
{
var div1 = document.getElementById("div1")
- var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+ var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
var num = div1Paras.length;
@@ -68,7 +70,7 @@ function div1ParaElems()
function div2ParaElems()
{
var div2 = document.getElementById("div2")
- var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+ var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
var num = div2Paras.length;
@@ -109,9 +111,9 @@ function div2ParaElems()
</html>
-
Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath
+
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.)
+
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) {
@@ -131,6 +133,6 @@ function div2ParaElems()
}
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.
+
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.
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.
+
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.
+
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
+
Syntaxe
focused = document.hasFocus();
-
Valeur retournée
+
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>
-<htmllang="en">
-<head>
-<metacharset="UTF-8"/>
-<title>TEST</title>
-<style>
-#message{font-weight: bold;}
-</style>
-<script>
-setInterval( checkPageFocus,200);
-
-functioncheckPageFocus(){
- 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.";
- }
-}
-
-functionopenWindow(){
- window.open (
- "http://developer.mozilla.org/",
- "mozdev",
- "width=640,height=300,left=150,top=260"
- );
-}
-</script>
-</head>
-<body>
- <h1>JavaScript hasFocus example</h1>
- <divid="message">Waiting for user action</div>
- <div><buttononclick="openWindow()">Open a new window</button></div>
-</body>
-</html>
+
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 (
+ "https://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>
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.
Retourne la hauteur de l'objet {{domxref("document")}}. Dans la plupart des cas, ceci est égal à l'élément {{HTMLElement("body")}} du document courant.
var modName = "HTML";
+var modVer = "2.0";
+var conformTest = document.implementation.hasFeature( modName, modVer );
-alert("DOM "+ modName +" "+ modVer +" supported?: "+ conformTest );
+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.
+// 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.
+
Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la Conformance Section DOM niveau 2.
-
Notes
+
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.
+
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.
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 ()")}}.
+
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
+
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.
+
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é.
+
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.
+
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.
+ 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.
Le noeud d'origine n'est pas supprimé du document d'origine.Le noeud importé est un clone de l'original.
+
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).
+
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.
+
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.
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.
+
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")}}.
+
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")}}.
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")}}.
+
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")}}.
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.
+
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.
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.
+
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.
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).
+
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).
(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).
+
(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.
+
retourne le noeud qui est la cible de l'info-bulle actuelle.
Mozilla a également défini quelques méthodes non standard :
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.
+
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.
+
+
Attention : Cet évènement est déprécié et il faudrait plutôt utiliser beforeinput ou keydown.
var nLastModif = Date.parse(document.lastModified);
-
Notes
+
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):
+
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):
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
+
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é.
+
+
Note : Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.
+
-
Exemple
+
Exemple
var lastSheetSet = document.lastStyleSheetSet;
if (!lastSheetSet) {
@@ -30,7 +32,7 @@ if (!lastSheetSet) {
console.log("The last sheet set is: " + lastSheetSet);
-
Voir aussi
+
Voir aussi
{{ domxref("document.preferredStyleSheetSet") }}
@@ -39,8 +41,8 @@ console.log("The last sheet set is: " + lastSheetSet);
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.
+
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'.
+
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.
+
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.
+
Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est null.
imageElement est le nouvel élément à utiliser comme arrière-plan correspondant à cette chaîne d'élément image. Spécifiez null pour supprimer l'élément d'arrière-plan.
-
Exemple
+
Exemple
Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc.
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.
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
+
Syntaxe
var isSynthetic = document.mozSyntheticDocument;
En retour, isSynthetic est true (vrai) si le document est synthétique ; sinon, false (faux).
-
Exemple
+
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).
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).
+
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).
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.
+
Note : 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 :
-
en utilisant addEventListener sur window, document ou document.body
+
en utilisant addEventListener sur window, document ou document.body
en définissant les propriétés .ononline ou .onoffline sur document ou document.body sur un objet Function JavaScript. (Note : l'utilisation de window.ononline ou window.onoffline ne fonctionnera pas pour des raisons de compatibilité).
en spécifiant les attributs ononline="..." ou onoffline="..." sur la balise <body> dans le balisage HTML.
-
Exemple
+
Exemple
-
Il existe un cas de test simple que vous pouvez exécuter pour vérifier le fonctionnement des évènements.
+
Il existe un cas de test simple que vous pouvez exécuter pour vérifier le fonctionnement des évènements.
La méthode document.open() ouvre un document pour l'écriture.
+
La méthode document.open() ouvre un document pour l'écriture.
-
Syntaxe
+
Syntaxe
document.open();
-
Exemple
+
Exemple
// Dans cet exemple, le contenu du document est
// écrasé au cours de la réinitialisation avec open()
@@ -28,15 +28,15 @@ document.open();
// Le document est vide.
-
Notes
+
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
+
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().
+
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().
Note : À partir de {{Gecko("2.0")}}, les auteurs sont encouragés à utiliser la propriété menupopup triggerNode à la place.
+
+
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.
+
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.
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.
+
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.
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.
+
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.
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.
+
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.
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é.
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) :
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é :
+
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']");
+
var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']");
Note : Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .
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.
+
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.
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.
+
Note : Si les selectors spécifiés contiennent un pseudo-element CSS, la liste retournée sera toujours vide.
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" :
+
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" :
Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.
-
Exemples
+
Exemples
Différents états de chargement
-
switch (document.readyState) {
+
switch (document.readyState) {
case "loading":
// Encore en chargement.
break;
@@ -50,12 +50,12 @@ translation_of: Web/API/Document/readyState
// 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
+
// alternative à DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
@@ -64,7 +64,7 @@ document.onreadystatechange = function () {
readystatechange comme alternative à load
-
// alternative à load
+
// alternative à load
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
@@ -73,7 +73,7 @@ document.onreadystatechange = function () {
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
+
// 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(); }
@@ -83,7 +83,7 @@ document.addEventListener('readystatechange', bootstrap, false);
[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é.
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.
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.
+
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.
+
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.
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
+
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
+
Exemple
Voir l'exemple pour {{domxref("element.setCapture()")}}.
Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}.
+
Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}.
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.
+
+
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.
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.
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.
+
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.
+
+
Note : Cette valeur d'attribut est directe : sa modification affectera la valeur de l'attribut.
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()") }}.
+
+
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
+
Voir aussi
{{ domxref("document.lastStyleSheetSet") }}
@@ -44,8 +48,8 @@ document.selectedStyleSheetSet = "Some other style sheet";
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).
Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.
-
Syntaxe
+
Syntaxe
sets = document.styleSheetSets
En retour, sets est une liste de jeux de feuilles de styles disponibles.
-
Exemple
+
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 :
@@ -40,13 +40,13 @@ for (var i = 0; i < sheets.length; i++) {
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).
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>).
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).
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.
+
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.
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")}}.
+
Note : À 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
+
Syntaxe
pixels = document.width;
-
Exemple
+
Exemple
function init() {
alert("La largeur du document est " + document.width + " pixels.");
}
-
Alternatives
+
Alternatives
document.body.clientWidth /* largeur de <body> */
document.documentElement.clientWidth /* largeur de <html> */
window.innerWidth /* largeur de la fenêtre */
Écrit une chaîne de texte dans un document ouvert par document.open().
+
É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.writesur un document fermé (chargé) appelle automatiquement document.open, ce qui efface le document.
+
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.
É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.
+
É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 :
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 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 :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.
@@ -78,14 +78,14 @@ document.close();
-
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.
+
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.
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.
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") }}.
+
+
Attention : 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") }}.
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.").
-
-
+
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.").
Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document.
-
Exemple 1 : height (hauteur) et width (largeur)
+
Exemple 1 : height (hauteur) et width (largeur)
L'exemple qui suit montre l'utilisation des propriétés height et width pour dimensionner des images de diverses tailles :
Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers.
-
<!DOCTYPE html>
-<htmllang="en">
-<head>
-<title>Changing color and font-size example</title>
+
La propriété styleSheets de l'objet document renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets stylesheet, style et CSSRule, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.
-
var ss = document.styleSheets;
+
var ss = document.styleSheets;
-for(var i =0; i < ss.length; i++){
- for(var j =0; j < ss[i].cssRules.length; j++){
- dump( ss[i].cssRules[j].selectorText +"\n");
- }
-}
Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :
@@ -150,221 +150,221 @@ P
#LUMPY
-
Exemple 5 : propagation d'évènements
+
Exemple 5 : propagation d'évènements
Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction stopEvent, qui modifie la valeur de la cellule inférieure du tableau.
Cependant, stopEvent appelle également une méthode d'objet event, {{domxref("event.stopPropagation")}} , qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement {{domxref("element.onclick","onclick")}} qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode stopEvent a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée et un message d'alerte est affiché pour le confirmer.
Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut style ou à l'aide de JavaScript (c'est-à-dire, elem.style.backgroundColor="rgb(173, 216, 230)"). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la liste des propriétés DOM CSS.
+
Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut style ou à l'aide de JavaScript (c'est-à-dire, elem.style.backgroundColor="rgb(173, 216, 230)"). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la liste des propriétés DOM CSS.
getComputedStyle() renvoie un objet ComputedCSSStyleDeclaration, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode getPropertyValue() comme montré dans l'exemple suivant.
Exemple 7 : affichage des propriétés d'un objet event
+
Exemple 7 : affichage des propriétés d'un objet event
Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}} et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle for..in pour parcourir les propriétés d'un objet et obtenir leurs valeurs.
-
Les propriétés des objets event diffèrent sensiblement entre les différents navigateurs, la spécification norme DOM liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.
+
Les propriétés des objets event diffèrent sensiblement entre les différents navigateurs, la spécification norme DOM liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.
Placez le code qui suit dans une fichier texte vide et chargez-le dans différents navigateurs, vous serez surpris des différences entre le nombre et le nom des propriétés. Vous pouvez également ajouter quelques éléments à la page et appeler cette fonction depuis d'autres gestionnaires d'évènements.
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>Show Event properties</title>
-<style>
-table {border-collapse: collapse;}
-thead {font-weight: bold;}
-td {padding:2px 10px 2px 10px;}
+<style>
+table { border-collapse: collapse; }
+thead { font-weight: bold; }
+td { padding: 2px 10px 2px 10px; }
-.odd{background-color:#efdfef;}
-.even{background-color:#ffffff;}
-</style>
+.odd { background-color: #efdfef; }
+.even { background-color: #ffffff; }
+</style>
-<script>
+<script>
-functionshowEventProperties(e){
- functionaddCell(row, text){
- var cell = row.insertCell(-1);
- cell.appendChild(document.createTextNode(text));
- }
+function showEventProperties(e) {
+ function addCell(row, text) {
+ var cell = row.insertCell(-1);
+ cell.appendChild(document.createTextNode(text));
+ }
- var e = e || window.event;
- document.getElementById('eventType').innerHTML = e.type;
+ var e = e || window.event;
+ document.getElementById('eventType').innerHTML = e.type;
- var table = document.createElement('table');
- var thead = table.createTHead();
- var row = thead.insertRow(-1);
- var lableList =['#','Property','Value'];
- var len = lableList.length;
+ var table = document.createElement('table');
+ var thead = table.createTHead();
+ var row = thead.insertRow(-1);
+ var lableList = ['#', 'Property', 'Value'];
+ var len = lableList.length;
- for(var i=0; i<len; i++){
- addCell(row, lableList[i]);
- }
+ for (var i=0; i<len; i++) {
+ addCell(row, lableList[i]);
+ }
- var tbody = document.createElement('tbody');
- table.appendChild(tbody);
+ var tbody = document.createElement('tbody');
+ table.appendChild(tbody);
- for(var p in e){
- row = tbody.insertRow(-1);
- row.className =(row.rowIndex %2)?'odd':'even';
- addCell(row, row.rowIndex);
- addCell(row, p);
- addCell(row, e[p]);
- }
+ for (var p in e) {
+ row = tbody.insertRow(-1);
+ row.className = (row.rowIndex % 2)? 'odd':'even';
+ addCell(row, row.rowIndex);
+ addCell(row, p);
+ addCell(row, e[p]);
+ }
- document.body.appendChild(table);
-}
+ document.body.appendChild(table);
+}
-window.onload =function(event){
- showEventProperties(event);
-}
-</script>
-</head>
+window.onload = function(event){
+ showEventProperties(event);
+}
+</script>
+</head>
-<body>
-<h1>Properties of the DOM <spanid="eventType"></span> Event Object</h1>
-</body>
+<body>
+<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
+</body>
-</html>
+</html>
-
Exemple 8 : utilisation de l'interface DOM Table
+
Exemple 8 : utilisation de l'interface DOM Table
L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}}
Pour ajouter une ligne et quelques cellules à un tableau existant :
N'utilisez jamais la propriété {{domxref("element.innerHTML","innerHTML")}} d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule.
Si vous utilisez les méthodes DOM Core {{domxref("document.createElement")}} et {{domxref("Node.appendChild")}} pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément tbody dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément table (les lignes seront ajoutées au dernier élément tbody).
-
Un certain nombre d'autres méthodes utilitaires faisant partie de l'interface table peuvent être utilisées pour créer et modifier des tableaux.
+
Un certain nombre d'autres méthodes utilitaires faisant partie de l'interface table peuvent être utilisées pour créer et modifier des tableaux.
Cet article décrit comment utiliser l'API DOM Core (en) en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).
+
Cet article décrit comment utiliser l'API DOM Core (en) en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).
Les arbres DOM peuvent être interrogés en utilisant des expressions XPath, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant XMLSerializer (sans avoir à le convertir en chaîne de caractères auparavant), envoyés à un serveur Web (via XMLHttpRequest), transformés en utilisant XSLT, XLink, convertis en un objet JavaScript à travers un algorithme JXON, etc.
Les arbres DOM peuvent être interrogés en utilisant des expressions XPath, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant XMLSerializer (sans avoir à le convertir en chaîne de caractères auparavant), envoyés à un serveur Web (via XMLHttpRequest), transformés en utilisant XSLT, XLink, convertis en un objet JavaScript à travers un algorithme JXON, etc.
Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement.
Le Document Object Model ou DOM (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. Les nœuds peuvent être associés à des gestionnaires d'événements.Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.
+
Le Document Object Model ou DOM (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. Les nœuds peuvent être associés à des gestionnaires d'événements. Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.
Le DOM a été simplifié au cours du temps. Pour cette raison, les interfaces qui suivent, présentes dans la spécification du DOM de niveau 3 ou des niveaux antérieurs, ont été supprimées. Bien qu'il ne soit pas certain qu'elles ne soient pas réintroduites, elles doivent être considérées comme obsolètes et il faut éviter de les utiliser :
Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.
-
-
Note: Parceque la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.
+
+
Note : Parce que la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.
NDTR: (Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant elements, aux tableaux de nœuds en tant que nodeLists (ou même simplement éléments), et aux nœuds d'attributs en tant qu'attributes).
Le tableau suivant décrit brièvement ces types de données.
L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds Element du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver.
+
L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds Element du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver.
L'interface NodeSelector
-
Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces Document, DocumentFragment ou Element :
+
Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces Document, DocumentFragment ou Element :
querySelector
-
Renvoie le premier noeud Element correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, null est renvoyé.
+
Renvoie le premier noeud Element correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, null est renvoyé.
querySelectorAll
-
Renvoie une NodeList (liste de noeuds) contenant tous les noeuds Element correspondants dans la sous-arborescence du noeud, ou une NodeList vide si aucune correspondance n'a été trouvée.
+
Renvoie une NodeList (liste de noeuds) contenant tous les noeuds Element correspondants dans la sous-arborescence du noeud, ou une NodeList vide si aucune correspondance n'a été trouvée.
-
Note : La NodeList retournée par querySelectorAll() n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.
+
+
Note : La NodeList retournée par querySelectorAll() n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.
Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5.
-
Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).
+
+
Note :Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).
+
-
Exemple: Création d'un tableau HTML dynamiquement (Sample1.html)
+
Exemple: Création d'un tableau HTML dynamiquement (Sample1.html)
Contenu HTML
-
<inputtype="button"value="Generate a table."onclick="generate_table()">
+
<input type="button" value="Generate a table." onclick="generate_table()">
Contenu JavaScript
-
functiongenerate_table(){
- // get the reference for the body
- var body = document.getElementsByTagName("body")[0];
-
- // creates a <table> element and a <tbody> element
- var tbl = document.createElement("table");
- var tblBody = document.createElement("tbody");
-
- // creating all cells
- for(var i =0; i <2; i++){
- // creates a table row
- var row = document.createElement("tr");
-
- for(var j =0; j <2; j++){
- // Create a <td> element and a text node, make the text
- // node the contents of the <td>, and put the <td> at
- // the end of the table row
- var cell = document.createElement("td");
- var cellText = document.createTextNode("cell in row "+i+", column "+j);
- cell.appendChild(cellText);
- row.appendChild(cell);
- }
-
- // add the row to the end of the table body
- tblBody.appendChild(row);
- }
-
- // put the <tbody> in the <table>
- tbl.appendChild(tblBody);
- // appends <table> into <body>
- body.appendChild(tbl);
- // sets the border attribute of tbl to 2;
- tbl.setAttribute("border","2");
-}
+
function generate_table() {
+ // get the reference for the body
+ var body = document.getElementsByTagName("body")[0];
+
+ // creates a <table> element and a <tbody> element
+ var tbl = document.createElement("table");
+ var tblBody = document.createElement("tbody");
+
+ // creating all cells
+ for (var i = 0; i < 2; i++) {
+ // creates a table row
+ var row = document.createElement("tr");
+
+ for (var j = 0; j < 2; j++) {
+ // Create a <td> element and a text node, make the text
+ // node the contents of the <td>, and put the <td> at
+ // the end of the table row
+ var cell = document.createElement("td");
+ var cellText = document.createTextNode("cell in row "+i+", column "+j);
+ cell.appendChild(cellText);
+ row.appendChild(cell);
+ }
+
+ // add the row to the end of the table body
+ tblBody.appendChild(row);
+ }
+
+ // put the <tbody> in the <table>
+ tbl.appendChild(tblBody);
+ // appends <table> into <body>
+ body.appendChild(tbl);
+ // sets the border attribute of tbl to 2;
+ tbl.setAttribute("border", "2");
+}
Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :
-
+
Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre <table> de la figure 1, l'élément <table> a un enfant, l'élément <tbody>, qui lui-même a deux enfants <tr>, qui à leur tour ont chacun un enfant <td>. Enfin, chacun de ces éléments <td> a un enfant, un nœud texte.
-
Exemple : Définition de la couleur d'arrière-plan d'un paragraphe
+
Exemple : Définition de la couleur d'arrière-plan d'un paragraphe
-
getElementsByTagName est à la fois une méthode de l'interface Document et de l'interface Element. Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette.Le premier élément de la liste se trouve à la position [0] dans le tableau.
+
getElementsByTagName est à la fois une méthode de l'interface Document et de l'interface Element. Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette. Le premier élément de la liste se trouve à la position [0] dans le tableau.
functionset_background(){
- // récupère une liste de tous les éléments body (il n'y en aura qu'un),
- // et sélectionne le premier (indice 0) de ces éléments
- myBody = document.getElementsByTagName("body")[0];
+
function set_background() {
+ // récupère une liste de tous les éléments body (il n'y en aura qu'un),
+ // et sélectionne le premier (indice 0) de ces éléments
+ myBody = document.getElementsByTagName("body")[0];
- //
à présent, trouve tous les éléments p enfants de cet élément body
- myBodyElements = myBody.getElementsByTagName("p");
+ // à présent, trouve tous les éléments p enfants de cet élément body
+ myBodyElements = myBody.getElementsByTagName("p");
- // récupère le second élément de cette liste d'éléments p
- myP = myBodyElements[1];
- myP.style.background ="rgb(255,0,0)";
-}
+ // récupère le second élément de cette liste d'éléments p
+ myP = myBodyElements[1];
+ myP.style.background = "rgb(255,0,0)";
+}
On récupère d'abord une liste de tous les éléments body avec
-
myBody = document.getElementsByTagName("body")[0]
+
myBody = document.getElementsByTagName("body")[0]
Puisqu'il n'existe qu'un seul élément body dans un document HTML valide, cette liste ne comporte qu'un élément, que l'on récupère en sélectionnant le premier élément de la liste grace à {{mediawiki.external(0)}}.
Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant
-
Pour finir on prend le deuxième élément de la liste des éléments p avec
-
myP = myBodyElements[1];
+
myP = myBodyElements[1];
-
+
Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement :
@@ -163,15 +165,15 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript
// ajoute une propriété de style inline
-
Création de nœuds texte avec document.createTextNode("..")
+
Création de nœuds texte avec document.createTextNode("..")
Employez l'objet document pour appeler la méthode createTextNode et créer un nœud texte. Il suffit de lui communiquer le contenu texte, et la valeur renvoyée est un objet représentant le nœud texte.
-
myTextNode = document.createTextNode("world");
+
myTextNode = document.createTextNode("world");
Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte "world", et monNoeudTexte est la référence de l'objet nœud créé. Pour afficher ce texte sur votre page HTML, vous devez ensuite définir ce nœud texte comme l'enfant d'un autre élément nœud.
-
Insertion d'éléments avec appendChild(...)
+
Insertion d'éléments avec appendChild(...)
En invoquant myP.appendChild ({{mediawiki.external('node_element')}}) , vous définissez element_nœud comme un nouvel enfant du second élément p (myP a été défini plus haut comme étant le second élément p).
En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : helloworld. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise <p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :
-
+
-
L'utilisation de createTextNode et de appendChild permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode appendChild ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez insertBefore à la place de appendChild.
+
+
Note :L'utilisation de createTextNode et de appendChild permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode appendChild ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez insertBefore à la place de appendChild.
+
-
Création de nouveaux éléments avec l'objet document et la méthode createElement(...)
+
Création de nouveaux éléments avec l'objet document et la méthode createElement(...)
Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec createElement. Pour créer un élément <p> enfant de l'élément <body>, vous pouvez vous servir de body défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez document.createElement("nombalise"). Voici un exemple :
L'arborescence des objets se présente désormais comme ceci :
-
+
-
Création dynamique d'un tableau (retour à Sample1.html)
+
Création dynamique d'un tableau (retour à Sample1.html)
Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. Le schéma qui suit vous rappelle la structure de l'arbre des objets pour le tableau créé dans l'exemple.
-
Rappel de la structure arborescente d'un tableau HTML
+
Rappel de la structure arborescente d'un tableau HTML
-
+
-
Création et insertion des éléments dans l'arborescence
+
Création et insertion des éléments dans l'arborescence
On peut décomposer la création du tableau de Exemple1.html en trois étapes :
Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.
-
Il y a une ligne de code supplémentaire à la fin de la fonction start(), qui définit la propriété bordure du tableau en employant la méthode setAttribute. setAttribute utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.
+
+
Note : Il y a une ligne de code supplémentaire à la fin de la fonction start(), qui définit la propriété bordure du tableau en employant la méthode setAttribute. setAttribute utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.
+
<head>
<title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title>
@@ -276,34 +282,36 @@ body.appendChild(nouveauNoeudBALISEP);
</html>
-
Manipulation du tableau avec DOM et CSS
+
Manipulation du tableau avec DOM et CSS
-
Récupérer un nœud texte dans le tableau
+
Récupérer un nœud texte dans le tableau
Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut childNodes qui est utilisé pour récupérer la liste des nœuds enfants de cel. A la différence de getElementsByTagName, la liste renvoyée par childNodes comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode {{ mediawiki.external('x') }} est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans celtext. Ensuite, un nouveau nœud texte contenant les données de celtext est greffé en tant qu'enfant sur l'élément <body>.
-
Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut data.
+
+
Note : Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut data.
mybody = document.getElementsByTagName("body")[0];
+mytable = mybody.getElementsByTagName("table")[0];
+mytablebody = mytable.getElementsByTagName("tbody")[0];
+myrow = mytablebody.getElementsByTagName("tr")[1];
+mycel = myrow.getElementsByTagName("td")[1];
-// premier élément du noeud liste des enfants de mycel
-myceltext=mycel.childNodes[0];
+// premier élément du noeud liste des enfants de mycel
+myceltext=mycel.childNodes[0];
-//
contenu de currenttext est le contenu des données de myceltext
-currenttext=document.createTextNode(myceltext.data);
-mybody.appendChild(currenttext);
+// contenu de currenttext est le contenu des données de myceltext
+currenttext=document.createTextNode(myceltext.data);
+mybody.appendChild(currenttext);
-
Récupérer la valeur d'un attribut
+
Récupérer la valeur d'un attribut
A la fin d'Exemple1, l'appel à setAttribute sur l'objet table définit la propriété border du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode getAttribute :
-
mytable.getAttribute("border");
+
mytable.getAttribute("border");
-
Cacher une colonne en changeant les propriétés de style
+
Cacher une colonne en changeant les propriétés de style
Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez définir les propriétés directement. Le code qui suit est une version modifiée de Exemple1.html où les cellules de la seconde colonne sont cachées, et le fond de celles de la première colonne est rouge. Remarquez que la propriété de style y est définie directement.
Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier l'arbre de contenu de documents. Il est géré dans Mozilla (sur lequel Firefox et Netscape sont basés) et (pour la plus grande partie) dans Internet Explorer 5 pour Windows. Il s'agit d'une base essentielle du scripting sur le Web dans l'avenir.
-
Définition d'un arbre de contenu
+
Définition d'un arbre de contenu
-
Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur les espaces dans le DOM) :
+
Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur les espaces dans le DOM) :
Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.
Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.)
-
Ce que permet le DOM Level 1 Core
+
Ce que permet le DOM Level 1 Core
-
Le DOM Level 1 permet de modifier l'arbre du contenuselon vos désirs. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété document de l'objet global. Cet objet document implémente l'interface Document de la spécification DOM Level 1 du W3C.
+
Le DOM Level 1 permet de modifier l'arbre du contenuselon vos désirs. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété document de l'objet global. Cet objet document implémente l'interface Document de la spécification DOM Level 1 du W3C.
-
Un exemple simple
+
Un exemple simple
Supposons que l'auteur désire prendre le document présenté plus haut et changer le contenu du titre, ainsi qu'écrire deux paragraphes plutôt qu'un seul. Le script suivant le permettrait :
Contenu HTML
-
<body>
-<inputtype="button"value="Change this document."onclick="change()">
-<h2>Header</h2>
-<p>Paragraph</p>
-</body>
+
<body>
+<input type="button" value="Change this document." onclick="change()">
+<h2>Header</h2>
+<p>Paragraph</p>
+</body>
Contenu JavaScript
-
functionchange(){
- // document.getElementsByTagName ("H2") renvoie un NodeList du <h2>
- // éléments dans le document, et le premier est le nombre 0:
-
- var header = document.getElementsByTagName("H2").item(0);
- // le firstChild de l'en-tête est un noeud texte::
- header.firstChild.data ="A dynamic document";
- // maintenant l'en-tête est "Un document dynamique".
-
- var para = document.getElementsByTagName("P").item(0);
- para.firstChild.data ="This is the first paragraph.";
-
- // crée un nouveau noeud texte pour le second paragraphe
- var newText = document.createTextNode("This is the second paragraph.");
- // crée un nouvel Element pour le second paragraphe
- var newElement = document.createElement("P");
- // pose le texte dans le paragraphe
- newElement.appendChild(newText);
- // et pose le paragraphe à la fin du document en l'ajoutant
- // au BODY (qui est le parent de para)
- para.parentNode.appendChild(newElement);
- }
+
function change() {
+ // document.getElementsByTagName ("H2") renvoie un NodeList du <h2>
+ // éléments dans le document, et le premier est le nombre 0:
+
+ var header = document.getElementsByTagName("H2").item(0);
+ // le firstChild de l'en-tête est un noeud texte::
+ header.firstChild.data = "A dynamic document";
+ // maintenant l'en-tête est "Un document dynamique".
+
+ var para = document.getElementsByTagName("P").item(0);
+ para.firstChild.data = "This is the first paragraph.";
+
+ // crée un nouveau noeud texte pour le second paragraphe
+ var newText = document.createTextNode("This is the second paragraph.");
+ // crée un nouvel Element pour le second paragraphe
+ var newElement = document.createElement("P");
+ // pose le texte dans le paragraphe
+ newElement.appendChild(newText);
+ // et pose le paragraphe à la fin du document en l'ajoutant
+ // au BODY (qui est le parent de para)
+ para.parentNode.appendChild(newElement);
+ }
Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant les méthodes fondamentales de DOM Level 1. C'est la suite de ce document.
+
Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant les méthodes fondamentales de DOM Level 1. C'est la suite de ce document.
-
Consultez également la spécification DOM Level 1 Core du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre documentation complète sur le DOM.
-
-
-
Informations sur le document original
-
-
-
Auteur(s) : L. David Baron <dbaron at dbaron dot org>
Consultez également la spécification DOM Level 1 Core du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre documentation complète sur le DOM.
\ No newline at end of file
diff --git a/files/fr/web/api/document_object_model/whitespace/index.html b/files/fr/web/api/document_object_model/whitespace/index.html
index d13a541dc7..9529722049 100644
--- a/files/fr/web/api/document_object_model/whitespace/index.html
+++ b/files/fr/web/api/document_object_model/whitespace/index.html
@@ -5,7 +5,7 @@ tags:
- DOM
translation_of: Web/API/Document_Object_Model/Whitespace
---
-
Le problème
+
Le problème
La présence d'espaces et de blancs dans le DOM peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction white-space: pre en CSS fonctionne.) Cela signifie que :
Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :
-
/**
+
/**
* Tout au long, les espaces sont définis comme l'un des caractères
* "\t" TAB \u0009
* "\n" LF \u000A
@@ -70,25 +70,25 @@ translation_of: Web/API/Document_Object_Model/Whitespace
*
* Ceci n'utilise pas le "\s" de Javascript parce que cela inclut le non-brisement
* espaces (et aussi d'autres caractères).
- */
+ */
-/**
+/**
* Détermine si le contenu du texte d'un nœud est entièrement blanc.
*
* @param nod Un nœud implémentant l'interface |CharacterData| (c'est-à-dire,
* un nœud |Text|, |Comment| ou |CDATASection|
* @return True (vrai) Si tout le contenu du texte du |nod| est un espace,
* sinon false (faux).
- */
-functionis_all_ws( nod )
-{
- // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
- return!(/[^\t\n\r ]/.test(nod.textContent));
-}
+ */
+function is_all_ws( nod )
+{
+ // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
+ return !(/[^\t\n\r ]/.test(nod.textContent));
+}
-/**
+/**
* Détermine si le nœud doit être ignoré par les fonctions d'itération.
*
* @param nod Un objet implémentant l'interface DOM1 |Node|.
@@ -96,15 +96,15 @@ translation_of: Web/API/Document_Object_Model/Whitespace
* 1) un nœud |Text| qui est tout en espace
* 2) un nœud |Comment|
* et autrement false (faux).
- */
+ */
-functionis_ignorable( nod )
-{
- return( nod.nodeType ==8)||// un nœud commentaire
- ((nod.nodeType ==3)&&is_all_ws(nod));// un nœud texte, tout espace
-}
+function is_ignorable( nod )
+{
+ return ( nod.nodeType == 8) || // un nœud commentaire
+ ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nœud texte, tout espace
+}
-/**
+/**
* Version de |previousSibling| qui ignore les nœuds qui sont entièrement
* espace ou commentaire. (Normalement |previousSibling| est une propriété
* de tous les nœuds DOM qui donnent le nœud frère, le nœud qui est
@@ -116,16 +116,16 @@ translation_of: Web/API/Document_Object_Model/Whitespace
* 1) le frère précédent le plus proche de |sib| qui ne peut
* être ignoré du fait de la fonction |is_ignorable|, ou
* 2) null si aucun nœud n'existe.
- */
-functionnode_before( sib )
-{
- while((sib = sib.previousSibling)){
- if(!is_ignorable(sib))return sib;
- }
- returnnull;
-}
-
-/**
+ */
+function node_before( sib )
+{
+ while ((sib = sib.previousSibling)) {
+ if (!is_ignorable(sib)) return sib;
+ }
+ return null;
+}
+
+/**
* Version de |nextSibling| qui ignore les nœuds qui sont entièrement
* espace ou commentaire.
*
@@ -134,16 +134,16 @@ translation_of: Web/API/Document_Object_Model/Whitespace
* 1) le frère précédent le plus proche de |sib| qui ne peut
* être ignoré du fait de la fonction |is_ignorable|, ou
* 2) null si aucun nœud n'existe.
- */
-functionnode_after( sib )
-{
- while((sib = sib.nextSibling)){
- if(!is_ignorable(sib))return sib;
- }
- returnnull;
-}
-
-/**
+ */
+function node_after( sib )
+{
+ while ((sib = sib.nextSibling)) {
+ if (!is_ignorable(sib)) return sib;
+ }
+ return null;
+}
+
+/**
* Version de |lastChild| qui ignore les nœuds qui sont entièrement
* espace ou commentaire. (Normalement |lastChild| est une propriété
* de tous les nœuds DOM qui donnent le dernier des nœuds contenus
@@ -154,18 +154,18 @@ translation_of: Web/API/Document_Object_Model/Whitespace
* 1) Le dernier enfant de |sib| qui ne peut
* être ignoré du fait de la fonction |is_ignorable|, ou
* 2) null si aucun nœud n'existe.
- */
-functionlast_child( par )
-{
- var res=par.lastChild;
- while(res){
- if(!is_ignorable(res))return res;
- res = res.previousSibling;
- }
- returnnull;
-}
-
-/**
+ */
+function last_child( par )
+{
+ var res=par.lastChild;
+ while (res) {
+ if (!is_ignorable(res)) return res;
+ res = res.previousSibling;
+ }
+ return null;
+}
+
+/**
* Version de |firstChild| qui ignore les nœuds qui sont entièrement
* espace ou commentaire..
*
@@ -174,18 +174,18 @@ translation_of: Web/API/Document_Object_Model/Whitespace
* 1) le nœud premier enfant de |sib| qui ne peut
* être ignoré du fait de la fonction |is_ignorable|, ou
* 2) null si aucun nœud n'existe.
- */
-functionfirst_child( par )
-{
- var res=par.firstChild;
- while(res){
- if(!is_ignorable(res))return res;
- res = res.nextSibling;
- }
- returnnull;
-}
-
-/**
+ */
+function first_child( par )
+{
+ var res=par.firstChild;
+ while (res) {
+ if (!is_ignorable(res)) return res;
+ res = res.nextSibling;
+ }
+ return null;
+}
+
+/**
* Version de |data| cela n'inclut pas les espaces au début
* et termine et normalise tous les espaces dans un seul espace. (Normalement
* |data | est une propriété des nœuds de texte qui donne le texte du nœud.)
@@ -193,40 +193,30 @@ translation_of: Web/API/Document_Object_Model/Whitespace
* @param txt Le nœud de texte dont les données doivent être renvoyées
* @return Une chaîne donnant le contenu du nœud de texte avec
* espace blanc s'est effondré.
- */
-functiondata_of( txt )
-{
- var data = txt.textContent;
- // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
- data = data.replace(/[\t\n\r ]+/g," ");
- if(data.charAt(0)==" ")
- data = data.substring(1, data.length);
- if(data.charAt(data.length -1)==" ")
- data = data.substring(0, data.length -1);
- return data;
-}
-
-
Exemple
+ */
+function data_of( txt )
+{
+ var data = txt.textContent;
+ // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
+ data = data.replace(/[\t\n\r ]+/g, " ");
+ if (data.charAt(0) == " ")
+ data = data.substring(1, data.length);
+ if (data.charAt(data.length - 1) == " ")
+ data = data.substring(0, data.length - 1);
+ return data;
+}
+
+
Exemple
Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est "Ceci est le troisième paragraphe", et change ensuite l'attribut class et le contenu de ce paragraphe.
-
var cur =first_child(document.getElementById("test"));
-while(cur)
-{
- if(data_of(cur.firstChild)=="This is the third paragraph.")
- {
- cur.className ="magic";
- cur.firstChild.textContent ="This is the magic paragraph.";
- }
- cur =node_after(cur);
-}
var cur = first_child(document.getElementById("test"));
+while (cur)
+{
+ if (data_of(cur.firstChild) == "This is the third paragraph.")
+ {
+ cur.className = "magic";
+ cur.firstChild.textContent = "This is the magic paragraph.";
+ }
+ cur = node_after(cur);
+}
\ No newline at end of file
diff --git a/files/fr/web/api/documentfragment/documentfragment/index.html b/files/fr/web/api/documentfragment/documentfragment/index.html
index 205b036775..f9c636ecef 100644
--- a/files/fr/web/api/documentfragment/documentfragment/index.html
+++ b/files/fr/web/api/documentfragment/documentfragment/index.html
@@ -20,9 +20,9 @@ translation_of: Web/API/DocumentFragment/DocumentFragment
L’interface DocumentFragment représente un objet document minimal qui n’a pas de parent. Il est utilisé comme une version légère de {{domxref("Document")}} pour stocker un segment de structure de document composé de nœuds, tout comme un document standard. La différence fondamentale est que, comme le fragment de document ne fait pas réellement partie de la structure du DOM, les changements faits au fragment n’affectent pas le document, ne causent pas de {{Glossary("Reflow")}} , et ne provoquent pas les éventuels impacts de performance qui peuvent avoir lieu quand des changements sont faits.
+
L’interface DocumentFragment représente un objet document minimal qui n’a pas de parent. Il est utilisé comme une version légère de {{domxref("Document")}} pour stocker un segment de structure de document composé de nœuds, tout comme un document standard. La différence fondamentale est que, comme le fragment de document ne fait pas réellement partie de la structure du DOM, les changements faits au fragment n’affectent pas le document, ne causent pas de {{Glossary("Reflow")}} , et ne provoquent pas les éventuels impacts de performance qui peuvent avoir lieu quand des changements sont faits.
Un usage courant de DocumentFragment est de créer un fragment, assembler un sous-arbre DOM au sein de celui-ci, puis ajouter ou insérer le fragment dans le DOM en utilisant les méthodes de l’interface {{domxref("Node")}} (telles que {{domxref("Node.appendChild", "appendChild()")}} ou {{domxref("Node.insertBefore", "insertBefore()")}}). En faisant ainsi, on place les nœuds du fragment dans le DOM, en laissant derrière un DocumentFragment vide. Comme tous les nœuds sont insérés dans le document en une seule fois, un seul reflow et un seul rendu sont déclenchés, au lieu de potentiellement un pour chaque nœud inséré s’ils avaient été insérés séparément.
Cette interface n’a pas de propriétés spécifiques, mais hérite de celles de son parent, {{domxref("Node")}}, et implémente celles de l’interface {{domxref("ParentNode")}}.
Retourne une {{domxref("DOMString")}} (chaîne de caractères) qui contient l'une des chaînes associées à un nom d'erreur.
-
Noms d'erreur
+
Noms d'erreur
Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent leurs propres ensembles de noms, il ne s'agit donc pas ici nécessairement d'une liste complète.
-
Note : Parce qu'historiquement les erreurs ont été identifiées par une valeur numérique qui correspondait à une variable nommée définie pour avoir cette valeur, certaines des entrées ci-dessous indiquent la valeur de code héritée et le nom de constante qui ont été utilisés dans le passé.
+
Note : Parce qu'historiquement les erreurs ont été identifiées par une valeur numérique qui correspondait à une variable nommée définie pour avoir cette valeur, certaines des entrées ci-dessous indiquent la valeur de code héritée et le nom de constante qui ont été utilisés dans le passé.
L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : 1 et nom de la constante héritée : INDEX_SIZE_ERR)
Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : 17 et nom de la constante héritée : TYPE_MISMATCH_ERR). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une DOMException avec cette valeur.
Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : 24 et nom de la constante héritée : INVALID_NODE_TYPE_ERR)
L'opération a échoué pour une raison transitoire inconnue (par exemple dépassement de mémoire) (Pas de valeur de code ni de nom de constante hérités) .
Une opération de mutation dans une transaction a échoué car une contrainte n'a pas été satisfaite (Pas de valeur de code ni de nom de constante hérités) .
Une demande a été placée contre une transaction qui n'est actuellement pas active ou qui est terminée (Pas de valeur de code ni de nom de constante hérités).
Une tentative a été faite pour ouvrir une base de données en utilisant une version inférieure à la version existante (Pas de valeur de code ni de nom de constante hérités).
La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission (Pas de valeur de code ni de nom de constante hérités).
L'interface DOMImplementation représente un objet fournissant des méthodes qui ne dépendent pas d'un document particulier. Un tel objet est renvoyé par la propriété {{domxref("Document.implementation")}}.
+
L'interface DOMImplementation représente un objet fournissant des méthodes qui ne dépendent pas d'un document particulier. Un tel objet est renvoyé par la propriété {{domxref("Document.implementation")}}.
Retourne un {{domxref("Boolean")}} indiquant si une caractéristique donnée est supportée ou non.Cette fonction n'est pas fiable et est conservée uniquement à des fins de compatibilité : à l'exception des requêtes liées au SVG, elle renvoie toujours la valeur true(vrai).Les anciens navigateurs sont très incohérents dans leur comportement.
+
Retourne un {{domxref("Boolean")}} indiquant si une caractéristique donnée est supportée ou non. Cette fonction n'est pas fiable et est conservée uniquement à des fins de compatibilité : à l'exception des requêtes liées au SVG, elle renvoie toujours la valeur true(vrai). Les anciens navigateurs sont très incohérents dans leur comportement.
L'interface obsolète DOMObject était utilisée dans les versions antérieures de la spécification DOM comme classe de base pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript .
L'interface DOMParser permet d'analyser le code source {{Glossary("XML")}} ou {{Glossary("HTML")}} d'une chaîne de caractères dans le DOM {{domxref("Document")}}.
+
L'interface DOMParser permet d'analyser le code source {{Glossary("XML")}} ou {{Glossary("HTML")}} d'une chaîne de caractères dans le DOM {{domxref("Document")}}.
Vous pouvez effectuer l'opération inverse - convertir un arbre DOM en source XML ou HTML - en utilisant l'interface {{domxref("XMLSerializer")}}.
Dans l' API WebVR (VR = réalité virtuelle), les valeurs DOMPoint sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un DOMPoint. Notez ci-dessous l'utilisation de position.x, position.y et position.z.
+
Dans l' API WebVR (VR = réalité virtuelle), les valeurs DOMPoint sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un DOMPoint. Notez ci-dessous l'utilisation de position.x, position.y et position.z.
function setView() {
var posState = gPositionSensor.getState();
@@ -72,10 +72,10 @@ translation_of: Web/API/DOMPoint
}
Le type de boîte représenté par le DOMRect est spécifié par la méthode ou la propriété qui l'a retourné. Par exemple, {{domxref("VREyeParameters.renderRect")}} de l'API WebVR spécifie la fenêtre d'un élément canvas dans laquelle le visuel pour un oeil doit être rendu.
+
Le type de boîte représenté par le DOMRect est spécifié par la méthode ou la propriété qui l'a retourné. Par exemple, {{domxref("VREyeParameters.renderRect")}} de l'API WebVR spécifie la fenêtre d'un élément canvas dans laquelle le visuel pour un oeil doit être rendu.
Il hérite de son parent {{domxref("DOMRectReadOnly")}}.
@@ -61,7 +61,7 @@ translation_of: Web/API/DOMRect
Crée un nouvel objet DOMRect avec l'emplacement et les dimensions données.
En termes simples, une chaîne de caractères binaire est une séquence de 1 et de 0. JavaScript est chargé de riches fonctionnalités pour manipuler des données binaires brutes au niveau inférieur.
-
-
En termes simples, une chaîne de caractères binaire est une séquence de 1 et de 0. JavaScript est chargé de riches fonctionnalités pour manipuler des données binaires brutes au niveau inférieur.
-
-
-
Au fur et à mesure que les applications Web deviennent de plus en plus puissantes, ajoutant des fonctionnalités telles que la manipulation d'audio et de vidéo, l'accès aux données brutes à l'aide de WebSockets, etc., il apparaît clairement parfois que le code JavaScript peut être utile pour manipuler rapidement et facilement des données binaires brutes. Dans le passé, cela devait être simulé en traitant les données brutes string (chaîne de caractères) et en utilisant la méthode charCodeAt() pour lire les octets à partir des tampons de données.
+
Au fur et à mesure que les applications Web deviennent de plus en plus puissantes, ajoutant des fonctionnalités telles que la manipulation d'audio et de vidéo, l'accès aux données brutes à l'aide de WebSockets, etc., il apparaît clairement parfois que le code JavaScript peut être utile pour manipuler rapidement et facilement des données binaires brutes. Dans le passé, cela devait être simulé en traitant les données brutes string (chaîne de caractères) et en utilisant la méthode charCodeAt() pour lire les octets à partir des tampons de données.
Cependant, ceci est lent et sujet aux erreurs, en raison du besoin de conversions multiples (en particulier si les données binaires ne sont pas réellement des données au format octet, mais, par exemple, des entiers ou des flottants de 32 bits).
-
Un tableau typé en JavaScript fournit un mécanisme pour accèder aux données brutes binaires beaucoup plus efficacement. Le constructeur StringViewNon native est un niveau au-dessus des tableaux typés et fournit une interface de type C pour les chaînes de caractères.
+
Un tableau typé en JavaScript fournit un mécanisme pour accèder aux données brutes binaires beaucoup plus efficacement. Le constructeur StringView Non native est un niveau au-dessus des tableaux typés et fournit une interface de type C pour les chaînes de caractères.
Le type DOMTimeStamp représente une quantité de millisecondes, exprimées de manière absolue ou relative, en fonction de la spécification dans laquelle il apparaît.
+
Le type DOMTimeStamp représente une quantité de millisecondes, exprimées de manière absolue ou relative, en fonction de la spécification dans laquelle il apparaît.
\ No newline at end of file
diff --git a/files/fr/web/api/domtokenlist/contains/index.html b/files/fr/web/api/domtokenlist/contains/index.html
index 282e4743b2..9954b4108f 100644
--- a/files/fr/web/api/domtokenlist/contains/index.html
+++ b/files/fr/web/api/domtokenlist/contains/index.html
@@ -71,8 +71,4 @@ if(result) {
Compatibilité des navigateurs
-
{{Compat("api.DOMTokenList.contains")}}
-
-
-
-
+
{{Compat("api.DOMTokenList.contains")}}
\ No newline at end of file
diff --git a/files/fr/web/api/domtokenlist/entries/index.html b/files/fr/web/api/domtokenlist/entries/index.html
index 8e8527b904..8642f149aa 100644
--- a/files/fr/web/api/domtokenlist/entries/index.html
+++ b/files/fr/web/api/domtokenlist/entries/index.html
@@ -24,7 +24,7 @@ translation_of: Web/API/DOMTokenList/entries
Exemples
-
Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant entries(), puis parcourons chacune d'entre elles en utilisant une boucle for ... of , et les écrivons dans un {{domxref("Node.textContent")}} du <span>.
+
Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant entries(), puis parcourons chacune d'entre elles en utilisant une boucle for ... of , et les écrivons dans un {{domxref("Node.textContent")}} du <span>.
renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des clés contenues dans cet objet.
{{domxref("DOMTokenList.values()")}}
renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des valeurs contenues dans cet objet.
-
-
Exemples
-
+
Exemples
+
Dans l'exemple suivant, nous récupérons la liste d'un ensemble de classes définies sur un élément {{htmlelement("p")}} en tant que DOMTokenList enutilisant {{domxref("Element.classList")}}, ajoutons une classe en utilisant {{domxref("DOMTokenList.add()")}}, puis mettons à jour le {{domxref("Node.textContent")}} du <p> pour qu'il soit égal à la DOMTokenList.
D'abord HTML :
-
<pclass="a b c"></p>
+
<p class="a b c"></p>
Puis Javascript :
-
var para = document.querySelector("p");
-var classes = para.classList;
-para.classList.add("d");
-para.textContent ='paragraph classList is "'+ classes +'"';
+
var para = document.querySelector("p");
+var classes = para.classList;
+para.classList.add("d");
+para.textContent = 'paragraph classList is "' + classes + '"';
La sortie ressemble à ceci :
@@ -72,14 +71,14 @@ para.textContent Découpage des espaces et suppression des doublons
-
Les méthodes qui modifient la DOMTokenList (comme {{domxref("DOMTokenList.add()")}}) suppriment automatiquement les espaces en excès et les valeurs en double de la liste.Par exemple :
+
Les méthodes qui modifient la DOMTokenList (comme {{domxref("DOMTokenList.add()")}}) suppriment automatiquement les espaces en excès et les valeurs en double de la liste. Par exemple :
-
<spanclass=" d d e f"></span>
+
<span class=" d d e f"></span>
-
var span = document.querySelector("span");
-var classes = span.classList;
-span.classList.add("x");
-span.textContent ='span classList is "'+ classes +'"';
+
var span = document.querySelector("span");
+var classes = span.classList;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';
La sortie ressemble à ceci :
@@ -108,9 +107,7 @@ span.textContent
-
Voir aussi
-
{{domxref("DOMSettableTokenList")}} : un objet qui étend DOMTokenList avec une propriété .value modifiable
\ No newline at end of file
diff --git a/files/fr/web/api/domtokenlist/keys/index.html b/files/fr/web/api/domtokenlist/keys/index.html
index 85855c60c6..b707fae355 100644
--- a/files/fr/web/api/domtokenlist/keys/index.html
+++ b/files/fr/web/api/domtokenlist/keys/index.html
@@ -69,8 +69,4 @@ for(var value of iterator) {
Compatibilité des navigateurs
-
{{Compat("api.DOMTokenList.keys")}}
-
-
-
-
+
{{Compat("api.DOMTokenList.keys")}}
\ No newline at end of file
diff --git a/files/fr/web/api/domtokenlist/length/index.html b/files/fr/web/api/domtokenlist/length/index.html
index 020d7bd7f6..1e21b1727f 100644
--- a/files/fr/web/api/domtokenlist/length/index.html
+++ b/files/fr/web/api/domtokenlist/length/index.html
@@ -61,8 +61,4 @@ span.textContent = 'classList length = ' + length;
Compatibilité des navigateurs
-
{{Compat("api.DOMTokenList.length")}}
-
-
-
-
+
{{Compat("api.DOMTokenList.length")}}
\ No newline at end of file
diff --git a/files/fr/web/api/domtokenlist/remove/index.html b/files/fr/web/api/domtokenlist/remove/index.html
index b3721f931c..b68c42de55 100644
--- a/files/fr/web/api/domtokenlist/remove/index.html
+++ b/files/fr/web/api/domtokenlist/remove/index.html
@@ -48,7 +48,7 @@ span.textContent = classes;
{{ EmbedLiveSample('Examples', '100%', 60) }}
-
Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (array) avec la syntaxe de décomposition. L'ordre des classes n'a pas d'importance :
+
Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (array) avec la syntaxe de décomposition. L'ordre des classes n'a pas d'importance :
\ No newline at end of file
diff --git a/files/fr/web/api/domtokenlist/replace/index.html b/files/fr/web/api/domtokenlist/replace/index.html
index 64de0066fd..e3c1d8d799 100644
--- a/files/fr/web/api/domtokenlist/replace/index.html
+++ b/files/fr/web/api/domtokenlist/replace/index.html
@@ -73,8 +73,4 @@ try {
Compatibilité des navigateurs
-
{{Compat("api.DOMTokenList.replace")}}
-
-
-
-
+
{{Compat("api.DOMTokenList.replace")}}
\ No newline at end of file
diff --git a/files/fr/web/api/domtokenlist/supports/index.html b/files/fr/web/api/domtokenlist/supports/index.html
index b536c5f40c..b9fb5ea4cf 100644
--- a/files/fr/web/api/domtokenlist/supports/index.html
+++ b/files/fr/web/api/domtokenlist/supports/index.html
@@ -59,8 +59,4 @@ if (iframe.sandbox.supports('allow-scripts')) {
Compatibilité des navigateurs
-
{{Compat("api.DOMTokenList.supports")}}
-
-
-
-
+
{{Compat("api.DOMTokenList.supports")}}
\ No newline at end of file
diff --git a/files/fr/web/api/domtokenlist/toggle/index.html b/files/fr/web/api/domtokenlist/toggle/index.html
index 5dcf5826cf..ef036a01e7 100644
--- a/files/fr/web/api/domtokenlist/toggle/index.html
+++ b/files/fr/web/api/domtokenlist/toggle/index.html
@@ -75,8 +75,4 @@ span.onclick = function() {
Compatibilité des navigateurs
-
{{Compat("api.DOMTokenList.toggle")}}
-
-
-
-
+
{{Compat("api.DOMTokenList.toggle")}}
\ No newline at end of file
diff --git a/files/fr/web/api/domtokenlist/value/index.html b/files/fr/web/api/domtokenlist/value/index.html
index 179b6dc852..da23f74aaf 100644
--- a/files/fr/web/api/domtokenlist/value/index.html
+++ b/files/fr/web/api/domtokenlist/value/index.html
@@ -58,8 +58,4 @@ span.textContent = classes.value;
Compatibilité des navigateurs
-
{{Compat("api.DOMTokenList.value")}}
-
-
-
-
+
{{Compat("api.DOMTokenList.value")}}
\ No newline at end of file
diff --git a/files/fr/web/api/domtokenlist/values/index.html b/files/fr/web/api/domtokenlist/values/index.html
index 2abea40a04..294f75dd1c 100644
--- a/files/fr/web/api/domtokenlist/values/index.html
+++ b/files/fr/web/api/domtokenlist/values/index.html
@@ -67,8 +67,4 @@ for(var value of iterator) {
Compatibilité des navigateurs
-
{{Compat("api.DOMTokenList.values")}}
-
-
-
-
+
{{Compat("api.DOMTokenList.values")}}
\ No newline at end of file
diff --git a/files/fr/web/api/element/animate/index.html b/files/fr/web/api/element/animate/index.html
index 52da07fd40..acdf64b4b6 100644
--- a/files/fr/web/api/element/animate/index.html
+++ b/files/fr/web/api/element/animate/index.html
@@ -10,32 +10,29 @@ translation_of: Web/API/Element/animate
La méthode Element.animate() est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée.
-
Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.
+
Note : Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.
Un nombre entier (Integer) représentant la durée de l'animation (en millisecondes), ou un objet (Object) contenant une ou plusieurs propriétés de timing:
-
+
Un nombre entier (Integer) représentant la durée de l'animation (en millisecondes), ou un objet (Object) contenant une ou plusieurs propriétés de timing:
id {{optional_inline}}
-
Une propriété unique pour animate(): une DOMString qui permet de référencer l'animation.
+
Une propriété unique pour animate(): une DOMString qui permet de référencer l'animation.
Détermine comment les valeurs se construisent, d'itération en itération, dans une même animation. Peut être définie par accumulate ou replace (voir ci-dessus). La valeur par défaut est replace.
spacing {{optional_inline}}
-
Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est distribute.
+
Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est distribute.
distribute positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation.
paced positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres.
La propriété Element.attributes renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (Array), aussi il n'a pas de méthodes {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les attributs sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.
+
La propriété Element.attributes renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (Array), aussi il n'a pas de méthodes {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les attributs sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.
-
Syntaxe
+
Syntaxe
var attr = element.attributes;
@@ -29,50 +29,50 @@ var attr = para.attributes;
Énumération des attributs d'éléments
-
L'indexation numérique est utile pour parcourir tous les attributs d'un élément.
- L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.
-
-
<!DOCTYPE html>
-
-<html>
-
- <head>
- <title>Exemple d'attributs</title>
- <scripttype="text/javascript">
- functionlistAttributes(){
- var paragraph = document.getElementById("paragraph");
- var result = document.getElementById("result");
-
- // D'abord, vérifier que le "paragraph" a quelques attributs
- if(paragraph.hasAttributes()){
- var attrs = paragraph.attributes;
- var output ="";
- for(var i = attrs.length -1; i >=0; i--){
- output += attrs[i].name +"->"+ attrs[i].value;
- }
- result.value = output;
- }else{
- result.value ="No attributes to show";
- }
- }
- </script>
- </head>
-
-<body>
- <pid="paragraph"style="color: green;">Sample Paragraph</p>
- <formaction="">
- <p>
- <inputtype="button"value="Show first attribute name and value"
- onclick="listAttributes();">
- <inputid="result"type="text"value="">
- </p>
- </form>
-</body>
-</html>
+
L'indexation numérique est utile pour parcourir tous les attributs d'un élément.
+ L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.
+
+
<!DOCTYPE html>
+
+<html>
+
+ <head>
+ <title>Exemple d'attributs</title>
+ <script type="text/javascript">
+ function listAttributes() {
+ var paragraph = document.getElementById("paragraph");
+ var result = document.getElementById("result");
+
+ // D'abord, vérifier que le "paragraph" a quelques attributs
+ if (paragraph.hasAttributes()) {
+ var attrs = paragraph.attributes;
+ var output = "";
+ for(var i = attrs.length - 1; i >= 0; i--) {
+ output += attrs[i].name + "->" + attrs[i].value;
+ }
+ result.value = output;
+ } else {
+ result.value = "No attributes to show";
+ }
+ }
+ </script>
+ </head>
+
+<body>
+ <p id="paragraph" >Sample Paragraph</p>
+ <form action="">
+ <p>
+ <input type="button" value="Show first attribute name and value"
+ onclick="listAttributes();">
+ <input id="result" type="text" value="">
+ </p>
+ </form>
+</body>
+</html>
-
Spécifications
+
Spécifications
@@ -112,5 +112,5 @@ var attr = para.attributes;
{{domxref("NamedNodeMap")}}, l'interface de l'objet retourné
-
Considérations de compatibilité entre navigateurs : surquirksmode (en)
+
Considérations de compatibilité entre navigateurs : sur quirksmode (en)
La propriété ParentNode.childElementCount en lecture seule renvoie un unsigned long (long non signé) représentant le nombre d'élèments fils de l'élément donné.
-
Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.
+
Note : Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.
Comme cette interface contenait deux différents jeux de propriétés, l'un visant les {{domxref("Node")}} (noeuds) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, childElementCount a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.
var foo = document.getElementById("foo");
-if(foo.childElementCount >0){
- // faire quelque chose
-}
+
var foo = document.getElementById("foo");
+if (foo.childElementCount > 0) {
+ // faire quelque chose
+}
Polyfill pour IE8 & IE9 & Safari
Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.
L'utilisation de classList est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.
elementClasses est une DOMTokenList représentant l'attribut class de elementNodeReference. Si l'attribut class n'a pas été défini ou est vide elementClasses.length retourne 0. element.classList est en lecture seule. Pour la modifier il convient d'utiliser les méthodes add() et remove().
+
elementClasses est une DOMTokenList représentant l'attribut class de elementNodeReference. Si l'attribut class n'a pas été défini ou est vide elementClasses.length retourne 0. element.classList est en lecture seule. Pour la modifier il convient d'utiliser les méthodes add() et remove().
Renvoie la position d'une classe dans une collection.
toggle( String [, force] )
-
Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie false, dans le cas inverse, ajoute cette classe et retourne true.
+
Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie false, dans le cas inverse, ajoute cette classe et retourne true.
Si le second argument est présent : Si l'argument force est à true, ajoute cette classe, si l'argument est à false, la supprime.
contains( String )
Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.
const div = document.createElement('div');
-div.className ='foo';
+
const div = document.createElement('div');
+div.className = 'foo';
-// notre point de départ: <div class="foo"></div>
-console.log(div.outerHTML);
+// notre point de départ: <div class="foo"></div>
+console.log(div.outerHTML);
-// utiliser l'API classList pour supprimer et ajouter des classes
-div.classList.remove("foo");
-div.classList.add("anotherclass");
+// utiliser l'API classList pour supprimer et ajouter des classes
+div.classList.remove("foo");
+div.classList.add("anotherclass");
-// <div class="anotherclass"></div>
-console.log(div.outerHTML);
+// <div class="anotherclass"></div>
+console.log(div.outerHTML);
-// si "visible" est défini, le supprimer, sinon, l'ajouter
-div.classList.toggle("visible");
+// si "visible" est défini, le supprimer, sinon, l'ajouter
+div.classList.toggle("visible");
-// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10
-div.classList.toggle("visible", i <10);
+// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10
+div.classList.toggle("visible", i < 10 );
-console.log(div.classList.contains("foo"));
+console.log(div.classList.contains("foo"));
-// ajouter ou supprimer plusieurs classes
-div.classList.add("foo","bar","baz");
-div.classList.remove("foo","bar","baz");
+// ajouter ou supprimer plusieurs classes
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
-// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation
-const cls =["foo","bar"];
-div.classList.add(...cls);
-div.classList.remove(...cls);
+// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
-// remplacer la classe "foo" par la classe "bar"
-div.classList.replace("foo","bar");
+// remplacer la classe "foo" par la classe "bar"
+div.classList.replace("foo", "bar");
Le nom className est utilisé pour cette propriété au lieu de class à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.
L'évènement click est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.
+
L'évènement click est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.
diff --git a/files/fr/web/api/element/clientleft/index.html b/files/fr/web/api/element/clientleft/index.html
index 74de1b77da..72f3d71689 100644
--- a/files/fr/web/api/element/clientleft/index.html
+++ b/files/fr/web/api/element/clientleft/index.html
@@ -24,13 +24,44 @@ browser-compat: api.Element.clientLeft
var left = element.clientLeft;
-
Exemple
+
Exemple
-
padding-top
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure border-left noire de 24px. La valeur de clientLeft correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px.
+
+
HTML
+
+
+<div id="container">
+ <div id="contained">
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+ nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+ </div>
+</div>
+
intElemClientWidth est un entier correspondant à la largeur d'element, en pixels. La propriété clientWidth est uniquement accessible en lecture-seule.
Exemple
-
+
Spécifications
diff --git a/files/fr/web/api/element/closest/index.html b/files/fr/web/api/element/closest/index.html
index 6854567823..61a0e9f93f 100644
--- a/files/fr/web/api/element/closest/index.html
+++ b/files/fr/web/api/element/closest/index.html
@@ -66,7 +66,7 @@ var r4 = el.closest(":not(div)");
// Renvoie le plus proche ancêtre qui n'est pas un
// div. Dans ce cas, c'est l'élément article.
-
Polyfill
+
Polyfill
Pour les navigateurs qui ne prennent pas en charge Element.closest() mais qui permettent d'utiliser element.matches() (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :
@@ -133,10 +133,6 @@ if (!Element.prototype.closest)
L'évènement contextmenu est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel. Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.
+
L'évènement contextmenu est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.
+
+
Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.
Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement contextmenu sur l'élément cible.
{{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}
{{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}
+
Action par défaut
+
Voir ce-dessous
Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}:
-
document.addEventListener('copy', function(e){
+
document.addEventListener('copy', function(e){
e.clipboardData.setData('text/plain', 'Hello, world!');
e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
diff --git a/files/fr/web/api/element/dblclick_event/index.html b/files/fr/web/api/element/dblclick_event/index.html
index 431a961e5f..9f82b49bd9 100644
--- a/files/fr/web/api/element/dblclick_event/index.html
+++ b/files/fr/web/api/element/dblclick_event/index.html
@@ -12,7 +12,7 @@ translation_of: Web/API/Element/dblclick_event
---
{{APIRef}}
-
L'évènement dblclick se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).
+
L'évènement dblclick se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).
dblclick se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).
L'événement error(erreur) est déclenché lorsqu'une ressource n'a pas pu être chargée ;les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.
+
L'événement error(erreur) est déclenché lorsqu'une ressource n'a pas pu être chargée ; les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.
{{domxref("UIEvent")}} si généré depuis l'interface utilisateur,
- {{domxref("MediaRecorderErrorEvent")}} si généré par MediaStream Recording API et
- sinon {{domxref("Event")}}.
{{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par MediaStream Recording API et sinon {{domxref("Event")}}.
L'événement focusin est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec focus est que focusin se propage.
+
L'événement focusin est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec focus est que focusin se propage.
getAttribute renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit null soit "" (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails.
-
Syntaxe
+
Syntaxe
-
let attribut = element.getAttribute(nom_attribut)
+
Pour des raisons de sécurité, les noncesCSP des sources autres que des scripts, telles que les feuilles de style CSS, et les appels .getAttribute("nonce") sont interdits.
-
let nonce = script.getAttribute("nonce");
+
let nonce = script.getAttribute("nonce");
// renvoie une chaine vide
Plutôt que de tenter de lire le nonce via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :
L'utilisation de getAttributeNames() complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}.
-
Syntaxe
+
Syntaxe
let attributeNames = element.getAttributeNames();
-
Exemple
+
Exemple
// Itérer sur les attributs de l'élément
for(let name of element.getAttributeNames())
@@ -32,7 +32,7 @@ for(let name of element.getAttributeNames())
Polyfill
-
if (Element.prototype.getAttributeNames == undefined) {
+
if (Element.prototype.getAttributeNames == undefined) {
Element.prototype.getAttributeNames = function () {
var attributes = this.attributes;
var length = attributes.length;
@@ -42,7 +42,7 @@ for(let name of element.getAttributeNames())
}
return result;
};
-}
Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud Attr.
-
Syntaxe
+
Syntaxe
-
var attrNode = element.getAttributeNode(attrName);
+
var attrNode = element.getAttributeNode(attrName);
attrNode est un nœud Attr pour l'attribut demandé.
attrName est une chaîne de caractères qui contient le nom de l'attribut.
-
Exemple
+
Exemple
// html: <div id="top" />
var t = document.getElementById("top");
@@ -33,7 +33,7 @@ var idAttr = t.getAttributeNode("id");
alert(idAttr.value == "top")
-
Notes
+
Notes
Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, getAttributeNode passe en minuscules son argument avant de continuer.
== Example == TBD The example needs to be fixed // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top"
+
== Example == TBD The example needs to be fixed // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top"
-
Notes
+
Notes
getAttributeNodeNS est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}.
+
\ No newline at end of file
diff --git a/files/fr/web/api/element/getattributens/index.html b/files/fr/web/api/element/getattributens/index.html
index 81eb8f8c79..6a5d33ddb7 100644
--- a/files/fr/web/api/element/getattributens/index.html
+++ b/files/fr/web/api/element/getattributens/index.html
@@ -21,7 +21,7 @@ translation_of: Web/API/Element/getAttributeNS
namespace
-
L'espace de noms dans lequel rechercher l'attribut spécifié.
+
L'espace de noms dans lequel rechercher l'attribut spécifié.
La valeur de chaîne de caractères de l'attribut spécifié. Si l'attribut n'existe pas, le résultat est null.
-
Note : Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens.La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.
+
Note : Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.
La méthode getAttributeNS diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla.
-
Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants.Cependant, la plupart des navigateurs ont renvoyé null.À partir de DOM4, la spécification dit maintenant de retourner null.Cependant, certains navigateurs plus anciens renvoient une chaîne vide.Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler getAttributeNS() s'il est possible que l'attribut demandé n'existe passur l'élément spécifié.
+
Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler getAttributeNS() s'il est possible que l'attribut demandé n'existe pas sur l'élément spécifié.
Specifie qu'une exception NOT_SUPPORTED_ERRest levée si l'agent utilisateur ne supporte pas la fonctionnalité"XML". Spécifie également que null doit être passé pour n'avoir aucun espace de noms.
+
Specifie qu'une exception NOT_SUPPORTED_ERR est levée si l'agent utilisateur ne supporte pas la fonctionnalité "XML". Spécifie également que null doit être passé pour n'avoir aucun espace de noms.
La méthode Element.getBoundingClientRect() retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la zone d'affichage.
+
La méthode Element.getBoundingClientRect() retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la zone d'affichage.
La méthode Element.getElementsByTagName() retourne une liste des éléments portant le nom de balise donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est live, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois Element.getElementsByTagName() avec le même élément et les mêmes arguments.
+
La méthode Element.getElementsByTagName() retourne une liste des éléments portant le nom de balise donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est live, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois Element.getElementsByTagName() avec le même élément et les mêmes arguments.
-
Quand elle est appelée sur un élément HTML dans un document HTML, getElementsByTagName place son argument en minuscule avant de continuer.Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG " camel-cased" dans une sous-arborescence dans un document HTML.{{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.
+
Quand elle est appelée sur un élément HTML dans un document HTML, getElementsByTagName place son argument en minuscule avant de continuer. Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG " camel-cased" dans une sous-arborescence dans un document HTML. {{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.
-
Element.getElementsByTagName est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.
+
Element.getElementsByTagName est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.
tagName est le nom qualifié à rechercher. La chaîne spéciale "*" représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées.
-
Exemple
+
Exemple
-
// vérifie l'alignement sur un nombre de cellules dans un tableau.
-var table = document.getElementById("forecast-table");
-var cells = table.getElementsByTagName("td");
-for(var i =0; i < cells.length; i++){
- var status = cells[i].getAttribute("data-status");
- if( status =="open"){
- // saisit les données
- }
-}
+
// vérifie l'alignement sur un nombre de cellules dans un tableau.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i < cells.length; i++) {
+ var status = cells[i].getAttribute("data-status");
+ if ( status == "open" ) {
+ // saisit les données
+ }
+}
La méthode Element.getElementsByTagNameNS() renvoie un objet {{domxref("HTMLCollection")}} avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que getElementsByTagNameNS() recherche parmi les descendants de l'élément courant.
+
La méthode Element.getElementsByTagNameNS() renvoie un objet {{domxref("HTMLCollection")}} avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que getElementsByTagNameNS() recherche parmi les descendants de l'élément courant.
-
Syntaxe
+
Syntaxe
elements = element.getElementsByTagNameNS(namespaceURI,localName);
L'URI de l'espace de noms des éléments à rechercher (cf. namespaceURI). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, http://www.w3.org/1999/xhtml.
+
L'URI de l'espace de noms des éléments à rechercher (cf. namespaceURI). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, http://www.w3.org/1999/xhtml.
localName
Le nom local des éléments à rechercher ou la valeur spéciale "*" (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}.
Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.
-
Exemples
+
Exemples
// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML.
var table = document.getElementById("forecast-table");
-var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
+var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
for (var i = 0; i < cells.length; i++) {
var axis = cells[i].getAttribute("axis");
if (axis == "year") {
diff --git a/files/fr/web/api/element/hasattribute/index.html b/files/fr/web/api/element/hasattribute/index.html
index 144fd3ec78..5c90c03771 100644
--- a/files/fr/web/api/element/hasattribute/index.html
+++ b/files/fr/web/api/element/hasattribute/index.html
@@ -13,7 +13,7 @@ translation_of: Web/API/Element/hasAttribute
La méthode Element.hasAttribute() renvoie une valeur booléenne indiquant si l'élément courant possède l'attribut spécifié ou non.
hasAttributeNS renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.
-
Syntaxe
+
Syntaxe
-
result =
+
result =
element.hasAttributeNS(
namespace,
-localName)
+localName)
result
@@ -31,24 +31,24 @@ localName)
Le nom de l'attribut.
-
Exemple
+
Exemple
// Vérifie que l'attribut existe
// avant de définir une valeur
var d = document.getElementById("div1");
if (d.hasAttributeNS(
- "http://www.mozilla.org/ns/specialspace/",
+ "http://www.mozilla.org/ns/specialspace/",
"special-align")) {
d.setAttribute("align", "center");
}
La propriété Element.id représente l'identifiant de l'élément, reflétant l' id global de l'attribut.
+
La propriété Element.id représente l'identifiant de l'élément, reflétant l' id global de l'attribut.
-
Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}.Les autres utilisations courantes de id comprennent l'utilisation de l'ID de l'élément en tant que sélecteur lors de la mise en forme du document avec CSS.
+
Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}. Les autres utilisations courantes de id comprennent l'utilisation de l'ID de l'élément en tant que sélecteur lors de la mise en forme du document avec CSS.
Renvoie l'élément (Element) qui est le plus proche ancêtre de l'élément courant (ou l'élément courant lui-même) qui correspond au sélecteur passé en paramètre.
Envoyé à un élément (Element) lorsque celui-ci effectue une transition (entrée ou sortie) pour le mode plein écran. Également disponible via la propriété onfullscreenchange.
Envoyé à un élément Element si une erreur se produit lors d'une transition (entrée ou sortie) pour le mode plein écran. Également disponible via la propriété onfullscreenerror.
La propriété Element.innerHTML de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.
-
Note: Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères (&), (<), ou (>), innerHTML renverra à la place les chaînes suivantes : "&", "<" et ">" respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.
+
+
Note : Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères (&), (<), ou (>), innerHTML renverra à la place les chaînes suivantes : "&", "<" et ">" respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.
+
Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.
La lecture de innerHTML amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée.
-
let contents = myElement.innerHTML;
+
let contents = myElement.innerHTML;
Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.
-
Note : Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.
+
Note : Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.
Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document.
-
document.body.innerHTML ="";
+
document.body.innerHTML = "";
Cet exemple récupère le balisage HTML actuel du document et remplace les caractères "<" par l'entité HTML "& lt;", convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de innerHTML est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.
Il n'est pas rare de voir innerHTML utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité.
-
const name ="John";
-// en supposant que 'el' est un élément de document HTML
-el.innerHTML = name;// inoffensif dans ce cas
+
const name = "John";
+// en supposant que 'el' est un élément de document HTML
+el.innerHTML = name; // inoffensif dans ce cas
-// ...
+// ...
-name ="<script>alert('I am John in an annoying alert!')</script>";
-el.innerHTML = name;// inoffensif dans ce cas
+name = "<script>alert('I am John in an annoying alert!')</script>";
+el.innerHTML = name; // inoffensif dans ce cas
Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec innerHTMLne doit pas s'exécuter.
Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez innerHTML pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :
-
const name ="<img src='x' onerror='alert(1)'>";
-el.innerHTML = name;// affiche l'alerte
Pour cette raison, il est recommandé de ne pas utiliser innerHTML pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.
-
Attention :Si votre projet est soumis à une vérification de sécurité, l'utilisation de innerHTML entraînera probablement le rejet de votre code.Par exemple, si vous utilisez innerHTML dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.
+
Attention : Si votre projet est soumis à une vérification de sécurité, l'utilisation de innerHTML entraînera probablement le rejet de votre code. Par exemple, si vous utilisez innerHTML dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.
-
Exemple
+
Exemple
Cet exemple utilise innerHTML pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.
JavaScript
-
functionlog(msg){
- var logElem = document.querySelector(".log");
+
function log(msg) {
+ var logElem = document.querySelector(".log");
- var time =newDate();
- var timeStr = time.toLocaleTimeString();
- logElem.innerHTML += timeStr +": "+ msg +"<br/>";
-}
+ var time = new Date();
+ var timeStr = time.toLocaleTimeString();
+ logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
-log("Logging mouse events inside this container...");
+log("Logging mouse events inside this container...");
La fonction log() crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe "log".
Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) :
-
functionlogEvent(event){
- var msg ="Event <strong>"+ event.type +"</strong> at <em>"+
- event.clientX +", "+ event.clientY +"</em>";
- log(msg);
-}
+
function logEvent(event) {
+ var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+ event.clientX + ", " + event.clientY + "</em>";
+ log(msg);
+}
Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal.
Le {{HTMLElement ("div")}} avec la classe "box" est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui.Le <div> dont la classe est "log" est le conteneur pour le texte du journal lui-même.
+
Le {{HTMLElement ("div")}} avec la classe "box" est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui. Le <div> dont la classe est "log" est le conteneur pour le texte du journal lui-même.
-
CSS
+
CSS
Les styles CSS suivants pour notre exemple de contenu.
Un objet {{domxref("DOMString")}} (chaîne de caractères) représentant la position par rapport à targetElement ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes :
-
'beforebegin' : Avant targetElement lui-même.
-
'afterbegin' : A l'intérieur de targetElement, avant son premier enfant.
-
'beforeend' : A l'intérieur de targetElement, après son dernier enfant.
-
'afterend' : Après targetElement lui-même.
+
'beforebegin' : Avant targetElement lui-même.
+
'afterbegin' : A l'intérieur de targetElement, avant son premier enfant.
+
'beforeend' : A l'intérieur de targetElement, après son dernier enfant.
Une démo de notre insertAdjacentElement.html est disponible sur Github ( avec le code source ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons Insert before (insérer avant) et Insert after (insérer après) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant insertAdjacentElement().
insertAdjacentHTML() analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que innerHTML.
+
insertAdjacentHTML() analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que innerHTML.
Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est un arbre et a un élément parent.
+
+
Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est un arbre et a un élément parent.
+
-
Exemple
+
Exemple
// <div id="one">one</div>
var d1 = document.getElementById('one');
@@ -60,13 +59,13 @@ d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// Ici la nouvelle structure est :
// <div id="one">one</div><div id="two">two</div>
-
Notes
+
Notes
Considérations de sécurité
-
Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.
+
Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.
-
Il est recommandé de ne pas utiliser insertAdjacentHTML lors de l'insertion de texte brut;à la place, utilisez la propriété node.textContent ou la méthode node.insertAdjacentText().Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.
+
Il est recommandé de ne pas utiliser insertAdjacentHTML lors de l'insertion de texte brut; à la place, utilisez la propriété node.textContent ou la méthode node.insertAdjacentText(). Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.
hacks.mozilla.org guest post par Henri Sivonen y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.
+
hacks.mozilla.org guest post par Henri Sivonen y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.
La méthodeelement.matches() renvoie true lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie false.
-
Certains navigateurs implémentent cette méthode sous le nom matchesSelector() non-standardisé et préfixé.
+
Attention : Certains navigateurs implémentent cette méthode sous le nom matchesSelector() non-standardisé et préfixé.
<ul id="birds">
+ <li>perroquet amazone</li>
+ <li class="endangered">aigle des Philippines</li>
+ <li>pélican blanc</li>
+</ul>
-<scripttype="text/javascript">
- var birds = document.getElementsByTagName('li');
+<script type="text/javascript">
+ var birds = document.getElementsByTagName('li');
- for(var i =0; i < birds.length; i++){
- if(birds[i].matches('.endangered')){
- console.log('Le - '+ birds[i].textContent +'- est en voie de disparition !');
- }
- }
-</script>
+ for (var i = 0; i < birds.length; i++) {
+ if (birds[i].matches('.endangered')) {
+ console.log('Le - ' + birds[i].textContent + '- est en voie de disparition !');
+ }
+ }
+</script>
Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut class de valeur endangered.
Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).
-
if (!Element.prototype.matches) {
+
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector;
-}
L'évènement mousedown est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.
+
L'évènement mousedown est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.
-
+
Note : Cet évènement est différent de {{domxref("Element/click_event", "click")}}. click est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). mousedown est déclenché dès qu'on appuie sur le bouton.
L'évènement mouseenter est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.
+
L'évènement mouseenter est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.
Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, mouseenter est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.
-
-
-mouseenter est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.
-
-Un seul évènement mouseover est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.
+
+
mouseenter est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.
+
+
+
Un seul évènement mouseover est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.
Avec des hiérarchies profondes, le nombre d'évènements mouseenter envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements mouseover.
L'évènement mouseleave est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.
+
L'évènement mouseleave est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.
mouseleave et {{event('mouseout')}} se ressemblent mais mouseleave ne remonte pas dans le DOM tandis que mouseout remonte. mouseleave est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que mouseout est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).
-
-
-Un évènement mouseleave est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <div> le plus haut dans la hiérarchie.
+
+
Un évènement mouseleave est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <div> le plus haut dans la hiérarchie.
-
-Un seul évènement mouseout est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.
+
+
Un seul évènement mouseout est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.
L'évènement mousemove est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.
+
L'évènement mousemove est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.
L'évènement mouseout est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils.mouseout est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.
+
L'évènement mouseout est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils. mouseout est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.
Dans l'exemple suivant, on illustre la différence entre mouseout et mouseleave. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <ul>. mouseout est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.
+
Dans l'exemple suivant, on illustre la différence entre mouseout et mouseleave. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <ul>. mouseout est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.
En essayant cet exemple, vous pourrez voir que mouseout est envoyé aux éléments individuels de la liste tandis que mouseleave est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.
L'évènement mouseover est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.
+
L'évènement mouseover est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.
L'évènement mouseup est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément. Les évènements mouseup peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on appuie sur un bouton.
+
L'évènement mouseup est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.
+
+
Les évènements mouseup peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on appuie sur un bouton.
La propriété en lecture seule Element.namespaceURI renvoie l'URI d'espace de noms de l'élément ou null si l'élément n'est pas dans un espace de nom.
-
Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.
+
Note : Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.
Syntaxe
@@ -31,13 +31,13 @@ translation_of: Web/API/Element/namespaceURI
// c'est un navigateur XUL
}
-
Notes
+
Notes
Ce n'est pas une valeur calculée qui est le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un nœud est fixé au moment de la création du nœud.
-
Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est null. Dans les versions postérieures, en conformité avec HTML5, c'est http://www.w3.org/1999/xhtml comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}
+
Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est null. Dans les versions postérieures, en conformité avec HTML5, c'est http://www.w3.org/1999/xhtml comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}
-
Vous pouvez créer un élément avec l'namespaceURI spécifié en utilisant la méthode DOM niveau 2 document.createElementNS.
+
Vous pouvez créer un élément avec l'namespaceURI spécifié en utilisant la méthode DOM niveau 2 document.createElementNS.
Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un élément particulier, ne peut pas être modifié.
Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété {{domxref ("Element.innerHTML", "innerHTML")}}.
-
Syntaxe
+
Syntaxe
-
var content = element.outerHTML;
+
var content = element.outerHTML;
-element.outerHTML = htmlString;
+element.outerHTML = htmlString;
-
Valeur
+
Valeur
La lecture de la valeur de outerHTML renvoie une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de innerHTML supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne htmlString.
-
Exceptions
+
Exceptions
SyntaxError
@@ -33,7 +33,7 @@ element.outerHTML = htmlString;
Une tentative a été faite de définir outerHTML sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.
-
Exemples
+
Exemples
Récupérer la valeur de la propriété outerHTML d'un élément :
Si un élément n'a pas de noeud parent, définir sa propriété outerHTML ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :
-
var div = document.createElement("div");
-div.outerHTML ="<div class=\"test\">test</div>";
-console.log(div.outerHTML);// output: "<div></div>"
+
var div = document.createElement("div");
+div.outerHTML = "<div class=\"test\">test</div>";
+console.log(div.outerHTML); // output: "<div></div>"
Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété outerHTML a été modifiée contiendra toujours une référence à l'élément initial :
@@ -79,7 +79,7 @@ p.outerHTML = "<div>Ce div remplace un paragraph.</div>";
console.log(p.nodeName); // toujours "P";
-
une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les sélecteurs CSS ; si ce n'est pas le cas, une exception SyntaxError est levée. Voir Localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.
+
une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les sélecteurs CSS ; si ce n'est pas le cas, une exception SyntaxError est levée. Voir Localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.
Note : Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères.
-
Valeur retournée
+
Valeur retournée
Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.
-
Note : Si le selectors spécifié inclus un pseudo-element CSS, la liste renvoyée est toujours vide.
+
Note : Si le selectors spécifié inclus un pseudo-element CSS, la liste renvoyée est toujours vide.
-
Exception
+
Exception
SyntaxError
La syntaxe de la chaîne du selectors spécifié n'est pas correcte.
-
Exemples
+
Exemples
Obtention d'une liste de correspondances
Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément "myBox" :
-
var matches = myBox.querySelectorAll("p");
+
var matches = myBox.querySelectorAll("p");
Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans "myBox" avec une classe "note" ou "alert" :
-
var matches = myBox.querySelectorAll("div.note, div.alert");
+
var matches = myBox.querySelectorAll("div.note, div.alert");
Ici, nous obtenons une liste d'éléments p du document, dont le parent immédiat est un {{domxref("div")}} qui a la classe 'highlighted' et qui sont inclus dans un conteneur dont l'ID est "test" :
-
var container = document.querySelector("#test");
-var matches = container.querySelectorAll("div.highlighted > p");
+
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
-
Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé 'data-src':
+
Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé 'data-src':
-
var matches = document.querySelectorAll("iframe[data-src]");
+
var matches = document.querySelectorAll("iframe[data-src]");
Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est "userlist" et qui ont un attribut "data-active" dont la valeur est "1":
-
var container = document.querySelector("#userlist");
-var matches = container.querySelectorAll("li[data-active=1]");
+
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active=1]");
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");
+
var highlightedItems = userList.querySelectorAll(".highlighted");
-highlightedItems.forEach(function(userItem){
- deleteUser(userItem);
-});
var select = document.querySelector('.select');
-var inner = select.querySelectorAll('.outer .inner');
-inner.length;// 1, pas 0!
+
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, pas 0!
Dans cet exemple, en sélectionnant ".outer .inner" dans le contexte <div> avec la classe "select", l'élément avec la classe ".inner" est toujours trouvé, même si .outer n'est pas un descendant de l'élément sur lequel la recherche est effectuée (".select"). Par défaut, querySelectorAll() vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.
-
La pseudo-classe {{cssxref (": scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :
+
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 :
removedAttr est le nœud Attr qui vient d'être enlevé.
-
Exemple
+
Exemple
-
// <divid="top"align="center"/>
+
// <div id="top" align="center" />
var d = document.getElementById("top");
var d_align = d.getAttributeNode("align");
d.removeAttributeNode(d_align);
-// align est maintenant supprimé : <divid="top"/>
+// align est maintenant supprimé : <div id="top" />
-
Notes
+
Notes
Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.
Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.
-
Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.
+
Note : Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.
L'attribut en lecture seule element.scrollHeight est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur scrollHeight est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.
-
Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez element.getBoundingClientRect().
+
Note : Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez element.getBoundingClientRect().
-
Syntaxe
+
Syntaxe
var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
intElemScrollHeight est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. scrollHeight est une propriété en lecture seule.
-
Exemple
+
Exemple
+
+
Exemple
+
+
Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}).
+
+
La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé.
+
+
HTML
+
+
<form name="registration">
+ <p>
+ <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
+neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
+velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
+ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
+Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
+mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
+at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
+dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
+luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
+sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
+turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
+Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
+ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
+platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
+consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
+a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
+pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
+ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
+interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
+laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
+nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
+ </textarea>
+ </p>
+ <p>
+ <input type="checkbox" id="agree" name="accept" />
+ <label for="agree">I agree</label>
+ <input type="submit" id="nextstep" value="Next" />
+ </p>
+</form>
Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.
+
JavaScript
-
All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.
+
function checkReading () {
+ if (checkReading.read) {
+ return;
+ }
+ checkReading.read = this.scrollHeight - Math.round(this.scrollTop) === this.clientHeight;
+ document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+ checkReading.noticeBox.textContent = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
+}
-
scrollHeight fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.
+
scrollHeight fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.
Compatibilité des navigateurs
@@ -109,7 +179,7 @@ onload = function () {
Dans les versions inférieures à Firefox 21 : quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété scrollHeight est égale à sa propriété clientHeight. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS {{ cssxref("overflow") }} de l'élément a pour valeur visible.
est une valeur {{jsxref("Boolean")}} optionnelle qui :
-
+
est une valeur {{jsxref("Boolean")}} optionnelle qui :
si elle vaut true (vrai), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "start", inline: "nearest"}. C'est la valeur par défaut.
Si elle vaut false (faux), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "end", inline: "nearest"}.
La propriété Element.scrollTop permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.
+
La propriété Element.scrollTop permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.
La valeur scrollTop d'un élément correspond à la distance entre le haut de l'élément et la partie la plus haute de son contenu visible. Lorsque le contenu d'un élément n'entraîne pas la création d'une barre de défilement verticale, la valeur de scrollTop est 0.
Lorsque scrollTop est utilisé sur l'élément racine (c'est-à-dire l'élément <html>), c'est la valeur de scrollY pour la fenêtre qui est renvoyée. Il s'agit d'un cas aux limites pour scrollTop.
-
-
Pour les systèmes qui utilisent un affichage mis à l'échelle (display scaling), scrollTop peut fournir une valeur décimale.
+
+
Attention : Pour les systèmes qui utilisent un affichage mis à l'échelle (display scaling), scrollTop peut fournir une valeur décimale.
scrollWidth est une propriété en lecture seule qui renvoie, parmi la largeur en pixels du contenu d'un élément, et la largeur de l'élément, celle qui est la plus grande.
-
Syntaxe
+
Syntaxe
var xScrollWidth = element.scrollWidth;
xScrollWidth est la largeur du contenu d'element en pixels.
L'évènement select est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en [HTML5], les évènements select ne peuvent être envoyés que sur des éléments input de formulaire et textarea.
+
L'évènement select est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en HTML5, les évènements select ne peuvent être envoyés que sur des éléments input de formulaire et textarea.
le premier appel de setAttribute() ci-dessus montre la modification de la valeur de l'attribut name en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (Chrome, Edge, Firefox, Safari).
+
le premier appel de setAttribute() ci-dessus montre la modification de la valeur de l'attribut name en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (Chrome, Edge, Firefox, Safari).
Pour définir la valeur d'un attribut booléen, tel que disabled, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme true (vraie). L'absence de l'attribut signifie que sa valeur est false (fausse). En définissant la valeur de l'attribut disabled sur la chaîne vide (""), nous définissons disabled sur true, ce qui entraîne la désactivation du bouton.
Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.
-
Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'Attr soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).
+
Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'Attr soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).
setAttributeNS ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.
-
Syntaxe
+
Syntaxe
-
element.setAttributeNS(
+
element.setAttributeNS(
namespace,
name,
-value)
+value)
namespace est une chaîne spécifiant l'espace de noms de l'attribut.
-
name est une chaîne identifiant l'attribut par son nom qualifié ; c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.
+
name est une chaîne identifiant l'attribut par son nom qualifié ; c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.
value est la valeur chaîne désirée pour le nouvel attribut.
-
Exemple
+
Exemple
var d = document.getElementById("d1");
-d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
+d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
-
Notes
+
Notes
{{ DOMAttributeMethods() }}
-
setAttributeNSest la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire"namespace:localname".
+
setAttributeNS est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire "namespace:localname".
setPointerCapture() est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme cible de capture de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).
-
Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.
+
+
Note : Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.
Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une {{HTMLElement("img")}}, sa propriété tagName est "IMG" (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).
var span = document.getElementById("naissance");
-console.log(span.tagName);
+
var span = document.getElementById("naissance");
+console.log(span.tagName);
-
En XHTML (ou tout autre format XML), la casse d'origine sera conservée, de sorte que "span" sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules.En HTML, "SPAN" serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.
+
En XHTML (ou tout autre format XML), la casse d'origine sera conservée, de sorte que "span" sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules. En HTML, "SPAN" serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.
Retourne un booléen dont la valeur est true (vraie) si l'événement se propage à travers le DOM.
-
Exemple
+
Exemple
-
functiongoInput(e){
- // vérifie la propagation et
- if(!e.bubbles){
- // la lance si elle ne l'a pas été
- passItOn(e);
- }
- // déjà propagé
- doOutput(e)
-}
+
function goInput(e) {
+ // vérifie la propagation et
+ if (!e.bubbles) {
+ // la lance si elle ne l'a pas été
+ passItOn(e);
+ }
+ // déjà propagé
+ doOutput(e)
+}
-
Note : Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à true. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.
+
Note : Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à true. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.
La propriété cancelable (annulable) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété cancelable est à false (faux) et l'écouteur d'événement ne peut pas l'arrêter.
L'appel de {{domxref("event.preventDefault", "preventDefault()")}} sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec cancelable avant d'appeler leurs méthodes preventDefault().
-
La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page.L'annulation des événements click, scroll ou beforeunload empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.
+
La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page. L'annulation des événements click, scroll ou beforeunload empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.
functionpreventScrollWheel(event){
- if(typeof event.cancelable !=='boolean'|| event.cancelable){
- // L'événement peut être annulé, alors nous le faisons.
- event.preventDefault();
- }else{
- // L'évènement ne peut pas être annulé, il n'est donc pas sûr
- // d'appeler preventDefault() sur lui.
- console.warn(`The following event couldn't be canceled:`);
- console.dir(event);
- }
-}
+
function preventScrollWheel(event) {
+ if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+ // L'événement peut être annulé, alors nous le faisons.
+ event.preventDefault();
+ } else {
+ // L'évènement ne peut pas être annulé, il n'est donc pas sûr
+ // d'appeler preventDefault() sur lui.
+ console.warn(`The following event couldn't be canceled:`);
+ console.dir(event);
+ }
+}
-document.addEventListener('wheel', preventCancelableEvents);
Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.
Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefault", "preventDefault()")}} sur celui-ci. Cela permet d'empêcher l'action par défaut associée à l'événement de s'exécuter.
La propriété Event.cancelBubble est un alias historique de {{domxref("Event.stopPropagation()")}}. Définir sa valeur à true (vrai) avant le renvoi à partir d'un gestionnaire d'évènements empêche la propagation de l'évènement. Dans les implémentations les plus tardives, cette définition à false (faux) ne fait rien. Voir {{anch("Compatibilité des navigateurs")}} pour plus de détails.
Il est facile de s'interroger sur la cible à examiner lors de l'écriture d'un gestionnaire d'événements. Cet article devrait clarifier l'utilisation des propriétés de la cible.
La EventTarget (cible d'évènement) que les EventListeners traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.
La EventTarget (cible d'évènement) que les EventListeners traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.
{{ Non-standard_inline() }} Si l'évènement a été reciblé pour quelque raison autre que un passage de limite anonyme, il sera défini sur la cible avant le reciblage. Par exemple, les évènements de souris sont reciblés vers leur noeud parent quand ils surviennent sur des noeuds de texte ({{ Bug("185889") }}), et, dans ce cas, .target affichera le parent .explicitOriginalTarget et le noeud de texte.
Contrairement à .originalTarget, .explicitOriginalTarget n'aura jamais de contenu anonyme.
La propriété relatedTarget (cible associée) pour l'évènement mouseover détient le noeud que la souris avait précédemment atteint. Pour l'évènement mouseout, il détient le noeud que la souris a déplacé à.
Event.currentTarget peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.
-
// Cette fonction masque la cible courante de l'évènement
+
// Cette fonction masque la cible courante de l'évènement
// et l'affiche dans la console.
function hide(e){
e.currentTarget.style.visibility = 'hidden';
@@ -46,7 +46,7 @@ document.body.addEventListener('click', hide, false);
-
Note : La valeur de event.currentTarget est uniquement disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de currentTargeta posteriori (ex. si on a stocké la valeur d'event dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, event.currentTarget aura la valeur null).
+
Note : La valeur de event.currentTarget est uniquement disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de currentTargeta posteriori (ex. si on a stocké la valeur d'event dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, event.currentTarget aura la valeur null).
Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.
-
Note : Cette propriété doit etre utilisée au lieu de la méthode getPreventDefault() qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).
+
+
Note : Cette propriété doit etre utilisée au lieu de la méthode getPreventDefault() qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).
C'est une {{domxref("DOMString")}} (chaîne de caractères) représentant le nom de l'évènement.
-
eventInit {{optional_inline}}
-
-
-
-
C'est un dictionnaire EventInit ayant les champs suivants :
-
+
eventInit{{optional_inline}}
+
C'est un dictionnaire EventInit ayant les champs suivants :
bubbles: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est false (faux).
cancelable: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est false (faux) .
-
composed: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est false (faux) .
+
composed: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est false (faux) .
La méthode Event.initEvent() est utilisée pour initialiser la valeur d'un objet {{domxref("event")}} créé à l'aide de {{domxref("Document.createEvent()")}}.
-
Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. Une fois l'évènement transmis, la méthode ne fait plus rien.
+
Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. Une fois l'évènement transmis, la méthode ne fait plus rien.
-
Note : Ne pas utiliser cette méthode qui est dépréciée
+
Note : Ne pas utiliser cette méthode qui est dépréciée.
-
À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page Création et déclenchement d'évènements vous donne plus d'informations sur la manière de les utiliser.
+
À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page Création et déclenchement d'évènements vous donne plus d'informations sur la manière de les utiliser.
Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule {{ domxref("Event.cancelable") }} donnera sa valeur.
-
Exemple
+
Exemple
// Crée un évènement.
var event = document.createEvent('Event');
@@ -64,7 +64,7 @@ elem.dispatchEvent(event);
La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent.
La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)
-
En présence de contenu anonyme XBL, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir Anonymous Content#Event_Flow_and_Targeting pour plus de détails.
+
En présence de contenu anonyme XBL, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir Anonymous Content#Event_Flow_and_Targeting pour plus de détails.
Note :originalTarget peut aussi être un contenu anonyme natif (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié.
La propriété Event.returnValue indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à true (vrai) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à false (faux) empêche le déclenchement de l'action par défaut.
-
Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.
+
Note : Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.
Event.srcElement est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.
+
Event.srcElement est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.
Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.
-
Syntaxe
+
Syntaxe
event.stopPropagation();
-
Exemple
+
Exemple
-
Voir la section Exemple 5 : Propagation d'évènements dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.
+
Voir la section Exemple 5 : Propagation d'évènements dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.
\ No newline at end of file
diff --git a/files/fr/web/api/event/target/index.html b/files/fr/web/api/event/target/index.html
index b624041ab6..2ab12c5de0 100644
--- a/files/fr/web/api/event/target/index.html
+++ b/files/fr/web/api/event/target/index.html
@@ -13,32 +13,32 @@ translation_of: Web/API/Event/target
C'est une référence à l'objet qui a envoyé l'événement. C'est une propriété différente de {{domxref("event.currentTarget")}} lorsque le gestionnaire d'événements est appelé au cours de la phase de propagation ou de la phase de capture de l'événement.
-
Syntaxe
+
Syntaxe
laCible = event.target
-
Exemple
+
Exemple
La propriété event.target peut être utilisée pour implémenter la délégation d'événements.
-
// Produit une liste
-var ul = document.createElement('ul');
-document.body.appendChild(ul);
+
// Produit une liste
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
-var li1 = document.createElement('li');
-var li2 = document.createElement('li');
-ul.appendChild(li1);
-ul.appendChild(li2);
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
-functionhide(e){
- // e.target se réfère à l'élément <li> cliqué
- // C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte
- e.target.style.visibility ='hidden';
-}
+function hide(e){
+ // e.target se réfère à l'élément <li> cliqué
+ // C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte
+ e.target.style.visibility = 'hidden';
+}
-// Attache l'écouteur à la liste
-// Il se déclenche pour chaque <li> clické
-ul.addEventListener('click', hide,false);
+// Attache l'écouteur à la liste
+// Il se déclenche pour chaque <li> clické
+ul.addEventListener('click', hide, false);
Spécifications
@@ -75,9 +75,9 @@ ul.addEventL
Notes concernant la compatibilité
-
Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard {{domxref('EventTarget.attachEvent')}} . Dans ce modèle, l'objet événement a une propriété {{domxref('Event.srcElement')}}, à la place de la propriété target, avec la même sémantique queevent.target.
+
Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard {{domxref('EventTarget.attachEvent')}} . Dans ce modèle, l'objet événement a une propriété {{domxref('Event.srcElement')}}, à la place de la propriété target, avec la même sémantique que event.target.
-
function hide(e) {
+
function hide(e) {
// Support IE6-8
var target = e.target || e.srcElement;
target.style.visibility = 'hidden';
@@ -86,4 +86,4 @@ ul.addEventL
Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.
-
Note : Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.
+
Note : Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.
-
Syntaxe
+
Syntaxe
event.timeStamp
-
Valeur
+
Valeur
Cette valeur est un nombre de millisecondes écoulées depuis le début du temps de vie du document courant jusqu'à la création de l'évènement.
Dans les nouvelles implémentations, la valeur est un {{domxref("DOMHighResTimeStamp")}} dont la précision est de 5 microsecondes (0,005 ms). Dans les implémentations plus anciennes, la valeur est un {{domxref("DOMTimeStamp")}} de précision d'une milliseconde.