SELFHTML/Aides à la navigation JavaScript/DOM Référence objet| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
 |
document |
|
Propriétés:
Méthodes:
Sous-objets:
|
 | |
L'objet document se réfère au contenu affiché dans la fenêtre du navigateur. Dans la hiérarchie objet de JavaScript il se trouve sous l'objet 
window.
Dans le modèle DOM du consortium W3, l'objet document est l'objet de sortie pour l'arborescence. Les éléments d'un document HTML représentent donc pour le modèle DOM des sous-objets de l'objet document document. Les différents éléments HTML peuvent avoir leurs propres propriétés et méthodes. Celles-ci sont décrites dans la partie traitant des objets éléments HTML. Sont décisives pour l'accès à l'arborescence d'éléments HTML les méthodes DOM de l'objet document getElementById et getElementsByName.
En plus, l'objet document contient lui-même une série de propriétés et méthodes importantes qui sauvegardent des propriétés globales au document et exécutent des fonctions. La plupart d'entre elles sont également soutenues par le modèle DOM. L'adressage de ces propriétés et méthodes fonctionnent comme suit:
x = document.title;
x = window.document.title;
secondefenetre = window.open("fichier2.htm", "fenetre");
x = secondefenetre.document.title;
y = parent.frames[2].document.bgColor;
document.write("Hello monde");
window.document.write("Hello monde");
secondefenetre.document.close();
parent.frames[2].document.close(); |
Les propriétés de l'objet document comme par exemple le titre du fichier HTML affiché (<title>...</title>), peuvent être adressés avec document, pour le titre du document donc document.title. C'est de cette façon que les méthodes de l'objet document sont adressées, par exemple la méthode write avec document.write(). Vous pouvez noter également window.document.title ou bien window.document.write(). Étant donné qu'il s'agit ici du contenu de la fenêtre actuelle, la mention de l'objet fenêtre n'est pas absolument indispensable. Il en va autrement pour l'accès à d'autres fenêtres ou fenêtres cadres. Dans ces cas là, vous devez adresser la fenêtre correctement. Lisez pour ce qui concerne les fenêtres supplémentaires la partie sur les généralités sur l'utilisation de l'objet window et pour les fenêtres cadres la partie sur les généralités sur l'utilisation de l'objet frames.
 |
alinkColorSauvegarde la couleur pour les liens alors qu'ils sont cliqués, comme elle peut être fixée par l'attribut alink= dans le repère <body> ou par l'utilisateur dans les réglages de son navigateur (voir aussi Couleur pour l'arrière plan, le texte et les liens).
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var i = 0;
function autrecouleur() {
if(i == 0) document.alinkColor = "#000000";
else if(i == 1) document.alinkColor = "#FF0000";
else if(i == 2) document.alinkColor = "#0000FF";
else if(i == 3) document.alinkColor = "green";
i = i + 1; if(i > 3) i = 0;
}
//-->
</script>
</head><body>
<a href="javascript:autrecouleur()">Couleur du lien</a>
</body></html>
|
L'exemple appelle, lorsqu'on clique sur le lien, une fonction du nom de autrecouleur(). Cette fonction modifie à chaque fois qu'elle est appelée la valeur de document.alinkColor. Notez que pour cela, les couleurs sont notées soit sous forme hexadécimale, soit sous forme de noms de couleur autorisés (voir aussi Définir les couleurs en HTML). La valeur doit dans tous les cas figurer entre guillemets.
Cette implémentation classique, valide dans JavaScript traditionnel de alinkColor comme propriété directe de l'objet document est réprouvée par le modèle DOM. D'après le modèle DOM l'objet élément HTML body doit posséder cette propriété.
Opera 5.12 n'interprète pas la propriété alinkColor.
|
|
bgColorSauvegarde la couleur d'arrière plan du fichier HTML, comme elle peut être fixée par l'attribut bgcolor= dans le repère <body> ou par l'utilisateur dans les réglages de son navigateur. (voir aussi Couleur pour l'arrière plan, le texte et les liens).
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var x1 = 0, x2 = 0;
function setColor() {
document.bgColor ="#" + X[x1] + X[x2] + X[x1] + X[x2] + X[x1] + X[x2];
x2 = x2 + 1;
if(x2 % 16 == 0) { x2 = 0; x1 = x1 + 1; }
}
for(var i = 0; i < 255; ++i) {
window.setTimeout("setColor()",20);
}
//-->
</script>
</head><body>
</body></html>
|
L'exemple fait à la lecture du fichier un fondu enchaîné depuis le noir en passant par les nuances de gris jusqu'au blanc. Pour cela un Array X a été défini, dans lequel les chiffres hexadécimaux de 0 à 9 et de A à F ont été sauvegardés. Dans une boucle for il est compté de 0 à 255. La raison en est que la valeur maximale d'une valeur de couleur RGB peut être 255 (sous forme décimale). À l'intérieur de la boucle, la fonction setColor() est appelée avec à chaque fois un délai de 20 millièmes de seconde grâce à window.setTimeout(). Dans cette fonction une nouvelle valeur est affectée à la propriété document.bgColor. Ici est reconstituée à partir des chiffres définis auparavant de l'array X une mention de couleur valide.
Notez que pour cela, les couleurs sont notées soit sous forme hexadécimale, soit sous forme de noms de couleur autorisés (voir aussi Définir les couleurs en HTML).
La valeur doit dans tous les cas figurer entre guillemets. Ce n'est pas le cas dans l'exemple ci-dessus étant donné qu'il s'agit là d'une chaîne de caractères générée dynamiquement. Autrement, les mentions seraient par exemple "#0099CC" ou "blue".
Cette implémentation classique, valide dans JavaScript traditionnel de bgColor comme propriété directe de l'objet document est réprouvée par le modèle DOM. D'après le modèle DOM l'objet élément HTML body doit posséder cette propriété.
Dans de nombreuses documentations, il est mentionné que la mention hexadécimale de couleur doit se faire sans le signe dièse (#). Le navigateur Netscape 6 n'interprète pourtant sous une mention doctype telle que par exemple <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> la couleur que lorsque le signe dièse (#) a été noté.
Étant donné que l'utilisation du signe dièse ne crée pas non plus de problème avec les navigateurs plus anciens, il est recommandé de toujours le noter.
Opera 5.12 n'interprète pas encore la propriété document.bgColor. Netscape 6.1 n'interprète pas l'exemple ci-dessus (contrairement à Netscape 4.x).
|
|
charsetSauvegarde le jeu de caractères défini d'un document.
<html><head><title>Test</title>
<meta http-equiv="content-type" content="text/html;CHARSET=iso-8859-1">
<script type="text/javascript">
<!--
function iso5() {
document.charset="iso-8859-5";
document.open();
document.write("texte avec é è ù æ à ç ");
document.close();
}
//-->
</script>
</head><body>
<a href="javascript:iso5()">iso-8859-5</a>
</body></html>
|
L'exemple contient dans l'entête du fichier une mention pour la définition du jeu de caractères. Là a été défini iso-8859-1 (le jeu de caractères standard pour les langues occidentales y compris le français). En outre le fichier contient un lien. En le cliquant, la fonction iso5(). Cette fonction modifie le jeu de caractères en iso-8859-5 (cyrillique). Ensuite des contenus sont écrits dans la fenêtre du document de façon dynamique. L'Explorer Internet MS écrit le texte mentionné dans la fenêtre du document tout en activant cependant une police Unicode spéciale pour la représentation.
Veillez pour écrire le nouveau contenu à utiliser les méthodes open() et close().
L'Explorer Internet MS n'accepte souvent la modification du jeu de caractères qu'après avoir rechargé la page et exécuté à nouveau la modification.
|
|
cookieLes cookies (cookies = biscuits - l'origine du nom est inconnue) vous offrent la possibilité, directement depuis un fichier HTML, de sauvegarder des données sur l'ordinateur de l'utilisateur et de les lire lors d'un nouvel appel du même fichier HTML. Ainsi une page WWW peut elle réagir de façon dynamique à des données sauvegardées. Seuls les cookies que l'on a posés soi-même peuvent être lus. Une transmission de virus par des cookies est exclue. Un cookie correspond à peu près à une inscription dans un fichier INI sous MS-Windows. Une variable avec une nouvelle valeur est sauvegardée, par exemple la date et l'heure de la dernière visite d'une page WWW. Les cookies ne peuvent lire aucune donnée de l'ordinateur de l'utilisateur. Étant donné la méfiance qui règne chez les utilisateurs qui ne savent pas ce qu'est un cookie, vous ne devez les employer que si vous avez une bonne raison de le faire.
Netscape gère les Cookies dans un fichier du nom de cookies.txt sur l'ordinateur de l'utilisateur. L'Explorer Internet MS gère les cookies dans un sous répertoire du répertoire Windows. .
<html><head><title>Test</title> <script type="text/javascript"> <!-- var sauvegarde = "rien n\'est sauvegardé"; if(document.cookie) sauvegarde = document.cookie; else document.cookie = "Date et heure=" + document.lastModified; alert(document.lastModified + " - " + sauvegarde); //--> </script> </head><body> </body></html> |
La lecture d'un cookie fonctionne d'après le schéma x = document.cookie.
L'écriture d'un cookie fonctionne d'après le schéma document.cookie = x.
L'exemple demande à la lecture du fichier si ce fichier a déjà posé un cookie. Une telle demande est possible avec if(document.cookie). Dans l'exemple, la variable sauvegarde se voit affecter la valeur du cookie sauvegardé, au cas où un cookie est disponible. Dans l'alternative else de l'exemple est considéré le cas où aucun cookie n'a encore été posé. Dans ce cas, la chaîne de caractères Date et heure= est écrite comme cookie, suivie de la valeur de lastModified À la fin deux valeurs sont données avec alert(): à savoir la valeur de document.lastModified et la valeur de la variable sauvegarde. Si un cookie est posé (donc à partir du deuxième appel du fichier), le contenu du cookie est sorti, il se distingue de document.lastModified si le fichier a été modifié entre temps.
En posant un cookie, vous pouvez en outre mentionner une date de péremption. Quand l'échéance est atteinte, le navigateur efface lui-même le cookie. Pour cela, notez une instruction telle que:
document.cookie = "expires=" + echeance.
Afin que le navigateur interprète cette propriété, la date d'échéance doit être formatée avec la méthode toGMTString() de l'objet Date.
<html><head><title>Test</title> <script type="text/javascript"> <!-- var echeance = new Date(); var danscinqjours = echeance.getTime() + (5 * 24 * 60 * 60 * 1000); echeance.setTime(danscinqjours); document.cookie = "Name=SELFHTML; expires=" + echeance.toGMTString(); alert(document.cookie) ; //--> </script> </head><body> </body></html> |
Dans la variable echeance est placée une nouvelle instance de l'objet Date. Celle-ci contient la date actuelle. La date de péremption est 5 jours après la pose du témoin. Pour déterminer la date de péremption, la date actuelle est transformée en millièmes de secondes avec la méthode getTime(). À cette valeur est ajouté le nombre de millièmes de seconde pour 5 jours. Pour rechercher la valeur en millièmes de seconde, vous pouvez comme dans l'exemple, transmettre une chaîne de produits: 1000 millièmes de seconde font une seconde, multipliés par 60 font une minute, multipliés par 60 font une heure, multipliés par 24 font un jour, multipliés par 5 font cinq jours.
Pour obtenir une chaîne de caractères pour la date qui soit valide, une nouvelle valeur est affectée à la date avec la méthode
setTime(). La date de péremption correcte est alors sauvegardée dans la variable echeance.
La date formatée avec la méthode toGMTString() est finalement transmise au témoin.
Chaque fichier HTML a connaissance de tous les témoins posés par des fichiers du même répertoire ou d'un répertoire hiérarchiquement supérieur. Supposons que dans un domaine http://www.test.fr avec le sous-répertoire /A il y ait aussi bien dans ce sous-répertoire que dans le répertoire racine / un fichier nommé x.htm. Chacun des deux fichiers contient un script JavaScript avec l'instruction:
document.cookie = location.href;
Par ce biais l'URI du fichier est sauvegardée dans un cookie. En outre, il y a dans les deux répertoires un fichier y.htm, qui contiennent chacun l'instruction JavaScript suivante:
document.write(document.cookie);
Cela permet d'écrire de façon dynamique un témoin existant dans la fenêtre du document. Pour la disposition supposée, les fichiers suivants livrent les sorties suivantes:
http://www.test.fr/y.htm livre:
http://www.test.fr/x.htm (peut donc lire le témoin que x.htm du même répertoire a posé)
http://www.test.fr/A/y.htm livre:
http://www.test.fr/A/x.htm; http://www.test.fr/x.htm (peut donc lire le témoin que x.htm du même répertoire a posé, ainsi que le témoin que x.htm du répertoire hiérarchiquement supérieur a posé)
Dans l'Explorer Internet MS à partir de la version 5 et dans Netscape 6 vous pouvez demander au moyen de la propriété navigator.cookieEnabled si l'utilisateur a activé les témoins.
Opera 5.12 ne permet pas la pose de témoins dans le fichier de protocole.
|
|
defaultCharsetSauvegarde le jeu de caractères que l'utilisateur a installé comme standard sur son navigateur. Si le fichier ne contient pas de mention Meta pour le jeu de caractères utilisé, c'est le jeu de caractères standard qui sera pris.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
alert("Vous avez réglé le jeu de caractères suivant comme standard: " + document.defaultCharset);
//-->
</script>
</head><body>
</body></html>
|
L'exemple sort à la lecture grâce à alert() quel jeu de caractères l'utilisateur a choisi comme jeu de caractères standard.
|
|
fgColorSauvegarde la couleur pour le texte comme elle peut être fixée par l'attribut text= dans le repère <body> ou par l'utilisateur dans les réglages de son navigateur (voir aussi Couleur pour l'arrière plan, le texte et les liens).
<html><head><title>Test</title> <script type="text/javascript"> <!-- if(parent.frames[0].document.fgColor == "#000000") document.fgColor = "#FF0000"; //--> </script> </head><body> Un petit texte </body></html> |
L'exemple suppose que le fichier actuel se trouve dans un jeu de cadres. En lisant le fichier il est vérifié si la couleur de texte d'une autre (de la première) fenêtre cadre est le noir (if(parent.frames[0].document.fgColor == "#000000")). Si c'est le cas la couleur du texte du fichier actuel est réglée sur le rouge (document.fgColor = "#FF0000";). Pensez que les modifications de couleurs pour la couleur de texte, dans Netscape jusqu'à la version 4 comprise, n'ont un effet qu'avant qu' un texte HTML quelconque soit lu. Un attribut posé le cas échéant dans le repère <body> écrase l'affectation de couleur, au cas où celle-ci était fixée auparavant avec JavaScript dans l'entête de fichier. Notez que pour cela, les couleurs sont notées soit sous forme hexadécimale, soit sous forme de noms de couleur autorisés (voir aussi définir les couleurs en HTML). La couleur doit dans tous les cas figurer entre guillemets.
Cette implémentation classique, valide dans JavaScript traditionnel de alinkColor comme propriété directe de l'objet document est réprouvée par le modèle DOM. D'après le modèle DOM l'objet élément HTML body doit posséder cette propriété.
Opera 5.12 n'interprète pas encore cette propriété.
|
|
lastModifiedSauvegarde la date et l'heure de la dernière modification du fichier dans le format international d'après GMT (heure de Greenwich).
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
document.write("dernière mise à jour: " + document.lastModified);
//-->
</script>
</body></html>
|
L'exemple écrit de façon dynamique dans le fichier HTML grâce à la méthode write() l'heure de la dernière modification.
.
Le formatage de la chaîne de caractères dépend pour une large part du navigateur et du système d'exploitation utilisé.
Tenez compte en particulier lors du traitement de cette propriété avec l'objet Date, que quelques versions de Netscape 4 transmettent un millésime à deux chiffres à l'objet Date. Cela a pour conséquence, entre autres que le jour de semaine et l'année retournés sont erronés.
|
|
linkColorSauvegarde le couleur pour les liens comme elle peut être fixée par l'attribut link= dans le repère <body> ou par l'utilisateur dans les réglages de son navigateur (voir aussi Couleur pour l'arrière plan, le texte et les liens).
<html><head><title>Test</title> <script type="text/javascript"> <!-- document.linkColor = parent.frames_0].document.linkColor; //--> </script> </head><body> <a href="#">Un lien</a> </body></html> |
L'exemple suppose que le fichier actuel se trouve dans un jeu de cadres. À la lecture du fichier, la couleur des liens du fichier actuel est réglée sur la même couleur que la couleur de lien du fichier qui se trouve dans une autre (la première) fenêtre cadre.
Pensez que les modifications de couleurs pour la couleur des liens dans Netscape jusqu'à la version 4 comprise, n'ont un effet qu'avant qu'un texte HTML quelconque soit lu. Un attribut posé le cas échéant dans le repère <body> écrase l'affectation de couleur, au cas où celle-ci était fixée auparavant avec JavaScript dans l'entête de fichier. Notez que pour cela, les couleurs sont notées soit sous forme hexadécimale, soit sous forme de noms de couleur autorisés (voir aussi définir les couleurs en HTML). ). La couleur doit dans tous les cas figurer entre guillemets.
Cette implémentation classique, valide dans JavaScript traditionnel de alinkColor comme propriété directe de l'objet document est réprouvée par le modèle DOM. D'après le modèle DOM l'objet élément HTML body doit posséder cette propriété.
Opera 5.12 n'interprète pas encore cette propriété.
|
|
referrerSauvegarde l'adresse URI à partir de laquelle le fichier actuel a été appelé. La condition préalable est qu'elle ait appelé le fichier actuel par l'intermédiaire d'un lien. Si l'adresse du fichier a été choisie par exemple à partir d'un signet ou entrée directement dans la ligne d'adresse du navigateur, rien n'est sauvegardé dans document.referrer. Pour l'Explorer Internet MS et pour Netscape 6, n'est sauvegardée une valeur dans document.referrer que lorsque l'appel du fichier actuel a eu lieu par protocole HTTP - à savoir donc avec un lien du type http://....
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
document.write("<h1>Cher visiteur<\/h1>");
document.write("Tu es donc venu de " + document.referrer + " pour nous trouver ici");
//-->
</script>
</body></html>
|
L'exemple sort un texte HTML avec la méthode write(), qui donne l'adresse de laquelle l'utilisateur a appelé le fichier actuel.
Opera 5.12 n'interprète pas encore cette propriété.
|
|
titleSauvegarde le titre d'un fichier HTML tel qu'il a été affecté avec les repères <title>...</title>.
<html><head><title>Test</title> </head><body> <h1> <script type="text/javascript"> <!-- document.write(document.title); //--> </script> </h1> </body></html> |
L'exemple écrit de façon dynamique le titre d'un fichier HTML comme contenu avec la méthode write() dans un titre N°1 (<h1>...</h1>).
Dans l'Explorer Internet MS et dans le navigateur Netscape vous ne pouvez pas non plus modifier cette propriété.
|
|
URLSauvegarde l'adresse URI complète du document actuel.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
document.write("Ce fichier: " + document.URL);
//-->
</script>
</body></html>
|
L'exemple écrit avec la méthode write() l' adresse URL complète du ficher actuel dans le texte. Cela peut être approprié par exemple quand le fichier fait partie d'un jeu de cadres. Les utilisateurs peuvent alors se référer à l'adresse URL exacte s'ils veulent communiquer quelque chose au sujet du contenu du cadre affiché.
|
|
vlinkColorSauvegarde la couleur pour les liens à des pages déjà visitées comme elle peut être fixée par l'attribut vlink= dans le repère <body> ou par l'utilisateur dans les réglages de son navigateur (voir aussi Couleur pour l'arrière plan, le texte et les liens).
<html><head><title>Test</title> <script type="text/javascript"> <!-- document.vlinkColor = parent.frames[0].document.vlinkColor; //--> </script> </head><body> <a href="../document.htm">lien</a> </body></html> |
L'exemple suppose que le fichier actuel se trouve dans un jeu de cadres. À la lecture du fichier la couleur pour les liens menant à des pages déjà visitées du fichier actuel est réglée comme la couleur du fichier qui se trouve dans une autre (la première) fenêtre cadre.
Pensez que les modifications de couleurs pour la couleur des liens dans Netscape jusqu'à la version 4 comprise, n'ont un effet qu'avant qu'un texte HTML quelconque soit lu. Un attribut posé le cas échéant dans le repère <body> écrase l'affectation de couleur, au cas où celle-ci était fixée auparavant avec JavaScript dans l'entête de fichier. Notez que pour cela, les couleurs sont notées soit sous forme hexadécimale, soit sous forme de noms de couleur autorisés (voir aussi définir les couleurs en HTML). ). La couleur doit dans tous les cas figurer entre guillemets.
Cette implémentation classique, valide dans JavaScript traditionnel de alinkColor comme propriété directe de l'objet document est réprouvée par le modèle DOM. D'après le modèle DOM l'objet élément HTML body doit posséder cette propriété.
Opera 5.12 n'interprète pas encore cette propriété.
|
|
captureEvents()Surveille les événements de l'utilisateur dans le document actuel. Fonctionne exactement comme captureEvents() pour l'objet window (pour plus de détails, s'y référer). La seule différence réside dans le fait qu'avec document.caputeEvents() vous ne pouvez surveiller que des événements dans la fenêtre du document, et non pas des événements dans la totalité de la fenêtre (à laquelle appartiennent aussi par exemple la barre de titre, la barre des menus etc...
|
|
close()Ferme un contenu de document qui a été ouvert avec la méthode open() et écrit avec write() ou bien writeln().
<html><head><title>Test</title> </head><body> <script type="text/javascript"> <!-- document.open(); document.write(document.URL); document.close(); //--> </script> </body></html> |
L'exemple ouvre le contenu du document pour écrire et écrit ensuite quelque chose (l'adresse URI actuelle) avec la méthode write(), et termine enfin le processus avec document.close().
Avec la fermeture du document, il est signalé au navigateur que la construction de la page est terminée. C'est indispensable en particulier lors de l'écriture dynamique de 
cadres et pour l'écriture de calques.
|
|
createAttribute()Crée un nouvel attribut pour l'arborescence. Peut être employé sur des documents HTML, mais également sur des documents XML.
<html><head><title>Test</title>
</head><body>
<h1>Une page très dynamique</h1>
<script type="text/javascript">
<!--
var alignement = document.createAttribute("align");
alignement.nodeValue = "right";
var Element = document.getElementsByTagName("h1")[0];
Element.setAttributeNode(alignement);
//-->
</script>
</body></html>
|
L'exemple contient un titre N°1 sans autre attribut. Dessous est noté un passage JavaScript. Là est créé un nouvel attribut nommé align avec document.createAttribute("align"), qui peut être appliqué dans divers éléments HTML pour en aligner le contenu. L'attribut n'en a pas d'effet pour autant - il ne se trouve pas dans l'arborescence du document et n'a pas non plus de valeur. L'attribut est en somme créé en tant qu'objet.
La méthode createElement() renvoie l'objet créé, donc en l'occurrence l'attribut align. La valeur renvoyée est sauvegardée dans la variable alignement. Par cette variable, l'attribut nouvellement créé peut être adressé.
Afin que l'attribut reçoive un contenu, la valeur souhaitée right est attribuée au nœud attribut par la propriété d'objet nodeValue. Enfin, l'attribut et sa valeur doivent encore être placés dans l'arborescence existante. Ceci s'obtient dans l'instruction Element.setAttributeNode(alignement); (voir aussi setAttributeNode()). Ici a été sauvegardé au préalable dans la variable Element l'élément h1, auquel il a été accédé avec getElementsByTagName(). C'est ainsi que le titre est aligné à droite de façon dynamique.
Avec l'Explorer Internet 5.5, cet exemple ne pouvait pas être retracé, même si Microsoft soutient avoir implémenté cette méthode dans l'Explorer Internet. Dans l'Explorer Internet MS 6.0beta l'exemple peut par contre être retracé.
|
|
createElement()Crée un nouvel élément pour l'arborescence. Peut être employé sur des documents HTML, mais également sur des documents XML.
<html><head><title>Test</title>
</head><body>
<div id="passage" style="border:1px black solid; padding:10px">
</div>
<script type="text/javascript">
<!--
var montitre = document.createElement("h1");
var montexte = document.createTextNode("Une page très dynamique");
montitre.appendChild(montexte);
var passagesortie = document.getElementById("passage");
passagesortie.appendChild(montitre);
//-->
</script>
</body></html>
|
L'exemple contient un passage div, qui dans un premier temps est vide. Dessous est noté un passage JavaScript. Là est créé avec document.createElement("h1") un nouvel élément du type h1, à savoir un titre HTML N°1. Le titre n'en est cependant pas pour autant affiché - il n'est même pas encore rattaché à l'arborescence du document. L'élément est somme toute créé en tant qu'objet.
La méthode createElement() renvoie l'objet créé, donc en l'occurrence l'élément h1. La valeur renvoyée est sauvegardée dans la variable montitre. Par cette variable, l'élément nouvellement créé peut être adressé.
.
Afin que le titre reçoive un contenu, un nœud de texte est créé, avec createTextNode(). Avec appendChild() le nœud de texte est ensuite défini comme élément enfant du titre N°1. Enfin le titre complet doit encore être placé dans l'arborescence existante. Cela se passe dans l'instruction passagesortie.appendChild(montitre);. Ici a été sauvegardé au préalable dans la variable passagesortie l'élément vide div, auquel il a été accédé avec getElementById(). C'est ainsi que le titre et son texte, donc en tant qu'élément enfant sont insérés de façon dynamique dans le passage div.
|
|
createTextNode()Créée un nouveau nœud de texte pour l'arborescence. Peut être employé sur des documents HTML, mais également sur des documents XML.
<html><head><title>Test</title>
</head><body>
<p id="paragraphe"></p>
<script type="text/javascript">
<!--
var horodateur = document.createTextNode(document.lastModified);
var texteprecedent = document.createTextNode("Date de la dernière mise à jour: ");
document.getElementById("paragraphe").appendChild(texteprecedent)?
document.getElementById("paragraphe").appendChild(horodateur);
//-->
</script>
</body></html>
|
L'exemple contient un paragraphe p qui dans un premier temps est vide. Dessous est noté un passage JavaScript. Là sont créées avec document.createTextNode() deux nouvelles chaînes de caractères, la première étant la valeur sauvegardée de lastModified, et l'autre un texte statique. Les textes n'en sont cependant pas pour autant affichés - ils ne sont même pas encore rattachés à l'arborescence du document. Les nœuds de texte sont somme toute créés en tant qu'objet.
La méthode createTextNode() renvoie l'objet créé. La valeur renvoyée est sauvegardée pour les deux appels de l'exemple dans les variables horodateur et texteprecedent. Par ces variables, les nœuds de texte nouvellement créés peuvent être adressés.
Avec appendChild() les nœuds de texte sont ensuite définis comme éléments enfants du paragraphe de texte noté par JavaScript. À cette fin , il est accédé avec getElementById() à l'élément p. Le paragraphe vide reçoit ainsi son contenu de façon dynamique.
|
|
getElementById()Accède, conformément à la variante HTML du modèle DOM, à un élément HTML qui possède un attribut id.
<html><head><title>Test</title>
<style type="text/css">
<!--
.normal { font-style:normal }
-->
</style>
<script type="text/javascript">
<!--
function aligner(comment) {
document.getElementById("indecis").align = comment;
}
//-->
</script>
</head><body>
<h1 id="indecis">Où est donc ma place?</h1>
<a href="javascript:aligner('left')">à gauche?</a><br>
<a href="javascript:aligner('center')">au centre?</a><br>
<a href="javascript:aligner('right')">à droite?</a><br>
</body></html>
|
L'exemple contient un titre N°1 avec l'attribut id="indecis". Au dessous sont notés trois liens. Chacun des liens fait appel à la fonction aligner()qui est notée dans l'entête de fichier et lui transmettent pour chacun d'eux une valeur différente. Dans la fonction aligner() il est accédé grâce à document.getElementById("indecis") au titre N°1. La fonction attribue à la propriété align la valeur respectivement transmise. C'est ainsi que l'alignement du titre est modifié de façon dynamique.
La méthode getElementById() régit en fin de compte l'accès aux éléments HTML. Pour savoir ce que vous pouvez faire avec quels éléments HTML, vous pouvez avoir une vue d'ensemble dans la partie sur les Objets éléments HTML . Les autres possibilités d'influencer de façon dynamique les éléments HTML sont offertes par l'objet node.
Vous pouvez également transmettre des variables à cette méthode. Pour ce faire, notez simplement les noms de variables sans guillemets à la place d'une valeur fixe par exemple getElementById(nom de variable).
La condition préalable en est cependant que la variable existe aussi.
Opera 5.12 connaît également la méthode getElementById() pour adresser des éléments. L'exemple ci-dessus ne fonctionne cependant pas avec ce navigateur.
|
|
getElementsByName()Accède, conformément à la variante HTML du modèle DOM, à un élément HTML qui possède un attribut name.
<html><head><title>Test</title>
<style type="text/css">
<!--
.normal { font-style:normal }
-->
</style>
<script type="text/javascript">
<!--
function cocher()
document.getElementsByName("ingredient")[0].checked = true;
}
//-->
</script>
</head><body>
<form name="formulaire" action="">
<input type="checkbox" name="ingredient" value="Salami"> Salami <br>
<input type="checkbox" name="ingredient" value="champignons"> champignons <br>
<input type="checkbox" name="ingredient" value="olives"> olives <br>
<input type="button" value="Test" onClick="cocher()">
</form>
</body></html>
|
Dans l'exemple est défini un groupe de cases à cocher qui portent toutes le même nom à savoir ingredient. Au dessous est noté un bouton pouvant être cliqué, et qui, lorsqu'on le clique appelle la fonction cocher() qui est notée dans l'entête du fichier. Cette fonction coche la première des cases à cocher. Par getElementsByName("ingredient")[0] elle accède au premier élément avec name=quot;ingredient". Même si un tel nom d'élément n'est placé qu'une fois dans le document, il faut toujours accéder à l'élément avec la syntaxe Array. Ainsi dans l'exemple l'élément de formulaire pourrait être adressé par exemple par getElementsByName("formulaire")[0]. La deuxième case à cocher avec le nom "ingredient" pourrait être adressée par getElementsByName("ingredient")[1] etc...
La méthode getElementsByName() régit en fin de compte l'accès aux éléments HTML. Pour savoir ce que vous pouvez faire avec quels éléments HTML, vous pouvez avoir une vue d'ensemble dans la partie sur les Objets éléments HTML . Les autres possibilités d'influencer de façon dynamique les éléments HTML sont offertes par l'objet node.
Vous pouvez également transmettre des variables à cette méthode. Pour ce faire, notez simplement les noms de variables sans guillemets à la place d'une valeur fixe par exemple getElementsByName(nom de variable).
La condition préalable en est cependant que la variable existe aussi.
Opera 5.12 connaît également cette méthode pour adresser les éléments.
|
|
getElementsByTagName()Accède, conformément à la variante XML du modèle DOM à un élément au choix dans l'arborescence d'éléments du document. Le nom d'élément est ici déterminant, en HTML par exemple des noms comme h1, blockquote ou bien img. Pour chaque type d'élément HTML est créé un tableau (Array) dans le document, par lequel les différents éléments peuvent être adressés.
Malheureusement, cette méthode du modèle DOM n'est pas prévu dans la variante HTML, pourtant elle fonctionne malgré tout avec les interpréteurs JavaScript des navigateurs plus récents. C'est pourquoi, elle est décrite ici - à la différence des autres propriétés et méthodes de l'objet document - dans la variante XML du modèle DOM.
<html><head><title>Test</title>
<style type="text/css">
<!--
.normal { font-style:normal }
-->
</style>
<script type="text/javascript">
<!--
function nouveautexte() {
document.getElementsByTagName("p")[0].firstChild.data = "nouveau premier";
document.getElementsByTagName("p")[1].firstChild.data = "nouveau deuxième";
document.getElementsByTagName("p")[2].firstChild.data = "nouveau troisième";
document.getElementsByTagName("h1")[0].firstChild.data = "Tout change";
}
//-->
</script>
</head><body>
<h1>Dynamique, très dynamique</h1>
<p>Un premier paragraphe</p>
<p>Un deuxième paragraphe</p>
<p>Un troisième paragraphe</p>
<p><a href="javascript:nouveautexte()">Nouveaux textes</a></p>
</body></html>
|
Dans l'exemple sont notés un titre N°1 et trois paragraphes de texte. Aucun de ces éléments ne contient le moindre attribut, par lequel il pourrait être adressé individuellement. Au dessous est noté un lien qui appelle, quand il est cliqué la fonction nouveautexte() qui est notée dans l'entête de fichier. Cette fonction modifie de façon dynamique les textes des trois paragraphes et du titre.
Par document.getElementsByTagName("p")[0] elle accède au premier paragraphe de texte du document, par document.getElementsByTagName("p")[1] au deuxième, par document.getElementsByTagName("h1")[0] au premier titre N°1 etc...
La méthode getElementsByTagName() régit en fin de compte l'accès aux éléments. Pour savoir ce que vous pouvez faire avec quels éléments HTML, vous pouvez avoir une vue d'ensemble dans la partie sur les Objets éléments HTML .Les autres possibilités d'influencer de façon dynamique les éléments HTML sont offgrtes par l'objet node. La propriété firstChild.data, utilisée dans l'exemple ci-dessus pour modifier de façon dynamique le texte contenu dans l'élément, fait partie elle-aussi du complexe de l'objet node.
Opera 5.12 connaît également la méthode getElementsByTagName() pour adresser des éléments. L'exemple ci-dessus ne fonctionne cependant pas avec ce navigateur.
|
|
getSelection()Recherche du texte sélectionné par l'utilisateur dans le document. Dans Netscape 4 cette méthode était liée à l'objet document. Depuis Netscape 6 elle est affiliée à l'objet window.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function texteselectionne()
{
if (window.getSelection) alert(window.getSelection());
else if (document.getSelection) alert(document.getSelection());
else if (document.selection) alert(document.selection.createRange().text);
}
//-->
</script>
</head><body>
Beaucoup de texte à sélectionner beaucoup de texte à sélectionner
<form>
<input type="button" value="montrer" onMouseDown="texteselectionne();">
</form>
</body></html>
|
L'exemple appelle, lorsque l'on clique sur le bouton défini, la fonction texteselectionne(). Dans cette fonction, il est vérifié si le navigateur connaît la méthode window.getSelection(). Si c'est le cas, alors elle est appelée et le texte sélectionné est sorti. Si le navigateur ne connaît pas cette méthode, alors il est vérifié s'il connaît le méthode document.getSelection() et le cas échéant, le texte sélectionné est sorti.
Le deuxième embranchement else-if- de l'exemple traite un cas particulier pour l'Explorer Internet MS. Celui-ci ne connaît pas la méthode getSelection() mais toutefois un objet selection. Avec document.selection.createRange().text vous recevez ici le texte sélectionné. La condition préalable est que du texte ait été sélectionné auparavant. Sinon la fonction texteselectionne() donne comme résultat une chaîne de caractères vide ("").
|
|
handleEvent()Transmet un événement à un élément qui est capable de réagir à l'événement. Cela fonctionne exactement comme handleEvent() pour l'objet window (pour plus de détails s'y référer). La seule différence réside dans le fait que document.handleEvent() ne peut transmettre que des événements qui sont surveillés avec document.captureEvents().
|
|
open()Ouvre un document pour écrire. Pour cela, aucune fenêtre n'est ouverte mais le contenu de la fenêtre est libéré pour l'écriture. Au cas où le document avait un contenu auparavant, par exemple un fichier HTML chargé en premier lieu, vous devez d'abord appeler la méthode close().
Peut être appelé sans, avec un ou avec deux paramètres. Les paramètres suivants sont possibles:
1. Type Mime = Une désignation du type Mime pour le genre de données qui doivent être écrites dans la fenêtre du document. Ainsi vous pouvez avec la mention "x-world/x-vrml" ouvrir la fenêtre du document pour écrire du code VRML. Avec les commandes write()- et writeln() vous pouvez alors écrire du code VRML de façon dynamique.
2. replace = avec document.open("text/html","replace") vous ouvrez le document pour écrire en HTML et faites en sorte que le nouveau contenu du document occupe la même place dans l'historique des pages visitées que le document dans lequel se trouve la commande open.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
function change() {
document.open();
document.write("<a href=\"fichier.htm\">Et maintenant, je suis ici</a>");
document.close();
}
document.open();
document.write("<a href=\"javascript:change()\">Je suis encore ici</a>");
document.close();
//-->
</script>
</body></html>
|
Le script en exemple exécute dans un premier temps la partie inférieure du code étant donné que la partie supérieure fait partie de la fonction change() qui ne sera exécutée que sur appel. Dans la partie inférieure un lien est écrit, dans la fenêtre du document, de façon dynamique avec JavaScript. Si l'utilisateur clique sur le lien la fonction change() est appelée. Cette fonction ouvre la fenêtre du document pour écrire à nouveau et écrit de façon dynamique un lien au fichier actuel (il est supposé que le fichier-exemple s'appelle fichier.htm). Si l'utilisateur clique sur le lien, le fichier est chargé et ainsi c'est le premier lien qui est écrit à nouveau.
Notez que l'exemple ne fonctionne comme c'est décrit qu'à partir de Netscape 3.x. Certes, Netscape 2.x connaît déjà aussi document.open() mais ne vide pas la fenêtre du document.
Opera 5.12 connaît d'après sa documentation, la méthode open() et l'applique correctement dans de nombreux cas. Cet exemple ne peut cependant pas être exécuté jusqu'à son terme par le navigateur et ne peut être exécuté correctement que si l'on emploie pas document.open(). Comme alternative, vous pouvez appeler la fonction avec <a href="#" onclick="change();return false">.
|
|
releaseEvents()Termine la surveillance d'événements utilisateur. Fonctionne exactement comme releaseEvents() pour l'objet window (pour plus de détails, s'y référer). La seule différence réside dans le fait que document.releaseEvent() ne peut terminer que des surveillances d'événements qui sont commencées avec document.captureEvents().
Netscape 6 n'interprète pas cette méthode (n'interprète plus).
|
|
routeEvent()Transmet un événement utilisateur à l'objet document. À partir de là, l'événement est transmis plus bas dans la hiérarchie jusqu'à ce qu'il rencontre un Event-Handler qui traite l'événement. Fonctionne exactement comme routeEvent() pour l'objet window (pour plus de détails, s'y référer). La seule différence réside dans le fait que document.routeEvent() ne s'applique pas au niveau de la fenêtre, mais au niveau du document.
Netscape 6 n'interprète pas cette méthode (n'interprète plus).
|
|
write()Sort un texte dans le document. Attend une chaîne de caractères ou une expression JavaScript comme paramètre.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
tonnom = prompt("Entre ton nom:","Nom");
document.write("<b>Bonjour " + tonnom + "<\/b>");
//-->
</script>
</body></html>
|
L'exemple montre à la lecture du fichier avec prompt() une boite de dialogue dans laquelle l'utilisateur doit entrer son nom. La valeur entrée est sauvegardée dans la variable tonnom Enfin est écrit avec document.write() le mot "Bonjour" suivi d'un espace. À la suite de cette chaîne de caractères est accrochée la variable tonnom. Ainsi par exemple on a à la suite dans le texte "Bonjour Carole" si dans la boite de dialogue "Carole" a été entré comme nom. Pour obtenir une sortie en caractères gras, ce texte est placé dans l'élément HTML correspondant.
Il est également permis d'employer plusieurs chaînes de caractères ou expressions, séparées par des virgules à l'intérieur de document.write(), par exemple:
document.write("Vous ", document.layers ? "utilisez Netscape à partir de V4" : "n'utilisez pas Netscape à partir de V4");
Cet exemple contient d'abord une chaîne de caractères, puis séparée par une virgule une expression complexe qui recherche si l'utilisateur utilise un navigateur qui connaît l'objet layers.
La barre oblique / dans les repères de fermeture doit être masquée pour la sortie avec le signe \. Cela s'applique en particulier quand vous désirez écrire de façon dynamique encore du code JavaScript sous la forme document.write("<script>...</script>"). Quand il est écrit masqué <script>...<\/script>, le passage script écrit de façon dynamique est interprété comme bloc autonome et le script actuel continue à être exécuté sans en tenir compte.
|
|
writeln()Comme write() - insère cependant automatiquement un saut de ligne à la fin. C'est pourquoi cette méthode est avant tout intéressante pour écrire des contenus dans lesquels les passages à la ligne sont importants.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
document.write("<pre>pas de passage à la ligne ");
document.writeln("première ligne");
document.writeln("deuxième ligne <\/pre>");
document.writeln("troisième ligne");
document.writeln("quatrième ligne");
//-->
</script>
</body></html>
|
Dans la première ligne, un texte préformaté est introduit avec document.write(). Il sert dans l'exemple à mettre en évidence les passages à la ligne. La méthode document.write() ne créée aucun passage à la ligne. Le contenu de la ligne suivante ("première ligne") est sorti pour cette raison sur la même ligne. Étant donné cependant que cette chaîne de caractères est sortie avec document.writeln(), un passage à la ligne est généré à la fin du texte source. La ligne suivante ("deuxième ligne") est sortie pour cette raison sur une nouvelle ligne. En même temps se termine sur cette ligne, dans l'exemple la partie pré-formatée. La troisième et quatrième ligne sont écrites elles aussi avec document.writeln(). En interne, des passages à la ligne sont créés dans le texte source. Pour la sortie dans le navigateur, ceux-ci ne sont pourtant visibles que comme des espaces, conformément à la règle HTML stipulant que les passages à la ligne sont transformés en espaces.
|
| |
 |
Objets éléments HTML
|
 |
frames
|
| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
© 2001 Stefan Münz / © 2002 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
