SELFHTML/Quickbar
JavaScript
Référence objet SELFHTML/Quickbar
JavaScript
Référence objet
 |
all |
|
Propriétés:
Méthodes:
Sous-objets: |
 | |
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. À l'aide de l'objet all, vous avez un accès Script à tous
les différents éléments et contenus d'un fichier HTML. Vous pouvez lire la
plupart des propriétés et les modifier. Les 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 de langage JavaScript officiel. C'est un ajout de Microsoft pour l'Explorer Internet MS 4.0. L'objet all fonctionne bien également dans des passages Script qui sont marqués "JavaScript", pourtant ce n'est jusqu'alors qu'une composante de JScript - la variante Microsoft de JavaScript.
Vous pouvez trouver une introduction sur ce thème dans la partie accès
dynamique aux éléments HTML (Microsoft).
|
Adresser des é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 language="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 ce 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 déterminé, 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, il faut accéder à un repère <h1>, donc il faut noter ("h1"). Ce faisant vous avez une espèce d'objet intermédiaire, à savoir une chaîne constituée par tous les éléments <h1> du fichier. Maintenant, il vous faut encore mentionner auquel vous pensez. Dans l'exemple, il n'y a bien 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 utiliser à la suite une des propriétés ou méthodes de l'objet all sur ce repère HTML.
|
|
Adresser des éléments HTML avec un nomÉgalement, vous pouvez adresser chaque élément HTML dans un script avec un nom. La condition préalable est que l'élément HTML ait reçu un nom.
<html>
<head>
<title>Test</title>
<script language="JavaScript">
function transforme()
{
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:transforme()">modifie</a>
</body></html>
|
L'exemple contient un paragraphe et un lien. En cliquant sur le lien, la fonction transforme() 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 c'est le nom "Monelement". Ensuite vous pouvez adresser cet élément avec document.all.nomdelement, dans l'exemple donc avec document.all.Monelement.
|
|
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 language="JavaScript">
document.write("<br>classe avant: " + document.all.leparagraphe.className);
document.all.leparagraphe.className = "special";
document.write("<br>classe après: " + 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 dans le fichier pour contrôle
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>prenom:</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 ligne 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>prenom:</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 ligne 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 lien 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 lien avec la source de données. Étant donné que le lien 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 lien à 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">Text</p>
<script language="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 language="JavaScript">
var nouveau = "nouveau texte <b>en gras</b>";
function modifie()
{ document.all.monparagraphe.innerHTML = nouveau; }
</script>
</head><body>
<p id="monparagraphe">Texte</p>
<a href="javascript:modifie()">autre texte</a>
</body></html>
|
L'exemple contient un paragraphe de texte et un lien. En cliquant sur le lien la fonction modifie()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 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 language="JavaScript">
var nouveau = "nouveau texte";
function modifie()
{ document.all.monparagraphe.innerText = nouveau; }
</script>
</head><body>
<p id="monparagraphe">Texte</p>
<a href="javascript:modifie()">autre texte</a>
</body></html>
|
L'exemple contient un paragraphe de texte et un lien. En cliquant sur le lien la fonction modifie() est appelée. Cette fonction affecte, au paragraphe avec l' 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 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 language="JavaScript">
function sortie()
{
var textesorti = "";
for(i=0;i<document.Testform.length;++i)
textesorti = textesorti + "<br>" + document.all.tags("input")[i].isTextEdit;
document.all.sortie.innerHTML = textesorti;
}
</script>
</head><body>
<form name="Testform">
<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 language="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 id="cescript" language="JScript"> alert(document.all.cescript.language); </script> </head><body> </body></html> |
L'exemple sort avec alert(),
quel langage script a exécuté 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 language="JavaScript">
alert("Ce fichier comprend " + 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="cefichier"> <script language="JavaScript"> alert(document.all.cefichier.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 la fenêtre.
<html><head><title>Test</title> </head><body> <div id="domaine" style="padding:20px"> <p id="paragraphe">Un peu de texte ici</p> </div> <script language="JavaScript"> alert(document.all.domaine.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 respectifs séparant chacun des deux
éléments du bord gauche de la fenêtre avec alert().
|
|
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.
<html><head><title>Test</title> </head><body> <a id="domaine" href="javascript:alert(document.all.domaine.offsetParent.tagName)">Test</a> </body></html> |
L'exemple contient un lien. En cliquant ce lien le nom de repère HTML de
l'élément parent par rapport auquel l'élément est positionné lui-même, est
sorti avec alert().
Dans l'exemple cet élément parent est le repère <body>.
De la même façon que dans l'exemple la propriété de l'objet all tagName est appliquée sur offsetParent,
toutes les autres propriétés et méthodes de l'objet all peuvent s'appliquer
à l'élément.
|
|
offsetTopSauvegarde l'espace séparant un élément du bord supérieur de la fenêtre.
<html><head><title>Test</title> </head><body> <div id="domaine" style="padding:20px"> <p id="paragraphe">un peu de texte ici</p> </div> <script language="JavaScript"> alert(document.all.domaine.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 la fenêtre avec alert().
|
|
offsetWidthSauvegarde la largeur d'un élément.
<html><head><title>Test</title> </head><body id="cefichier"> <script language="JavaScript"> alert(document.all.cefichier.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 language="JavaScript">
function Test()
{
document.all.gras.outerText = document.all.gras.innerText;
}
</script>
</head><body>
<p>texte en <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. offsetElement 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.
<html><head><title>Test</title> </head><body> <div id="domaine"> <a id="Test" href="javascript:alert(document.all.Test.parentElement.id)">Élément parent</a> </div> </body></html> |
L'exemple contient un lien. En cliquant sur ce lien le nom id de l'élément
parent est sorti avec alert().
Dans l'exemple, il s'agit du nom "domaine"
du repère <div>. De la même façon que dans l'exemple la propriété de
l'objet all id
est appliquée sur ParentElement, toutes les autres propriétés et
méthodes de l'objet all peuvent s'appliquer à l'élément.
|
|
parentTextEditSauvegarde le prochain élément plus élevé dans la hiérarchie qui permet l'édition de texte.
<html><head><title>Test</title>
<script language="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
directement 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
|
|
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 une ligne 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 un <br>saut de 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 isolés.
|
|
tagNameSauvegarde le nom de repère HTML d'un élément.
<html><head><title>Test</title> </head><body id="cefichier"> <a href="javascript:alert(document.all.cefichier.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 "cefichier".
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 de bulle info (texte d'aide) sur l'élément.
<html><head><title>Test</title> </head><body> <p id="paragraphe" title="Aide au 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 language="JavaScript">
function Test()
{
if(document.all.cefichier.contains(paragraphe))
alert(document.all.paragraphe.innerText);
}
</script>
</head><body id="cefichier">
<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 cefichier, 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 language="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 language="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>Et 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 le 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. Text = texte devant être inséré.
<html><head><title>Test</title>
<script language="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 language="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 normal pour le repère <p>.
|
|
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 language="JavaScript">
function Test()
{
document.all.paragraphe.scrollIntoView("true");
}
</script>
</head><body>
<p id="paragraphe">un texte</p>
<script language="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 le 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 language="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 fonction Test(). Cette fonction insère dans le paragraphe l'attribut align et lui affecte la valeur center. Le paragraphe sera donc centré ensuite.
|
| |
après: |
style
|
avant: |
document
|
SELFHTML/Quickbar
JavaScript
Référence objet
Serge François, 13405@free.fr