SELFHTML/Aides à la navigation JavaScript/DOM Référence objet| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
 |
all |
|
Propriétés:
Méthodes:
|
 | |
L'objet all, qui se trouve sous l'objet 
document dans la hiérarchie JavaScript, est la clé pour 
HTML dynamique selon les apports de Microsoft à partir de la version 4.0 de l'Explorer Internet. L'objet all vous donne accès à tous les différents éléments et contenus d'un fichier HTML. Vous pouvez lire la plupart des propriétés et les modifier. Certaines méthodes de l'objet all permettent entre autres d'insérer ou de supprimer des repères HTML ou des mentions dans des repères HTML. Par ce moyen, l'accès dynamique à toutes les composantes d'un fichier est possible.
L'objet all ne fait pas partie du standard du langage JavaScript officiel. C'est un ajout de Microsoft implémenté dans l'Explorer Internet MS 4.0. Certes, l'objet all fonctionne également dans des passages Script qui sont marqués "JavaScript", mais il ne s'agit cependant que d'une composante du langage JScript - la variante Microsoft de JavaScript.
Avec les nouvelles générations de navigateurs et le modèle DOM (Document Object Model - DOM), l'objet all est supplanté par les nouveaux objets éléments HTML et par l'objet node. Il n'a donc plus d'avenir et ne devrait au plus être utilisé que pour des raisons de compatibilité avec l'amont.
Un introduction sur le travail avec l'objet all peut être trouvée dans la partie L'ancien modèle DHTML de Microsoft.
 |
Adresser les éléments HTMLL'objet all traite tous les repères HTML notés dans un fichier HTML comme une chaîne d'éléments. Vous pouvez adresser chaque repère HTML distinct dans un fichier:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function modifier() {
document.all.tags("h1")[0].innerText = "Autre contenu";
}
//-->
</script>
</head>
<body>
<h1>Un Titre</h1>
<a href="javascript:modifier()">modifier</a>
</body></html>
|
L'exemple contient un titre et un lien. En cliquant sur le lien, la fonction modifier() est appelée. Cette fonction modifie de façon dynamique le texte du titre en: "Autre contenu".
Pour adresser un repère HTML précis, notez document.all.tags, suivi entre parenthèses et entre guillemets par le nom du repère HTML auquel vous voulez accéder. Dans l'exemple, nous voulons accéder à un repère <h1> donc il faut noter ("h1"). Ainsi, vous avez une sorte d'objet intermédiaire, à savoir une chaîne constituée par tous les éléments <h1> du fichier. Maintenant, il ne reste encore qu'à mentionner lequel. Dans l'exemple, il n'y a certes qu'un titre <h1>, mais il pourrait y en avoir davantage. Pour cela, notez entre crochets quel rang il occupe dans la série mentionnée. Pensez que le compteur commence à 0, ce qui veut dire que vous adressez le premier élément avec [0] le deuxième avec [1] etc... Pour compter, prévaut l'ordre dans lequel les repères HTML du type choisi sont notés dans le fichier.
Après avoir adressé un repère HTML déterminé et sans équivoque, vous pouvez à la suite appliquer à ce repère HTML l'une des propriétés ou méthodes de l'objet all.
|
|
Adresser les éléments HTML avec des nomsÉgalement, vous pouvez dans un script adresser chaque élément HTML avec un nom. La condition préalable est que l'élément HTML ait reçu un nom avec les attributs id= ou bien name=.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function modifier_p_en_h() {
document.all.monelement.outerHTML = "<h1>" +
document.all["monelement"].innerText + "<\/h1>";
}
//-->
</script>
</head>
<body>
<p id="monelement">Un élément avec du texte</p>
<a href="javascript:modifier_p_en_h()">transforme le paragraphe en titre</a>
</body></html>
|
L'exemple contient un paragraphe et un lien. En cliquant sur le lien, la fonction modifier_p_en_h() est appelée. Cette fonction transforme le paragraphe de façon dynamique en un titre N°1.
Pour adresser un élément HTML avec son nom, vous devez noter l'attribut id= dans le repère d'ouverture de l'élément et lui affecter un nom. Dans l'exemple: "monelement". Ensuite vous pouvez adresser cet élément avec document.all.nom_d_element, dans l'exemple donc avec document.all.monelement.
En alternative vous pouvez, comme dans le deuxième partie de l'exemple, adresser l'élément avec document.all["monelement"]. Par cette façon d'adresser un élément, vous pouvez également transmettre des variables. Pour cela il vous suffit de noter le nom de la variable sans guillemets au lieu de noter une valeur fixe, par exemple: document.all[nom_variable].
La condition préalable étant cependant que la variable existe.
|
|
classNameSauvegarde le nom de la classe de feuille de style à laquelle appartient un élément.
<html><head><title>Test</title>
<style type="text/css">
<!--
p.normal { color:black }
p.special { color:red }
-->
</style>
</head><body>
<p class="normal" id="leparagraphe">Texte</p>
<script type="text/javascript">
<!--
document.write("<br>Classe précédente: " + document.all.leparagraphe.className);
document.all.leparagraphe.className = "special";
document.write("<br>Classe suivante: " + document.all.leparagraphe.className);
//-->
</script>
</body></html>
|
Dans l'exemple, deux classes pour le repère HTML <p> sont définies dans l'entête de fichier à l'aide de feuilles de style CSS : une classe normal et une classe special. Dans le corps du fichier est défini un paragraphe qui se voit affecter dans un premier temps la classe normal. Dans un script, le nom de la classe du paragraphe est d'abord écrit pour contrôle dans le fichier avec document.write(). Ensuite l'autre classe définie est affectée au paragraphe. Ce faisant le paragraphe adopte aussi de façon dynamique toutes les propriétés de feuilles de style de la nouvelle classe. Enfin, le nouveau nom de classe est encore, lui aussi, écrit pour contrôle dans le fichier.
|
|
dataFldSauvegarde le nom d'un champ de données qui fait partie de la sortie d'un enregistrement. Cela se réfère au concept de la liaison de données. Pour lire une introduction sur ce thème, reportez vous à la partie sur la liaison de données (Microsoft)..
<tr> <td><b>Prénom:</b></td> <td><span id="Test" datafld="prenom"> </span><input type="button" value="Test" onClick="alert(document.all.Test.dataFld)"> </td> </tr> |
L'exemple représente une rangée de tableau. Dans une des cellules, un champ de donnée est sorti (les autres commandes pour liaison de données manquent ici). Pour le test est inséré un bouton, qui lorsqu'on le clique sort le nom du champ de données avec alert(). C'est le nom de champ qui figure dans la mention HTML datafld=. Si vous changez la valeur de façon dynamique, vous pouvez par exemple sortir un autre champ dans la même cellule de tableau.
|
|
dataFormatAsSauvegarde le type de sortie d'un champ de données qui fait partie de la sortie d'un enregistrement. Ceci se réfère au concept de la liaison de données. Pour lire une introduction sur ce thème reportez vous à la partie sur la liaison de données (Microsoft)..
<tr> <td><b>Prénom:</b></td> <td><span id="Test" datafld="prenom" dataformatas="HTML"> </span><input type="button" value="Test" onClick="alert(document.all.Test.dataFormatAs)"> </td> </tr> |
L'exemple représente une rangée de tableau. Dans une des cellules, un champ de données est sorti. (les autres commandes pour liaison de données manquent ici). Pour le test est inséré un bouton, qui lorsqu'on le clique affiche le type de sortie du champ de données avec alert(). Étant donné que le type a été défini dans le domaine de sortie avec "HTML", c'est cette valeur qui est sortie.
|
|
dataPageSizeSauvegarde le nombre d'enregistrements devant être sortis simultanément. Ceci se réfère au concept de la liaison de données. Pour lire une introduction sur ce thème reportez vous à la partie sur la liaison de données (Microsoft)..
<input type="button" value="Test" onClick="document.all.tableauaffichage.dataPageSize = 5"> <table id="tableauaffichage" datasrc="#adresses" datapagesize="1"> ...etc... données ... </table> |
L'exemple ébauche un tableau conçu pour la sortie de données d'une liaison de données (les autres commandes pour liaison de données manquent ici). Étant donné que dans le repère d'ouverture <table> figure la mention datapagesize="1", il n'y aura toujours qu'un enregistrement affiché simultanément dans le tableau. Pour le test est inséré un bouton, qui lorsqu'on le clique modifie la valeur à 5. Ensuite ce sont toujours 5 enregistrements qui seront affichés simultanément.
|
|
dataSrcSauvegarde le rapport au repère <object> dans lequel est défini une liaison de données. Ceci se réfère au concept de la liaison de données. Pour lire une introduction sur ce thème reportez vous à la partie sur la liaison de données (Microsoft).
<input type="button" value="Test" onClick="alert(document.all.tableauaffichage.dataSrc)"> <table id="tableauaffichage" datasrc="#adresses" datapagesize="1"> ...etc... données ... </table> |
L'exemple ébauche un tableau conçu pour la sortie de données d'une liaison de données (les autres commandes pour liaison de données manquent ici). Pour le test est inséré un bouton, qui lorsqu'on le clique affiche le rapport à la source de données. Étant donné que celui-ci a été défini dans le domaine de sortie avec "#adresses", c'est cette valeur qui est sortie. En modifiant cette propriété d'objet, vous pouvez changer de source de données de façon dynamique. La condition préalable est que, pour le nouveau rapport à la source de données, un repère <object> correspondant pour la source de données ait été défini.
|
|
idSauvegarde le nom d'un élément.
<html><head><title>Test</title>
</head><body>
<p id="monparagraphe">Texte</p>
<script type="text/javascript">
<!--
document.write("<br>Nom du paragraphe: " + document.all.monparagraphe.id);
//-->
</script>
</body></html>
|
Dans l'exemple a été défini un paragraphe auquel on a affecté avec id= le nom "monparagraphe". Dans un script, le nom est écrit pour contrôle dans le fichier avec document.write().
|
|
innerHTMLSauvegarde le contenu d'un élément HTML. Si vous notez des repères HTML lors d'une modification dynamique du contenu, ils seront interprétés lors de l'actualisation du contenu de l'élément.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nouveau = "nouveau texte <b>en caractères gras<\/b> ";
function modifier() { document.all.monparagraphe.innerHTML = nouveau; }
//-->
</script>
</head><body>
<p id="monparagraphe">Texte</p>
<a href="javascript:modifier()">autre texte</a>
</body></html>
|
L'exemple contient un paragraphe de texte et un lien. En cliquant sur le lien la fonction modifier(). est appelée. Cette fonction affecte, au paragraphe avec l' id="monparagraphe", pour la propriété innerHTML la valeur de la variable nouveau définie auparavant. Le contenu du paragraphe se modifie ensuite de façon dynamique et tient compte aussi en le faisant du formatage HTML <b>...</b> pour le nouveau contenu de l'élément.
Vous ne devez pas appliquer la propriété innerHTML directement à la lecture du fichier HTML, mais au contraire, toujours la faire dépendre d'actions comme cliquer sur un lien ou cliquer sur un bouton ou alors en utilisant setTimeout() laissant quelques secondes avant. Pour une application directe à la lecture du fichier, l'Explorer Internet MS 4.0 annonce une erreur de temps d'exécution.
|
|
innerTextSauvegarde le contenu texte d'un élément HTML. Vous pouvez modifier le contenu de façon dynamique.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nouveau = "nouveau texte";
function modifier() { document.all.monparagraphe.innerText = nouveau; }
//-->
</script>
</head><body>
<p id="monparagraphe">Text</p>
<a href="javascript:modifier()">autre texte</a>
</body></html>
|
L'exemple contient un paragraphe de texte et un lien. En cliquant sur le lien la fonction modifier() est appelée. Cette fonction affecte, au paragraphe avec id="monparagraphe", pour la propriété innerText la valeur de la variable nouveau définie auparavant. Le contenu du paragraphe se modifie ensuite de façon dynamique.
Vous ne devez pas appliquer la propriété innerText directement à la lecture du fichier HTML, mais au contraire toujours la faire dépendre d'actions comme cliquer sur un lien ou cliquer sur un bouton ou alors en utilisant setTimeout() laissant quelques secondes avant. Pour une application directe à la lecture du fichier, l'Explorer Internet MS 4.0 annonce une erreur de temps d'exécution.
|
|
isTextEditSauvegarde si un document peut être édité ou non. S'il peut être édité, la propriété a la valeur true, s'il ne peut pas être édité, elle a la valeur false. Jusqu'à présent, seuls certains éléments de formulaire peuvent être édités.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function sortie() {
var textesorti = "";
for(var i=0;i<document.formulaire_test.length;++i)
textesorti = textesorti + "<br>" + document.all.tags("input")[i].isTextEdit;
document.all.sortie.innerHTML = textesorti;
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="">
<input type="text" size="30"><br>
<input type="radio"><br>
<input type="button" value="Test" onClick="sortie()">
</form>
<p id="sortie"></p>
</body></html>
|
L'exemple définit un formulaire avec quelques éléments différents. Le dernier élément est un bouton. En cliquant sur le bouton la fonction sortie() est appelée. Cette fonction recherche dans une boucle pour chaque élément du formulaire s'il peut être édité ou non. Les valeurs sont rassemblées dans une variable textesorti et formatées HTML. À la fin, la valeur sauvegardée dans textesorti est affectée, avec la propriété innerHTML au paragraphe de texte défini au bas du fichier. De cette façon se trouvent ensuite dans le fichier quels champs peuvent être édités et quels autres non.
|
|
langSauvegarde la langue d'un repère HTML comme elle est définissable dans l'attribut lang=.
<html><head><title>Test</title> </head><body> <p id="paragraphe" lang="it">mi chiamo Serge</p> <script type="text/javascript"> <!-- alert(document.all.paragraphe.lang); //--> </script> </body></html> |
Dans l'exemple est défini un paragraphe de texte auquel la langue italienne (it) est affectée avec lang=. Sous le paragraphe se trouve un petit JavaScript qui donne la valeur affectée pour la langue avec alert().
|
|
languageSauvegarde quel est le langage script utilisé dans un script actuel.
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
alert(document.all.tags("script")[0].language);
//-->
</script>
</head><body>
</body></html>
|
L'exemple sort avec alert() quel langage script a exécuté pour la sortie. C'est la valeur qui a été attribuée dans le repère <script> pour l'attribut language=. Étant donné que l'Explorer Internet MS maîtrise plusieurs langages script cette commande peut dans certains cas donner la certitude, par exemple quand elle est incorporée dans une requête if.
|
|
lengthSauvegarde le nombre de repères HTML d'un fichier HTML. Les repères constitués d'un repère d'ouverture et d'un repère de fermeture comptent pour un seul repère.
<html><head><title>Test</title>
</head><body>
<p>un paragraphe</p>
<p>encore un paragraphe</p>
<script type="text/javascript">
<!--
alert("Ce fichier a " + document.all.length + " repères HTML");
//-->
</script>
</body></html>
|
L'exemple montre un fichier HTML complet avec sa structure, deux paragraphes de texte et un script. Dans le script est sorti avec alert() le nombre de repères HTML contenus dans le fichier.
|
|
offsetHeightSauvegarde la hauteur d'un élément.
<html><head><title>Test</title> </head><body id="ce_fichier"> <script type="text/javascript"> <!-- alert(document.all.ce_fichier.offsetHeight); //--> </script> </body></html> |
L'exemple donne avec alert() la hauteur réelle du repère <body> du fichier. Le résultat est la hauteur d'affichage effective de la fenêtre dans laquelle le document est affiché. La propriété peut cependant s'appliquer aussi bien à des éléments HTML se trouvant dans le contenu affiché.
|
|
offsetLeftSauvegarde l'espace séparant un élément du bord gauche de l'élément Offset parent sauvegardé dans la propriété offsetParent.
<html><head><title>Test</title> </head><body> <div id="passage" style="padding:20px"> <p id="paragraphe">Voici un peu de texte</p> </div> <script language="JavaScript" type="text/javascript"> <!-- alert(document.all.passage.offsetLeft); alert(document.all.paragraphe.offsetLeft); //--> </script> </body></html> |
Dans l'exemple un repère <div> comprenant un repère <p> est défini. Pour aérer un peu, a été défini un peu d'espace les séparant - avec une mention de feuille de style pour le repère <div>. Sous ces commandes se trouve un JavaScript qui indique les espaces séparant chacun des deux éléments du bord gauche respectif de l'élément parent Offset avec alert(). L'élément parent Offset de l'élément passage est l'élément Body. Pour cet élément, l'espace entre Body et passage est sauvegardé dans la propriété offsetLeft. L'élément parent Offset de l'élément paragraphe est l'élément passage proprement-dit. Dans la propriété offsetLeft est maintenant sauvegardé l'espace entre le bord gauche de l'élément passage et l'élément.
Si un élément possède un espace intérieur (padding), alors la propriété offsetLeft est erronée dans l'Explorer Internet MS 5.0, étant donné que l'espace intérieur fixé est pris en compte dans la mention. Cela s'applique aussi pour les mentions Padding, définies dans un élément intérieur.
|
|
offsetParentSauvegarde l'élément parent d'un élément dont le positionnement dépend de celui de l'élément parent. offsetParent est une espèce de pointeur sur l'élément hiérarchiquement supérieur. Derrière la propriété peuvent être notées toutes les propriétés et méthodes de l'objet all. Celles-ci valent alors pour l'élément désigné par le pointeur.
S'il n'existe aucun élément parent offset, alors la propriété offsetParent a pour valeur null.
<html><head><title>Test</title>
</head><body>
<table><tr><td><div>
<a><b id="gras">Voici un peu de texte</b></a>
</div></td></tr></table>
<script type="text/javascript">
<!--
var parent=document.all.gras.offsetParent;
while (parent) {
document.write(parent.tagName+"<br>");
parent=parent.offsetParent;
}
//-->
</script>
</body></html>
|
Dans l'exemple est noté un tableau dans la seule et unique cellule duquel sont notés d'autres éléments. L'élément situé le plus à l'intérieur est l'élément <b>..</b> avec le nom Id gras. Dans le passage JavaScript qui suit, est affecté à la variable parent l'élément parent Offset de l'élément gras à l'aide de offsetParent. La boucle while qui suit, sort le nom du repère pour chaque élément parent Offset. Enfin la variable parent se voit affecter l'élément parent Offset de l'élément qui est adressé. La boucle s'interrompt quand il n'y a plus d'élément parent Offset. Ainsi, comme dans l'exemple la propriété de l'objet all tagName est appliquée à offsetParent, toutes les autres propriétés et méthodes de l'objet all peuvent s'appliquer à l'élément.
À la différence de la propriété parentElement, dans la propriété offsetParent c'est toujours l'élément qui détermine la position de l'élément dans la fenêtre, qui est sauvegardé.
Dans l'Explorer Internet MS 4.0 l'élément parent Offset d'une cellule de tableau est toujours la rangée du tableau. À partir de l'Explorer Internet MS 5.0 l'élément parent Offset d'une cellule est considéré comme étant le tableau lui-même.
|
|
offsetTopSauvegarde l'espace séparant un élément du bord supérieur de l'élément parent Offset sauvegardé dans la propriété offsetParent.
<html><head><title>Test</title> </head><body> <div id="passage" style="padding:20px"> <p id="paragraphe">Voici un peu de texte</p> </div> <script type="text/javascript"> <!-- alert(document.all.passage.offsetTop); alert(document.all.paragraphe.offsetTop); //--> </script> </body></html> |
Dans l'exemple, un repère <div> comprenant un repère <p> est défini. Pour aérer un peu, a été défini un peu d'espace les séparant - avec une mention de feuille de style pour le repère <div>. Sous ces commandes se trouve un JavaScript qui indique les espaces respectifs séparant chacun des deux éléments du bord supérieur de l'élément parent Offset avec alert() .
Dans l'Explorateur Internet MS 5.0 il n'est pas tenu compte dans un élément subalterne d'une mention padding existante de l'élément hiérarchiquement supérieur dans la mesure où aucun élément ne se trouve avant l'élément interrogé.
|
|
offsetWidthSauvegarde la largeur d'un élément.
<html><head><title>Test</title> </head><body id="ce_fichier"> <script type="text/javascript"> <!-- alert(document.all.ce_fichier.offsetWidth); //--> </script> </body></html> |
L'exemple sort la largeur réelle du repère<body> avec alert(). Le résultat est la largeur d'affichage effective de la fenêtre dans laquelle le document est affiché. La propriété peut cependant s'appliquer aussi bien à des éléments HTML se trouvant dans le contenu affiché.
|
|
outerHTMLSauvegarde le contenu d'un repère HTML plus le repère d'ouverture et de fermeture avec toutes les mentions.
<html> <head> <title>Test</title> </head> <body> <a id="lien" href="javascript:alert(this.lien.outerHTML)">Lien</a> </body></html> |
L'exemple contient un lien qui lorsqu'on le clique sort sa propre commande HTML complète avec alert().
Vous ne devez pas appliquer la propriété outerHTML directement à la lecture du fichier HTML, mais au contraire toujours la faire dépendre d'actions comme cliquer sur un lien ou cliquer sur un bouton ou alors en utilisant setTimeout() laissant quelques secondes avant. Pour une application directe à la lecture du fichier, l'Explorer Internet MS annonce une erreur de temps d'exécution.
|
|
outerTextSauvegarde la même valeur que innerText, peut cependant lors d'une modification effacer les repères HTML d'ouverture et de fermeture et les remplacer par du texte.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
document.all.gras.outerText = document.all.gras.innerText;
}
//-->
</script>
</head><body>
<p>Texte avec des <b id="gras" onclick="Test()">caractères gras</b></p>
</body></html>
|
L'exemple contient un texte avec une partie marquée en caractères gras. En cliquant sur la partie en caractères gras du texte, la fonction Test() est appelée. Cette fonction remplace la valeur de outerText de l'élément en caractères gras par la valeur de innerText du même élément. L'effet en est que le formatage avec <b>...</b> se perd, parce que outerText sauvegarde de façon interne les paramètres de formatage HTML, alors que innerText ne le fait pas.
Vous ne devez pas appliquer la propriété outerText directement à la lecture du fichier HTML, mais au contraire toujours la faire dépendre d'actions comme cliquer sur un lien ou cliquer sur un bouton ou alors en utilisant setTimeout() laissant quelques secondes avant. Pour une application directe à la lecture du fichier, l'Explorer Internet MS annonce une erreur de temps d'exécution.
|
|
parentElementSauvegarde l'élément parent d'un élément. parentElement est une espèce de pointeur sur l'élément hiérarchiquement supérieur. Derrière la propriété peuvent être notées toutes les propriétés et méthodes de l'objet all. Celles-ci valent alors pour l'élément désigné par le pointeur. S'il n'existe aucun élément parent la propriété parentElement a la valeur null.
<html><head><title>Test</title>
</head><body>
<table><tr><td><div>
<a><b id="gras">Voici un peu de texte</b></a>
</div></td></tr></table>
<script type="text/javascript">
<!--
var parent=document.all.gras.parentElement;
while (parent) {
document.write(parent.tagName+"<br>");
parent=parent.parentElement;
}
//-->
</script>
</body></html>
|
Dans l'exemple est noté un tableau dans la seule et unique cellule duquel sont contenus d'autres éléments. L'élément situé le plus à l'intérieur est l'élément <b>..</b> avec le nom Id gras. Dans le passage JavaScript qui suit, est affecté à la variable parent l'élément parent de l'élément gras avec la propriété parentElement. La boucle while qui suit, sort le nom du repère pour chaque élément parent. Enfin la variable parent se voit affecter l'élément parent de l'élément qui est adressé. La boucle s'interrompt quand il n'y a plus d'élément parent. Ainsi, comme dans l'exemple, la propriété de l'objet all tagName est appliquée à parentElement, toutes les autres propriétés et méthodes de l'objet all peuvent s'appliquer à l'élément.
À la différence de la propriété offsetParent c'est toujours l'élément immédiatement supérieur qui est sauvegardé dans la propriété parentElement.
|
|
parentTextEditSauvegarde le prochain élément plus élevé dans la hiérarchie qui permet l'édition de texte.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
alert(document.all.lien.parentTextEdit.tagName);
}
//-->
</script>
</head><body>
<a id="lien" href="javascript:Test()">Éditer?</a>
</body></html>
|
L'exemple contient un lien qui lorsqu'on le clique appelle la fonction Test(). Cette fonction donne avec alert() le nom du repère HTML qui, par rapport au lien, représente dans la hiérarchie l'échelon immédiatement supérieur permettant l'édition de texte. Dans l'exemple, il s'agit du repère <body>. Certes, le contenu de ce repère ne peut pas être édité, mais c'est le repère immédiatement supérieur sous lequel des éléments pouvant être édités, tels que des champs de saisie de formulaire, peuvent être notés.
L'édition Macintosh de l'Explorer Internet MS 5.0 n'interprète pas cet exemple.
|
|
recordNumberSauvegarde le numéro d'ordre de l'enregistrement affiché. Ceci se réfère au concept de la liaison de données. Pour lire une introduction sur ce thème reportez vous à la partie sur la liaison de données (Microsoft).
<tr> <td><b>prenom:</b></td> <td><span id="Test" datafld="prenom"> </span><input type="button" value="Test" onClick="alert(document.all.Test.recordNumber)"> </td> </tr> |
L'exemple représente une rangée de tableau. Dans une des cellules, est sorti un champ de données (les autres commandes pour liaison de données manquent ici). Pour le test est inséré un bouton, qui, lorsqu'on le clique, affiche le numéro d'enregistrement de l'enregistrement affiché actuellement.
|
|
sourceIndexSauvegarde le numéro d'ordre d'un élément HTML dans un fichier HTML.
<html><head><title>Test</title> </head><body> <p>Un peu de texte avec<br>passage à la ligne</p> <p id="paragraphe">Élément HTML mais quel est son numéro d'ordre?</p> <a href="javascript:alert(document.all.paragraphe.sourceIndex)">Test</a> </body></html> |
L'exemple contient différents éléments dont un paragraphe avec le nom id "paragraphe". En outre l'exemple contient un lien. En cliquant sur le lien est affiché avec alert() le numéro d'ordre de l' élément qui porte le nom indiqué dans le fichier HTML. Dans l'exemple, c'est le 7ème élément (6, car est toujours commencé à compter par 0), car tous les repères HTML du fichier HTML entier sont comptés, qu'ils soient d'ouverture ou autonomes.
|
|
tagNameSauvegarde le nom de repère HTML d'un élément.
<html><head><title>Test</title> </head><body id="ce_fichier"> <a href="javascript:alert(document.all.ce_fichier.tagName)">Test</a> </body></html> |
L'exemple contient un lien qui lorsqu'on le clique donne avec alert() le nom de repère HTML de l'élément qui porte le nom id "ce_fichier". Dans l'exemple il s'agit du repère <body>.
|
|
titleSauvegarde la valeur affectée à un élément dans l'attribut title=. Chez l'Explorer Internet MS, cet attribut est permis pour tous les éléments visibles et actionne, quand on passe dessus avec la souris, l'affichage d'une espèce d'info-bulle (texte d'aide) sur l'élément.
<html><head><title>Test</title> </head><body> <p id="paragraphe" title="aide sur le texte" onClick="alert(document.all.paragraphe.title)">Texte</p> </body></html> |
L'exemple contient un paragraphe de texte qui reçoit avec l'attribut title=un texte d'aide. En y passant avec la souris, le texte apparaît dans une bulle info. En cliquant sur le paragraphe, le même texte sera sorti avec alert().
|
|
click()Fait en sorte qu'un élément soit cliqué, comme si l'utilisateur le cliquait avec sa souris. N'attend aucun paramètre.
<html><head><title>Test</title>
</head><body>
<a id="V1" href="javascript:alert('lien 1 cliqué' )">lien 1</a><br>
<a href="javascript:document.all.V1.click()">lien 2</a><br>
</body></html>
|
L'exemple contient deux liens. En cliquant sur le premier est affiché avec alert() le message "lien 1 cliqué". En cliquant sur le deuxième lien, la méthode click() est appliquée au premier lien. Grâce à celle-ci, le premier lien sera cliqué par le script, et, bien que l'on clique sur le deuxième lien, le message "lien 1 cliqué" est affiché.
|
|
contains()Recherche si un élément contient un autre élément déterminé. Attend comme paramètre le nom id de l'élément contenu.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
if(document.all.ce_fichier.contains(paragraphe))
alert(document.all.paragraphe.innerText);
}
//-->
</sgript>
</head><body id="ce_fichier">
<p id="paragraphe">un texte</p>
<a href="javascript:Test()">Test</a>
</body></html>
|
L'exemple contient un lien qui lorsqu'il est cliqué appelle la fonction Test(). Cette fonction vérifie si le repère <body>, qui porte le nom id ce_fichier, contient un élément portant lui le nom id paragraphe. Si oui, le texte à l'intérieur de cet élément-là est affiché avec alert().
|
|
getAttribute()Recherche si un élément contient ou non un attribut déterminé dans son repère HTML. Retourne la valeur de l'attribut si celui-ci est trouvé, si non, une chaîne de caractères vide "". Attend les paramètres suivants:
1. Attribut = nom de l'attribut recherché dans le repère HTML.
2. majuscules/minuscules = indiquer true quand il faut différencier la casse pour l'attribut ou false, si la distinction ne doit pas être faite.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
if(document.all.paragraphe.getAttribute("align","false") == "center")
document.all.paragraphe.setAttribute("align","right","false");
}
//-->
</script>
</head><body>
<p id="paragraphe" align=center>un texte</p>
<a href="javascript:Test()">Test</a>
</body></html>
|
L'exemple contient un paragraphe centré avec le nom id paragraphe et un lien. En cliquant sur le lien, la fonction Test() est appelée. Cette fonction recherche avec getAttribute(), si l'élément portant le nom paragraphe contient l'attribut align. En outre, il est demandé si la valeur de cette mention est égale à center. Étant donné que c'est le cas dans l'exemple, l'instruction conditionnelle est exécutée. Elle modifie de façon dynamique l'attribut align= avec l'aide de setAttribute() de sorte que le paragraphe est par la suite aligné à droite.
|
|
insertAdjacentHTML()Insère un code HTML supplémentaire avant ou après un élément. Attend les paramètres suivants:
1. Position = mention exacte de l'endroit où le code HTML doit être inséré. Mentionnez BeforeBegin, si le code doit être inséré avant le repère d'ouverture HTML, AfterBegin, si le code doit être inséré après le repère d'ouverture et avant le contenu, BeforeEnd, si le code doit être inséré à la fin du contenu avant le repère de fermeture, ou AfterEnd, si le code doit être inséré après le repère de fermeture.
2. Code = code HTML devant être inséré.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var i = 0;
var numerotation = "";
function numeroter() {
numerotation = "<b>" + (i+1) + ".<\/b> ";
if(i < document.all.tags("p").length)
document.all.tags("p")[i].insertAdjacentHTML("AfterBegin",numerotation);
i = i + 1;
}
//-->
</script>
</head><body>
<p>Un paragraphe</p>
<p>Un autre paragraphe</p>
<p>Encore un paragraphe</p>
<a href="javascript:numeroter()">numéroter</a>
</body></html>
|
L'exemple contient trois paragraphes et un lien. À chaque clic sur le lien, un paragraphe est numéroté de façon dynamique. Pour cela, la fonction numeroter() est appelée quand on clique sur le lien. Cette fonction gère les deux variables définies globalement i (compteur pour la numérotation) et numerotation (chaîne de caractères formatée HTML, qui ajoute la numérotation). Tant que le compteur pour la numérotation est inférieur au nombre de paragraphes disponibles, sera inséré à chaque fois de façon dynamique, avec insertAdjacentHTML() la valeur actuelle de la variable numerotation dans le paragraphe suivant - et ceci derrière le repère d'ouverture <p>.
|
|
insertAdjacentText()Insère du texte supplémentaire avant ou après un élément. Attend les paramètres suivants:
1. Position = mention exacte où le texte HTML doit être inséré. Mentionnez BeforeBegin, si le texte doit être inséré avant le repère d'ouverture HTML, AfterBegin, si le texte doit être inséré après le repère d'ouverture et avant le contenu, BeforeEnd, si le texte doit être inséré à la fin du contenu avant le repère de fermeture, ou AfterEnd, si le texte doit être inséré après le repère de fermeture.
2. Texte = texte devant être inséré.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function completer() {
document.all.DynText.insertAdjacentText("BeforeEnd"," est dynamique!");
}
//-->
</script>
</head><body>
<p id="DynText">HTML</p>
<a href="javascript:completer()">compléter</a>
</body></html>
|
L'exemple contient un paragraphe avec le nom id DynText, qui ne contient que le mot "HTML". En cliquant sur le lien sous le paragraphe, la fonction completer() est appelée. Cette fonction insère avant le repère de fermeture le texte " est dynamique".
|
|
removeAttribute()Retire un attribut déterminé d'un repère HTML déterminé. Attend les paramètres suivants:
1. Attribut = nom de l'attribut recherché dans le repère HTML.
2. majuscules/minuscules = indiquer true quand il faut différencier la casse pour l'attribut ou false, si la distinction ne doit pas être faite .
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
document.all.paragraphe.removeAttribute("align","false");
}
//-->
</script>
</head><body>
<p id="paragraphe" align=center>un texte</p>
<a href="javascript:Test()">Test</a>
</body></html>
|
L'exemple contient un paragraphe centré avec le nom id paragraphe et un lien. En cliquant le lien est appelée la fonction Test() qui retire du paragraphe l'attribut align, de telle sorte que le paragraphe est ensuite aligné à gauche parce que c'est le réglage par défaut pour le repère <p>.
L'édition Macintowh de l'Explorer Internet MS 5.0 n'interprète pas cet exemple.
|
|
scrollIntoView()Positionne le contenu dans la fenêtre d'affichage du navigateur de telle façon qu'un élément déterminé est affiché. Attend un paramètre. Mentionnez true, si le contenu doit être positionné pour apparaître en haut de la fenêtre d'affichage, ou false, si l'élément doit être positionné en bas dans la fenêtre d'affichage.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
document.all.paragraphe.scrollIntoView("true");
}
//-->
</script>
</head><body>
<p id="paragraphe">un texte</p>
<script type="text/javascript">
<!--
for(i=1;i<100;i++)
document.write("<br>ligne " + i);
//-->
</script>
<p><a href="javascript:Test()">Test</a></p>
</body></html>
|
L'exemple contient un paragraphe de texte avec le nom id paragraphe. Ensuite l'exemple écrit dans un passage Script avec la méthode write() 100 lignes dans le fichier de façon à ce que le texte soit bien long pour la démonstration. En-dessous est ensuite noté un lien. En cliquant sur le lien est appelée la fonction Test() qui repositionne le contenu de la fenêtre d'affichage de telle façon que le paragraphe paragraphe soit affiché au bord supérieur de la fenêtre.
|
|
setAttribute()Ajoute dans un certain repère HTML un attribut déterminé. Attend les paramètres suivants:
1. Attribut = nom de l'attribut désiré.
2. valeur = valeur affectée à la mention supplémentaire.
3. majuscules/minuscules = indiquer true quand il faut différencier la casse pour l'attribut ou false, si la distinction ne doit pas être faite.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Test() {
document.all.paragraphe.setAttribute("align","center","false");
}
//-->
</script>
</head><body>
<p id="paragraphe">un texte</p>
<a href="javascript:Test()">Test</a>
</body></html>
|
L'exemple contient un paragraphe centré avec le nom id paragraphe et un lien qui, lorsqu'il est cliqué, appelle la Test(). Cette fonction insère dans le paragraphe l'attribut align et lui affecte la valeur center. Le paragraphe sera donc centré ensuite.
|
| |
 |
style
|
 |
node
|
| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
