SELFHTML/Aides à la navigation JavaScript/DOM Référence objet| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
 |
Objets éléments HTML |
|
Objets éléments |
 | |
D'après la variante HTML du modèle DOM (Document Object Model) chaque élément HTML d'un fichier HTML représente un objet. Il est important ici de savoir comment accéder à un tel objet élément avec un langage Script comme JavaScript. D'après la syntaxe de la variante HTML du modèle DOM, il ne peut être accédé qu'aux éléments HTML qui ont reçu dans leur repère d'ouverture soit un attribut name soit un attribut id. D'après le modèle DOM-XML étendu, il est cependant possible d'accéder à chaque élément XML de son choix, même si celui-ci n'a pas d'attribut name ou id.
L'attribut name N'est autorisé en HTML que pour certains éléments, par exemple pour des éléments de formulaire. G'est la raison pour laquelle cette méthode d'accès n'est aussi possible qu'avec les éléments suivants étant donné que ceux-ci permettent l'attribut name:
| a |
applet |
form |
frame |
img |
input |
iframe |
| map |
meta |
object |
param |
select |
textarea |
Avec la méthode 
document.getElementsByName() vous pouvez adresser les éléments HTML qui ont un attribut name.
L'attribut id est permis contrairement à l'attribut name dans presque tous les éléments HTML. En outre, son affectation de valeur doit être un nom sans ambiguïté pour l'élément, clair pour tout le document. C'est ainsi que cette méthode d'accès, dans la plupart des cas est mieux appropriée dans la pratique que celle de l'accès par l'attribut name.
Avec la méthode document.getElementById() vous pouvez adresser des éléments HTML ayant un attribut id.
Quand vous désirez accéder à des éléments HTML pour lesquels n'est noté ni attribut name ni attribut id, un troisième moyen reste possible: l'accès par l'arborescence d'éléments. Ici, vous pouvez accéder par exemple à la "troisième cellule de tableau de la deuxième rangée du quatrième tableau du document".
Avec la méthode document.getElementsByTagName() de tels accès dont possibles.
Chaque élément HTML a des propriétés. À savoir, chaque attribut autorisé représente une propriété DOM de cet élément HTML. Ainsi par exemple l'élément HTML input a-t il un attribut autorisé value=, et l'élément HTML h1 a-t il un attribut autorisé align=. Dans le modèle DOM, il existe donc en conséquence un objet élément input avec la propriété value, et un objet élément h1 avec la propriété align.
Par dessus le marché, le modèle DOM définit également pour quelques uns des éléments HTML des méthodes. Ainsi, il y a pour l'objet élément form (à savoir l'objet du modèle DOM de l'élément HTML form) les méthodes submit() (envoyer le formulaire) et reset() (annuler les saisies du formulaire).
Pour toutes les propriétés et méthodes des objets éléments HTML, s'appliquent les trois méthodes d'accès citées plus haut. Quand vous avez par exemple l'élément HTML suivant:
<h1 id="titre_entete_page" align="center">Texte</h1>
Alors vous pouvez accéder à l'élément avec document.getElementById() et interroger la propriété d'objet align ou pour la modifier - par exemple:
alert(document.getElementById('titre_entete_page').align)
Cette instruction JavaScript sort une fenêtre de dialogue dans laquelle figure center, parce que document.getElementById("titre_entete_page").align accède à la propriété align de l'objet élément avec l' Id titre_entete_page.
Sur cette page sont décrites pour tous les éléments HTML les propriétés et méthodes autorisées du modèle DOM. Les propriétés résultent ici obligatoirement des attributs autorisés des éléments HTML conformément à HTML 4.0. Les méthodes par contre ne sont fixées que par le modèle DOM.
Chaque élément HTML représente en outre, conformément au modèle DOM un nœud dans l'arborescence d'éléments. C'est pourquoi s'appliquent aussi pour chaque élément HTML toutes les propriétés et méthodes de l'objet node.
Veillez absolument à la casse des propriétés et méthodes qui sont citées dans cette partie pour les différents objets éléments HTML. Des erreurs de majuscules ou de minuscules conduisent à des erreurs en JavaScript.
Étant donné qu'Opera 5.12 n'a implémenté le modèle DOM que de façon très incomplète, il sera indiqué à chaque fois dans ce document, quels sont les exemples interprétés par ce navigateur.
 |
Propriétés universellesLes propriétés universelles correspondent aux attributs universels de HTML. Ces propriétés s'appliquent à presque tous les éléments HTML.
| |||||||||||||||||||||
<html><head><title>Test</title>
</head><body>
<p id="p_italiano" lang="it"
onClick=" alert(document.getElementById('p_italiano').lang)">io senza te</p>
</body></html>
|
L'exemple contient un paragraphe de texte avec un id="p_italiano". Le paragraphe de texte contient également un gestionnaire d'événement onClick. Lorsque le texte est cliqué, une fenêtre de dialogue sort un message indiquant de quelle langue il s'agit pour le texte - c'est l'affectation de valeur à l'attribut lang qui est sortie, à savoir la valeur it.
L'exemple indiqué est également interprété par Opera 5.12.
|
|
a (objet élément HTML)Référence HTML pour les éléments: voir Élément: a
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <a>...</a> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés et méthodes qui sont les suivantes.
| ||||||||||||||||||||||||||||||||||||||||||||||||
<html><head><title>Test</title>
<link rel="stylesheet" href="styles_1.css">
<script type="text/javascript">
<!--
function autrelien() {
document.getElementById("selfhtml_link").href = "http://fr.selfhtml.org/";
document.getElementById("selfhtml_link").firstChild.nodeValue = "SELFHTML actuel";
}
//-->
</script>
</head><body>
<a id="selfhtml_link" href="http://fr.selfhtml.org/">SELFHTML</a><br>
<a href="javascript:autrelien()">Autre lien!</a>
</body></html>
|
Le fichier d'exemple contient deux liens. Le premier lien mène à une adresse sur la toile et le deuxième appelle la Fonction JavaScript autrelien() notée dans l'entête de fichier. Cette fonction affecte à la propriété d'élément href une nouvelle valeur, à savoir une autre adresse Internet. Avec getElementById("selfhtml_link") il est accédé au lien qui est désigné avec id="selfhtml_link". Par ailleurs, la fonction autrelien() modifie aussi de façon dynamique le texte du lien. Même ici la syntaxe du modèle DOM est utilisée, à savoir par l'affectation d'un nouveau texte à node.nodeValue (firstChild désigne le premier nœud enfant d'un nœud).
|
|
abbr (objet élément HTML)Référence HTML pour les éléments: voir Élément: abbr
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <abbr>...</abbr> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<style type="text/css">
<!--
.normal { font-weight:normal }
.gras { font-weight:bold }
-->
</style>
<script type="text/javascript">
<!--
function changer() {
if(document.getElementById("abk").className == "normal")
document.getElementById("abk").className = "gras";
else
document.getElementById("abk").className = "normal";
}
//-->
</script>
</head><body>
<p>Ceci est une <abbr id="abk" class="normal" onMouseOver="changer()" onMouseOut="changer()">abrév.</abbr></p>
</body></html>
|
L'exemple contient un paragraphe de texte avec l'abréviation Abrév., qui est marquée avec <abbr>...</abbr>. Le repère d'ouverture contient une mention de classe CSS avec une mention Id sans ambiguïté et les gestionnaires d'événement onMouweOver et onMouseOut, qui appellent l'un et l'autre la fonction JavaScript changer() notée dans l'entête de fichier. Cette fonction demande si le nom de classe affecté s'intitule normal. Si oui, il est modifié en gras, Si non, il est modifié en normal. L'effet en est qu'en passant avec la souris sur l'abréviation, le texte de l'abréviation est représenté en caractères gras, et dans le cas contraire, il est représenté normalement.
Pour l'Explorer Internet, l'exemple avec l'élément abbr ne pouvait pas être retracé sauf avec 5.0 de l'édition Macintosh avec les autres éléments par contre, c'est possible.
|
|
acronym (objet élément HTML)Référence HTML pour les éléments: voir Élément: acronym
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <acronym>...</acronym> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script..
<html><head><title>Test</title></head><body>
<p>Ceci est un <acronym id="acr" onMouseOver="document.getElementById('acr').title='Acronyme'">UNESCO.</acronym></p>
</body></html>
|
L'exemple contient un paragraphe de texte avec l'acronyme Acr., qui est marqué avec <acronym>...</acronym> . Le repère d'ouverture contient une mention Id claire et sans ambiguïté et le gestionnaire d'événement onMouseOver. En passant sur l'élément de texte avec la souris, s'ensuit la pose dynamique d'un attribut title qui explique ce que signifie l'abréviation UNESCO.
L'exemple indiqué est également interprété par Opera 5.12.
|
|
address (objet élément HTML)Référence HTML pour les éléments: voir Élément: address
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <address>...</address> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function nom() {
document.getElementsByTagName("address")[0].firstChild.nodeValue =
'Serge François';
}
function texte() {
document.getElementsByTagName("address")[0].firstChild.nodeValue =
'Traduction SELFHTML';
}
//-->
</script>
</head><body>
<div>Tout ceci vient de la
<address onMouseOver="nom()" onMouseOut="texte()">traduction SELFHTML</address><div>
</body></html>
|
L'exemple contient un paragraphe de texte avec la désignation d'adresse traduction SELFHTML, qui est marquée avec <address>...</address>. Le repère d'ouverture contient les gestionnaires d'événement onMouseOver et onMouseOut, qui appellent chacun une fonction JavaScript. La fonction nom(), qui est appelée avec onMouseOver remplace le contenu de traduction SELFHTML par la valeur Serge François. La fonction texte() restitue par contre l'état d'origine et est appelée avec onMouseOut. Les deux fonctions accèdent avec getElementsByTagName("address")[0] au premier élément address dans le document. Le nouveau contenu respectif de l'élément est fixé avec node.nodeValue (firstChild désigne le premier nœud-enfant d'un nœud).
|
|
applet (objet élément HTML)Référence HTML pour les éléments: voir Élément: applet
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <applet>...</applet> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
</head><body>
<applet id="Ticker" code="zticker.class" width="600" height="60">
<param name="msg" value="L'énergie de comprendre">
<param name="speed" value="5">
<param name="bgco" value="255,255,255">
<param name="txtco" value="000,000,255">
<param name="hrefco" value="255,255,255">
</applet>
<form name="Form" action="">
<input type="button" value="40" onClick="document.getElementById('Ticker').height=40">
<input type="button" value="60" onClick="document.getElementById('Ticker').height=60">
</form>
</body></html>
|
L'exemple contient un applet Java incorporé pour un texte déroulant (Ticker). En dessous de l'applet est noté un formulaire avec deux boutons. Si l'utilisateur clique sur les boutons, la hauteur d'affichage de l'applet Java est modifiée de façon dynamique et le texte déroulant voit sa taille modifiée automatiquement (dans la mesure où l'applet est programmé de telle façon que la taille du texte dépende de l'attribut height= dans le repère d'ouverture <applet>). L'accès à l'applet se fait avec document.getElementById('Ticker') étant donné qu'il a dans son repère d'ouverture l'attribut id="Ticker". Ce qui modifie son attribut height.
Netscape 6.1 n'interprète pas cet exemple.
|
|
area (objet élément HTML)Référence HTML pour les éléments: voir Élément: area
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <area> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function plus100() {
document.getElementById("Lien").coords = "101,101,349,149";
}
//-->
</script>
</head><body>
<map name="imagetest">
<area id="Lien" shape="rect" coords="1,1,249,49"
href="javascript:plus100()" title="coordonnees" alt="coordonnees">
</map>
<img src="hypgraf.gif" width="400" height="400"
usemap="#imagetest" alt="Graphique composé de liens">
</body></html>
|
L'exemple contient un graphique qui mène à un passage map dans lequel un passage composé de liens pour le graphique est noté. En cliquant dans ce passage composé de liens, la fonction JavaScript plus100() qui est notée dans l'entête du fichier est appelée. Cette fonction modifie de façon dynamique la propriété coords en lui affectant de nouvelles valeurs. L'effet en est que le passage composé de liens est déplacé de 100 pixels vers le bas et la droite.
L'exemple indiqué est également interprété par Opera 5.12.
|
|
b (objet élément HTML)Référence HTML pour les éléments: voir Élément: b
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <b>...</b> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<link id="CSS" rel="stylesheet" href="styles_1.css">
</head><body>
<b id="important">Affirmation importante!</b><br>
<a href="javascript:document.getElementById('important').id='insignifiante';
alert(document.getElementById('insignifiante').id);">rendre insignifiante!</a>
</body></html>
|
L'exemple contient une affirmation importante formatée avec <b>...</b> pour laquelle est noté dans le repère d'ouverture l'attribut id="important". Au dessous est noté un lien qui lorsqu'on le clique fixe l'attribut id de l'élément b sur la valeur insignifiante . Pour cela, il est accédé à l'attribut grâce à document.getElementById('important').id. Enfin, il est accédé à la nouvelle valeur Id avec document.getElementById('insignifiante').id pour sortir la nouvelle valeur Id dans une boite de dialogue pour contrôle.
L'exemple indiqué est également interprété par Opera 5.12.
|
|
base (objet élément HTML)Référence HTML pour les éléments: voir Élément: base
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <base> ont en tant qu'objet du modèle DOM les propriétés suivantes qui leur sont propres pour l'accès des langages script.
|
<html><head><title>Test</title>
<base target="_self">
<script type="text/javascript">
<!--
function blankBase() {
document.getElementsByTagName("base")[0].target="_blank";
}
//-->
</script>
</head><body>
<a href="nouveautes.htm">Quoi de neuf?</a><br>
<a href="javascript:blankBase()">Charger le lien dans une nouvelle fenêtre</a>
</body></html>
|
Dans le fichier d'exemple sont notés deux liens. Le premier appelle simplement un autre fichier. Normalement, la cible du lien est alors appelée dans la même fenêtre. Ce qui est explicitement confirmé dans l'entête de fichier avec <base id="fenetrecible" target="_self">. Le deuxième lien appelle lorsqu'on le clique la fonction JavaScript blankBase(), qui modifie pour l'élément base la propriété target sur la valeur _blank, ce qui a pour résultat que les cibles des liens du fichier seront chargées dans une nouvelle fenêtre.
Avec Netscape (6.1) et avec l'édition Macintosh de l'Explorer Internet 5.0 il était impossible de retracer l'exemple avec l'élément base. Opera 5.12 par contre interprète l'exemple.
L'utilisation des propriétés universelles n'est pas prévue dans le standard HTML 4.0 pour l'élément base. C'est pourquoi il vous faut éviter pour cet élément la méthode document.getElementsById().
|
|
basefont (objet élément HTML)Référence HTML pour les éléments: voir Élément: basefont
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <basefont> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function grandis() {
document.getElementById("ici_ca_change").wize="7";
}
//-->
</script>
</head><body>
<p>Texte<br>Texte<br>Texte<br>Texte<br>Texte<br>Texte<br>Texte</p>
<basefont id="ici_ca_change" color="red" size="">
<p>Texte<br>Texte<br>Texte<br>Texte<br>Texte<br>Texte<br>Texte</p>
<a href="javascript:grandis()">Pas seulement rouge, mais également grand</a>
</body></html>
|
L'exemple contient du texte au milieu duquel est placé un élément basefont. À la fin, se trouve un lien qui si on le clique appelle la fonction JavaScript grandis(). Avec getElementById("ici_ca_change") cette fonction accède à l'élément basefont et modifie sa propriété size en lui donnant pour valeur 7.
Avec Netscape (6.1) il n'etait pas possible de retracer l'exemple avec l'élément basefont.
|
|
bdo (objet élément HTML)Référence HTML pour les éléments: voir Élément: bdo
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <bdo>...</bdo> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function abc2cba() {
document.getElementsByTagName("bdo")[0].dir="rtl";
}
//-->
</script>
</head><body>
<bdo dir="ltr">ABCDEFGHIJKLMNOPQRSTUVWXYZ</bdo><br>
<a href="javascript:abc2cba()">Demi-tour!</a>
</body></html>
|
L'exemple contient un élément bdo avec l'attribut dir="ltr" (sens d'écriture de gauche à droite), qui a pour contenu l'alphabet en majuscules. Au dessous est noté un lien. Lorsque l'on clique le lien la fonction JavaScript abc2cba() est appelée. Celle-ci accède avec getElementsByTagName("bdo")[0] au premier élément bdo du document et modifie le sens d'écriture en rtl, donc de droite à gauche. L'alphabet en majuscules est ainsi placé dans l'autre sens.
Avec l'édition Macintosh de l'Explorer Internet 5.0 il était impossible de retracer l'exemple.
|
|
big (objet élément HTML)Référence HTML pour les éléments: voir Élément: big
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <big>...</big> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<style type="text/css">
<!--
.geant { font-size:300% }
-->
</style>
<script type="text/javascript">
<!--
function encore_plus() {
document.getElementById("grand").className = "geant";
}
//-->
</script>
</head><body>
<p><big id="grand" onClick="encore_plus()">grand et fort!</big></p>
</body></html>
|
L'exemple contient dans un paragraphe de texte, du texte qui est marqué avec <big>...</big>. Dans le repère d'ouverture <big> est noté le gestionnaire d'événement onClick. Lorsqu'on clique le texte de cet élément, la fonction JavaScript encore_plus() est appelée. Celle-ci accède grâce à document.getElementById("grand") à l'élément big et lui affecte la classe geant définie dans un passage de style dans l'entête de fichier. Le texte est ainsi agrandi à 300% de sa taille normale.
|
|
blockquote (objet élément HTML)Référence HTML pour les éléments: voir Élément: blockquote
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <blockquote>...</blockquote> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function showCite() {
alert(document.getElementById('citationw3').cite);
}
//-->
</script>
</head><body>
<p>Le consortium W3 écrit sur le modèle DOM:</p>
<blockquote id="citationw3"
cite="http://www.w3.org/TR/REC-DOM-Level-1/introduction.html"
onMouseOver="showCite()">
The Document Object Model (DOM) is an application programming
interface (API) for valid HTML and well-formed XML documents.
</blockquote>
</body></html>
|
L'exemple contient une citation marquée par <blockquote>...</blockquote>, dans le repère d'introduction de laquelle est aussi mentionnée l'URI de la source avec l'attribut cite=. De plus, y est noté le gestionnaire d'événement onMouseOver, qui fait en sorte que le passage avec la souris sur la citation appelle la fonction JavaScript showCite(). Celle-ci accède avec document.getElementById('citationw3') à l'élément blockquote et sort dans une fenêtre de dialogue, la valeur de l'attribut cite.
Opera 5.12 renvoie dans cet exemple undefined.
|
|
body (objet élément HTML)Référence HTML pour les éléments: voir Élément: body
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <body>...</body> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function fixer_valeurs() {
document.getElementsByTagName("body")[0].text = document.formulaire.Text.value;
document.getElementsByTagName("body")[0].link = document.formulaire.Link.value;
document.getElementsByTagName("body")[0].vLink = document.formulaire.VLink.value;
document.getElementsByTagName("body")[0].bgColor = document.formulaire.BgColor.value;
}
//-->
</script>
</head><body>
<h1>Un document dynamique</h1>
<a href="nouveautes.htm"><b>Un lien aux nouveautés</b></a>
<form name="formulaire" action="">
<pre>
Couleur du texte: <input type="text" size="7" name="Text">
Couleur des liens: <input type="text" size="7" name="Link">
Couleur des liens (visités): <input type="text" size="7" name="VLink">
Couleur d'arrière-plan: <input type="text" size="7" name="BgColor">
Réglages: <input type="button" value="Tester!" onClick="fixer_valeurs()">
</pre>
</form>
</body></html>
|
Le fichier d'exemple contient dans le passage body un titre, un lien et un formulaire avec différents champs de saisie. Dans les champs de saisie, l'utilisateur peut régler de nouvelles couleurs de base pour le document - des valeurs de saisie typiques sont des valeurs hexadécimales telles que #FFFFCC ou des noms de couleurs tels que maroon. En cliquant sur le bouton avec l'inscription Tester la fonction JavaScript fixer_valeurs() notée dans l'entête de fichier, est appelée. Celle-ci accède avec document.getElementsByTagName("body")[0] "au premier élément body" du fichier et affecte aux propriétés correspondantes les valeurs entrées dans le formulaire. De cette façon, les couleurs de base du document sont modifiées.
Avec l'Explorer Internet MS et avec Netscape 6 vous pouvez en plus accéder aux propriétés offsetTop, offsetLeft, offsetWidth, offsetHeight, offsetParent et innerHTML. Avec Netscape 6 pourtant, ces propriétés ne sont disponibles qu'après le chargement du document.
Pour l'Explorer Internet MS la plupart des propriétés de l'objet all sont applicables sur l'objet body. La raison en est que body dans l'Explorer Internet, existait déjà en tant que nom d'objet avant l'introduction de la syntaxe du modèle DOM.
Avec l'édition Macintosh de l'Explorer Internet 5.0 il était impossible de retracer complètement l'exemple qui conduisait en partie à des réactions très étranges.
|
|
br (objet élément HTML)Référence HTML pour les éléments: voir Élément: br
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <br> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Test</title>
</head><body>
<img src="../../../src/logo.gif" width="106" height="109" border="0" align="left"
alt="Logo" onClick="document.getElementById('passage_ligne').clear='all'">
Ce texte passe autour du graphique,
parceque c'est mentionné dans l'attribut align du logo.<br id="passage_ligne">
Cela s'applique t-il aussi à ce texte?
</body></html>
|
L'exemple contient un graphique pour lequel est fixé par la mention align="left", que le texte qui suit passe sur la droite du graphique. Le texte contient un passage à la ligne marqué par <br>. Le graphique contient un gestionnaire d'événement onClick, qui fait en sorte que, lorsque le graphique est cliqué, il est accédé avec document.getElementById('passage_ligne') à l'élément de passage à la ligne. La propriété clear lui est affectée avec pour valeur all. Le texte placé sous le passage à la ligne, passe sous le graphique, lorsque l'on clique sur le graphique, étant donné que <br clear="all"> provoque la poursuite du texte sous le graphique.
|
|
button (objet élément HTML)Référence HTML pour les éléments: voir Élément: button
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <button>...</button> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!--
function bouton_heure() {
var maintenant = new Date();
var heure = maintenant.getTime();
document.getElementsByName("boutond_heure")[0].value = heure;
document.getElementsByName("boutond_heure")[0].firstChild.nodeValue = heure;
}
//-->
</script>
</head><body>
<form name="formulaire" action="">
<button name="boutond_heure" value="" onClick="bouton_heure()">Heure!</button>
</form>
</body></html>
|
L'exemple définit dans un formulaire un bouton qui contient un gestionnaire d'événement onClick. C'est pourquoi, lorsque le bouton et cliqué, la fonction JavaScript bouton_heure(), notée dans l'entête du fichier est appelée. Cette fonction recherche à l'aide de l'objet Date la date et l'heure actuelle en millièmes de secondes pour l'affecter aussi bien à la valeur d'envoi du bouton qu'à son inscription. Pour cela, il est accédé avec document.getElementsByName("boutond_heure")[0] au premier élément avec l'attribut name="boutond_heure". La valeur d'envoi est modifiée par l'affectation de heure à la propriété value. Pour l'inscription du bouton, la valeur du premier nœud-enfant (firstChild.nodeValue) du bouton doit être modifiée. Dans l'exemple, chaque cliquement sur le bouton actualise l'inscription du temps en millièmes de secondes sur l'inscription du bouton.
|
|
caption (objet élément HTML)Référence HTML pour les éléments: voir Élément: caption
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <caption>...</caption> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function change() {
if(document.getElementById("THeader").align == "left")
document.getElementById("THeader").align = "right";
else
document.getElementById("THeader").align = "left";
}
//-->
</script>
</head><body>
<table border="5" cellspacing="4">
<caption id="THeader" align="left" onClick="change()"><b>Résultats:</b></caption>
<tr>
<td>Melchior Nemante:</td><td>5 points</td>
</tr><tr>
<td>Séverine Flêche:</td><td>3 points</td>
</tr>
</table>
</body></html>
|
L'exemple contient un petit tableau avec un titre de tableau, marqué par <caption>...</caption>. De plus, le repère d'ouverture contient le gestionnaire d'événement onClick. Ainsi, lorsque le titre du tableau est cliqué la fonction JavaScript change(), notée dans l'entête de fichier est appelée. Cette fonction accède avec document.getElementById("THeader") au titre du tableau et interroge si sa propriété align a la valeur left. Si oui, elle est modifiée en right, si non (donc si elle est fixée sur right), elle est fixée à nouveau sur left. Par ce moyen, le titre du tableau saute de l'autre côté à chaque cliquement de souris (vers la gauche ou vers la droite).
Avec Netscape (6.1) et l'Explorer Internet MS 5.0 dans son édition Macintosh l'exemple avec l'élément caption ne pouvait pas être retracé.
|
|
center (objet élément HTML)Référence HTML pour les éléments: voir Élément: center
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <center>...</center> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
</head><body>
<center id="centre" title="C'est vraiment centré!"
onMouseover="alert(document.getElementById('centre').title)">
<h1>C'est centré</h1>
<h2>C'est centré</h2>
<h3>C'est centré</h3>
</center>
</body></html>
|
L'exemple contient un passage centré marqué par <center>...</center>, dans lequel tout est représenté centré. Dans le repère d'ouverture est noté le gestionnaire d'événement onMouseOver. Si on passe sur le passage centré avec la souris, une fenêtre de message est sortie qui affiche la valeur de l'attribut title. Pour cela, l'accès à l'élément se fait avec document.getElementById('centre').
L'exemple indiqué est également interprété par Opera 5.12.
|
|
cite (objet élément HTML)Référence HTML pour les éléments: voir Élément: cite
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <cite>...</cite> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
</head><body>
<cite id="citation" title="citation de Kafka"
onMouseOver="alert(document.getElementById('citation').title)">
Les corneilles prétendent qu'une seule corneille pourrait détruire le ciel ; c'est certain mais ne prouve pourtant rien contre le ciel car le ciel signifie justement:
impossibilité pour les corneilles.
</cite>
</body></html>
|
L'exemple contient un passage marqué avec <cite>...</cite>. Dans le repère d'ouverture est noté le gestionnaire d'événement onMouseOver. En passant avec la souris sur le passage centré est sortie une boite d dialogue qui affiche la valeur de l'attribut title. Pour cela, l'accès à l'élément se fait avec document.getElementById('Zitat').
L'exemple indiqué est également interprété par Opera 5.12.
|
|
code (objet élément HTML)Référence HTML pour les éléments: voir Élément: code
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <code>...</code> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<style type="text/css">
<!--
.colore { color:blue }
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function colore() {
document.getElementById("exemplePerl").className = "colore";
}
//-->
</script>
</head><body>
<p><code id="exemplePerl" onClick="colore()">$Text =~ s/[a-z]| //gi;</code></p>
</body></html>
|
L'exemple contient du code Perl marqué par <code>...</code> dans un paragraphe de texte. Dans le repère d'ouverture <code> est noté le gestionnaire d'événement onClick. En cliquant sur le texte de cet élément, la fonction JavaScript colore()est appelée. Celle-ci accède avec document.getElementById("exemplePerl") à l'élément code et lui affecte la classe définie dans passage de style de l'entête de fichier colore. Le texte est ainsi représenté en bleu.
|
|
col (objet élément HTML)Référence HTML pour les éléments: voir Élément: col
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <col> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function meme_largeur() {
for(i = 0; i < document.getElementsByTagName("col").length; i++)
document.getElementsByTagName("col")[i].width = "320";
}
//-->
</script>
</head><body>
<table border="1">
<colgroup>
<col width="80">
<col width="100">
<col width="320">
</colgroup>
<tr>
<td>1ère ligne, 1ère colonne</td>
<td>1ère ligne, 2ème colonne</td>
<td>1ère ligne, 3ème colonne</td>
</tr>
</table>
<a href="javascript:meme_largeur()">Uniformiser la largeur des colonnes!</a>
</body></html>
|
L'exemple contient un tableau avec trois colonnes, dont les largeurs sont prédéfinies de façon différente avec des éléments col. Au dessous du tableau est noté un lien qui, s'il est cliqué, appelle la fonction JavaScript meme_largeur(). Celle-ci accède dans une boucle avec "for" avec document.getElementsByTagName("col") dans l'ordre aux différents éléments col et leur affecte à chacun la valeur 320 pour la propriété width. Ainsi le tableau est à nouveau affiché de façon dynamique, et cela avec trois colonnes de largeur identique.
Avec l'édition Macintosh de l'Explorer Internet 5.0 il était impossible de retracer l'exemple..
|
|
colgroup (objet élément HTML)Référence HTML pour les éléments: voir Élément: colgroup
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <colgroup>...</colgroup> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function aligner() {
document.getElementById("colonnes_tableau").align = "right";
}
//-->
</script>
</head><body>
<table border="1">
<colgroup id="colonnes_tableau">
<col width="200">
</colgroup>
<tr><td>Jean</td></tr>
<tr><td>Frédo</td></tr>
<tr><td>Dominique</td></tr>
</table>
<a href="javascript:aligner()">aligner!</a>
</body></html>
|
L'exemple contient un tableau avec une définition colgroup. Sous le tableau est noté un lien qui, si on le clique, appelle la fonction JavaScript aligner(). Celle-ci accède avec document.getElementById("colonnes_tableau") à l'élément colgroup et lui attribue la valeur right pour la propriété align. Ainsi le tableau est à nouveau affiché de façon dynamique, et cela avec toutes les cellules alignées à droite.
Avec Netscape (6.1) et l'Explorer Internet MS 5.0 dans son édition Macintosh l'exemple ne pouvait pas être retracé. Mais même l'Explorer Internet MS 5.0 n'interprète les propriétés de colgroup qu'incomplètement.
|
|
dd (objet élément HTML)Référence HTML pour les éléments: voir Élément: dd
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <dd>...</dd> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Titre() {
for(var i = 0; i < document.getElementsByTagName("dt").length; i++)
document.getElementsByTagName("dd")[i].title = document.getElementsByTagName("dt")[i].firstChild.nodeValue;
}
//-->
</script>
</head><body>
<dl>
<dt>*.bmp</dt><dd>Graphiques Bitmap</dd>
<dt>*.html</dt><dd>Fichiers pour pages Web</dd>
<dt>*.css</dt><dd>Fichiers de style pour pages Web</dd>
</dl>
<a href="javascript:Titre()">Titre</a>
</body></html>
|
L'exemple contient une liste de définition avec trois éléments. Au dessous est noté un lien qui, si on le clique appelle la fonction JavaScript Titre(), qui est notée dans l'entête de fichier. Celle-ci accède dans une boucle "for" à tous les éléments dt dan l'ordre et affecte aux éléments dd correspondants le contenu des éléments dt comme attribut title.
|
|
del (objet élément HTML)Référence HTML pour les éléments: voir Élément: del
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <del>...</del> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function motifs() {
document.getElementById("versionHTML").cite = "http://www.w3.org/TR/html401";
}
//-->
</script>
</head><body onLoad="motifs()">
<p><del id="versionHTML" onMouseOver="alert(document.getElementById('versionHTML').cite)">
la version HTML actuelle est 2.0</del></p>
</body></html>
|
L'exemple contient un marquage de modification d'effacement avec <del>...</del>. Après que le fichier est chargé (gestionnaire d'événement onLoad dans le repère d'ouverture <body>-Tag), la fonction JavaScript motifs(), notée dans l'entête de fichier, est appelée. Celle-ci accède avec document.getElementById("HTMLVersion") à l'élément del et lui affecte la propriété cite non notée dans le code HTML avec une valeur. L'élément del dispose pour le contrôle d'un gestionnaire d'événement onMouseOver. Lorsqu'on passe avec la souris sur le texte marqué, s'affiche une boite de dialogue qui sort la valeur actuelle de la propriété cite.
Opera 5.12 ne permet que l'accès en lecture à cette propriété.
|
|
dfn (objet élément HTML)Référence HTML pour les éléments: voir Élément: dfn
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <dfn>...</dfn> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
</head><body>
<p><dfn id="Definition" title="Ceci est une définition!"
onMouseOver="alert(document.getElementById('Definition').title)">
Le scotch est une boisson écossaise et non pas du ruban adhésif</dfn></p>
</body></html>
|
L'exemple contient une définition marquée par <dfn>...</dfn>. Lorsqu'on y passe avec la souris (onMouseOver) s'affiche une boite de dialogue qui sort la valeur de l'attribut title de l'élément dfn. Pour ce faire, il est accédé à l'élément avec document.getElementById('Definition').
L'exemple indiqué est également interprété par Opera 5.12.
|
|
dir (objet élément HTML)Référence HTML pour les éléments: voir Élément: dir
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <dir>...</dir> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function condense() {
document.getElementsByTagName("dir")[0].compact = true;
}
//-->
</script>
</head><body>
<dir onMouseOver="condense()">
<li>Fichiers personnels</li>
<li>Programmes</li>
<li>Windows</li>
<li>temp</li>
</dir>
</body></html>
|
L'exemple contient une liste de répertoires. Lorsqu'on passe avec la souris sur la liste (onMouseOver) la - fonction JavaScript condense(), notée dans l'entête de fichier est appelée. La fonction accède avec document.getElementsByTagName("dir")[0] au premier élément dir dans le fichier et fixe sa propriété compact sur la valeur true ("vrai"). Ainsi, la liste complète est représentée avec une police condensée.
Ni Netscape ni l'Explorer Internet n'interprètent l'attribut HTML compact.
|
|
div (objet élément HTML)Référence HTML pour les éléments: voir Élément: div
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <div>...</div> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Test</title>
<style type="text/css">
<!--
div { border:solid 3px red; padding:10px; }
-->
</style>
<script type="text/javascript">
<!--
function aligner() {
document.getElementById("second").align = "center";
document.getElementById("troisieme").align = "right";
}
//-->
</script>
</head><body>
<div id="premier"><h1>Premier passage </h1><p>avec un peu de texte</p></div>
<hr>
<div id="second"><h1>Deuxième passage</h1><p>avec un peu de texte</p></div>
<hr>
<div id="troisieme"><h1>Troisième passage</h1><p>avec un peu de texte</p></div>
<a href="javascript:aligner()">aligner!</a>
</body></html>
|
L'exemple contient en tout trois passages div. En dessous est noté un lien. En cliquant sur le lien, la - fonction JavaScript aligner() est appelée. Cette fonction modifie l'alignement pour les deuxième et troisième passages sur "centré" et "à droite". Pour ce faire il est accédé au deuxième passage avec document.getElementById("second"), et au troisième passage avec document.getElementById("troisieme"). Tous les éléments qui sont notés dans ces passages sont alignés à nouveau de façon dynamique.
|
|
dl (objet élément HTML)Référence HTML pour les éléments: voir Élément: dl
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <dl>...</dl> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function condense() {
document.getElementsByTagName("dl")[0].compact = true;
}
//-->
</script>
</head><body>
<dl onMouseOver="condense()">
<dt>User' Guide</dt><dd>Manuel de l'utilisateur</dd>
<dt>User Instructions</dt><dd>Mode d'emploi</dd>
</dl>
</body></html>
|
L'exemple contient une liste de définitions. Lorsqu'on y passe avec la souris (onMouseOver) la fonction JavaScript condense(), notée dans l'entête de fichier est appelée. La fonction accède avec document.getElementsByTagName("dl")[0] au premier élément dl dans le fichier et fixe sa propriété compact sur la valeur true true ("vrai"). Ainsi, la liste complète est représentée avec une police condensée.
Ni Netscape ni l'Explorer Internet n'interprètent l'attribut HTML compact.
|
|
dt (objet élément HTML)Référence HTML pour les éléments: voir Élément: dt
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <dt>...</dt> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<style type="text/css">
<!--
.mis_en_valeur { font-weight:bold; color:red; }
-->
</style>
<script type="text/javascript">
<!--
function change(x) {
if(document.getElementsByTagName("dt")[x].className == "")
document.getElementsByTagName("dt")[x].className = "mis_en_valeur";
else
document.getElementsByTagName("dt")[x].className = "";
}
//-->
</script>
</head><body>
<dl>
<dt class="" onClick="change(0)">User' Guide</dt><dd>Manuel de l'utilisateur</dd>
<dt class="" onClick="change(1)">User Instructions</dt><dd>Mode d'emploi</dd>
</dl>
</body></html>
|
L'exemple contient une liste de définitions. Chacun des éléments dt contient une affectation de classe de style vide et le gestionnaire d'événement onClick. En cliquant sur les éléments la fonction JavaScript change(), notée dans l'entête de fichier, est à chaque fois appelée. Cette fonction accède à chacun des éléments avec document.getElementsByTagName("dt")[x] - x est ici un paramètre pour indiquer le rang de l'élément de ce type dans le fichier. Les éléments dt retournent à la fonction le paramètre correspondant à son appel avec change(0) ou bien change(1). L'exemple obtient qu'à l'élément dt correspondant soit affecté au premier cliquement de souris le nom de classe mis_en_valeur, et au suivant à nouveau une classe vide. La classe mis_en_valeur, qui est définie dans un passage de style dans l'entête de fichier, fait en sorte que l'élément soit représenté en caractères gras et en rouge.
Netscape 6.1 n'interprète pas cet exemple.
|
|
em (objet élément HTML)Référence HTML pour les éléments: voir Élément: em
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <em>...</em> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<style type="text/css">
<!--
.avec_sentiment { font-family:Lucida Calligraphy; font-size:150%; color:maroon; }
-->
</style>
<script type="text/javascript">
<!--
function xem() {
document.getElementById("chagrin_d_amour").className = "avec_sentiment";
}
function em() {
document.getElementById("chagrin_d_amour").className = "";
}
//-->
</script>
</head><body>
<p>C'est du texte qui a du mal à
<em id="chagrin_d_amour" onMouseOver="xem()" onMouseOut="em()">cacher sa peine de cœur</em>.</p>
</body></html>
|
L'exemple contient un paragraphe dont une partie est marquée avec <em>...</em>. Le repère d'ouverture <em> contient les gestionnaires d'événement onMouseOver et onMouseOut. Dans un cas, la fonction JavaScript xem() est appelée, dans l'autre la fonction em(). Les deux fonctions accèdent avec document.getElementById("chagrin_d_amour") à l'élément em et lui affectent, pour l'une le nom de classe de style avec_sentiment et pour l'autre, le nom de classe de style vide. La classe de style CSS avec_sentiment est définie dans l'entête du fichier. Lorsqu'on passe avec la souris sur l'élément em le texte de l'élément est fortement mis en valeur de façon dynamique.
|
|
fieldset (objet élément HTML)Référence HTML pour les éléments: voir Élément: fieldset
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <fieldset>...</fieldset> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Hinweis() {
if(document.getElementById("expediteur").form != null)
alert("Entrez vos nom et prénom impérativement!");
}
//-->
</script>
</head><body bgcolor="#EEEEEE">
<form name="formulaire" action="">
<fieldset id="expediteur" onMouseOver="attention()">
<legend>expediteur</legend>
<table><tr>
<td align="right">Prénom:</td>
<td><input type="text" size="40" maxlength="40"></td>
</tr><tr>
<td align="right">Nom:</td>
<td><input type="text" size="40" maxlength="40"></td>
</tr></table>
</fieldset>
</form>
</body></html>
|
L'exemple contient un formulaire avec un passage fieldset- . Dans le repère d'ouverture <fieldset> est noté le gestionnaire d'événement onMouseOver, qui appelle la fonction JavaScript attention() , définie dans l'entête du fichier.
Avec if(document.getElementById("expediteur").form != null) la fonction interroge si la propriété form a une valeur. Si la valeur est différente de null, cela signifie que l'élément fieldset est placé comme c'est prescrit dans un formulaire. Dans ce cas, une annonce est sortie.
L'Explorer Internet MS n'interprète la propriété form qu'à partir de la version 6.0(beta).
|
|
font (objet élément HTML)Référence HTML pour les éléments: voir Élément: font
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <font>...</font>ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!--
var sizes = new Array ("1","2","3","4","5","6","7");
var colors = new Array("#FF0000","#0000FF","#009900","#CC00CC");
var faces = new Array("Arial","Tahoma","Wide Latin");
function jouer() {
var s = parseInt((Math.random() * 100) % 7);
var c = parseInt((Math.random() * 100) % 4);
var f = parseInt((Math.random() * 100) % 3);
var i = parseInt((Math.random() * 100) % 7);
document.getElementsByTagName("font")[i].size = sizes[s];
document.getElementsByTagName("font")[i].color = colors[c];
document.getElementsByTagName("font")[i].face = faces[f];
window.setTimeout("jouer()",1000);
}
//-->
</script>
</head><body onLoad="jouer()">
<p>
<font>Tant de texte espiègle, oh Estelle!</font><br>
<font>Tant de texte espiègle, oh Estelle!</font><br>
<font>Tant de texte espiègle, oh Estelle!</font><br>
<font>Tant de texte espiègle, oh Estelle!</font><br>
<font>Tant de texte espiègle, oh Estelle!</font><br>
<font>Tant de texte espiègle, oh Estelle!</font><br>
<font>Tant de texte espiègle, oh Estelle!</font><br>
</p>
</body></html>
|
L'exemple contient en tout sept textes, qui sont marqués avec l'élément font. Aucun des éléments font ne contient de toutes façons le moindre attribut HTML. Après que le document est chargé (gestionnaire d'événement onLoad dans le repère d'ouverture <body>), la fonction JavaScript jouer() est appelée. Auparavant ont été déjà définis différents Arrays. La fonction jouer() recherche au moyen de Math.random() des nombres aléatoires et leur applique, après les avoir multiplié par 100 et opéré une division modulo, la fonction parseInt()de telle façon que des nombres entiers soient créés. Ceux-ci sont utilisés comme index pour les tableaux définis auparavant. Ainsi équipée, la fonction accède aléatoirement avec document.getElementsByTagName("font")[i] à l'un des éléments font et lui attribue les valeurs recherchées également par hasard dans les tableaux pour les propriétés size, color et face. À la fin, la fonction attend une seconde ( window.setTimeout()) et se rappelle elle-même. Ainsi s'obtient un interminable jeu de modifications de texte aléatoires.
|
|
form (objet élément HTML)Référence HTML pour les éléments: voir Élément: form
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <form>...</form> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés et méthodes qui sont les suivantes.
| ||||||||||||||||||||||||||||||||||||
<html><head><title>Test</title>
</head><body>
<form name="formulaire" action="fichier.htm" method="get">
<p>
<input name="Text" type="text"><br>
[<a href="javascript:document.getElementsByName('formulaire')[0].submit()"><b>Envoyer</b></a>]
[<a href="javascript:document.getElementsByName('formulaire')[0].reset()"><b>Interrompre</b></a>]
</p>
</form>
</body></html>
|
L'exemple contient un formulaire avec deux liens à la place des boutons habituels Submit et Reset. L'un des liens exécute la méthode submit(), l'autre la méthode reset(). Pour cela, les deux liens accèdent avec document.getElementsByName('formulaire')[0] au premier élément nommé formulaire.
Cet exemple fonctionne également avec Opera 5.12. En environnement local sans protocole HTTP (file:) le code source du fichier cible est pourtant affiché après l'envoi.
|
|
frame (objet élément HTML)Référence HTML pour les éléments: voir Élément: frame
accéder aux objets élémentw HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <frame> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function sans_bord() {
document.getElementById("F1").marginHeight = "0";
document.getElementById("F1").marginWidth = "0";
}
//-->
</script>
</head>
<frameset cols="50%,50%">
<frame id="F1" src="frame1.htm" onLoad="sans_bord()">
<frame id="F2" src="frame2.htm">
</frameset>
</html>
|
L'exemple définit un jeu de cadres avec deux cadres. Pour le premier élément frame est noté le gestionnaire d'événement onLoad. Après le chargement de la fenêtre cadre, la fonction JavaScript sans_bord(), notée dans l'entête de fichier est appelée. La fonction accède avec document.getElementById("F1") au premier élément frame et fixe ses propriétés pour marginHeight et marginWidth sur 0.
L'exemple ne pouvait être retracé ni avec Netscape ni avec l'Explorer Internet.
|
|
frameset (objet élément HTML)Référence HTML pour les éléments: voir Élément: frameset
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <frameset>...</frameset> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function trois_fenetres() {
document.getElementById("fenetre").cols = "33%,34%,33%";
var F3 = document.createElement("frame");
F3.setAttribute("src","frame3.htm");
document.getElementById("fenetre").appendGhild(F3);
}
//-->
</script>
</head>
<frameset id="fenetre" cols="50%,50%" onLoad="trois_fenetres()">
<frame src="frame1.htm">
<frame src="frame2.htm">
</frameset>
</head></html>
|
L'exemple définit un jeu de cadres avec deux cadres. Après que le jeu de cadres est chargé (gestionnaire d'événement onLoad dans le repère d'ouverture <frameset>), la fonction trois_fenetres() est appelée. Cette fonction accède avec document.getElementById("fenetre") à l'élément frameset et fixe à nouveau sa propriété cols - et cela de telle façon que trois colonnes sont maintenant définies. Ensuite un nouvel élément est créé avec document.createElement(), auquel est affecté avec setAttribute() un fichier à afficher. Enfin le nouveau nœud élément est inséré avec appendChild() comme dernier nouvel élément enfant de l'élément frameset.
L'exemple ne peut être que partiellement retracé avec l'Explorer Internet 5.0.
|
|
h1-h6 (objet élément HTML)Référence HTML pour les éléments: voir Élément: h1-h6
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <h1>...</h1> etc... ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function droitegauche() {
for(var i = 0; i < document.getElementsByTagName("h1").length; i++ ) {
if(document.getElementsByTagName("h1")[i].align == "left")
document.getElementsByTagName("h1")[i].align = "right";
else
document.getElementsByTagName("h1")[i].align = "left";
}
}
-->
</script></head><body>
<h1 align="left">Chapitre 1</h1>
<p>beaucoup de texte</p>
<h1 align="left">Chapitre 2</h1>
<p>beaucoup de texte</p>
<h1 align="left">Chapitre 3</h1>
<p>et un <a href="javascript:droitegauche()">Lien d'alignement</a></p>
</body></html>
|
L'exemple contient en tout trois titres N°1. Tout en bas est noté un lien qui, si on le clique, appelle la fonction JavaScript droitegauche() qui de trouve dans l'entête de fichier. Celle-ci accède dans une boucle "for" avec document.getElementsByTagName("h1")[i] à tous les éléments h1 du document dans l'ordre. Pour chacun de ces éléments, il est demandé si sa propriété align a comme valeur left. Si oui, elle est fixée sur right, sinon elle est fixée à nouveau sur left. À chaque fois que le lien est cliqué, les trois titres voient leur alignement modifié.
L'exemple ne peut pas être retracé avec Netscape 6.1.
|
|
head (objet élément HTML)Référence HTML pour les éléments: voir Élément: head
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
L' élément HTML <head>...</head> a en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que sa propre propriété qui est la suivante.
|
<html><head profile="http://localhost/profiles/mydocs"><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
document.write("Profil utilisé: " + document.getElementsByTagName("head")[0].profile);
//-->
</script>
</body></html>
|
L'exemple contient dans le repère d'ouverture <head> une mention profile. à l'intérieur du document, cette mention est écrite dans le document avec document.write() . Pour cela, il est accédé à l'élément head avec document.getElementsByTagName("head")[0].
L'utilisation d'autres propriétés universelles que dir et lang n'est pas prévue dans le standard HTML 4.0 pour l'élément head. C'est pourquoi vous devez éviter pour cet élément la méthode document.getElementsById().
|
|
hr (objet élément HTML)Référence HTML pour les éléments: voir Élément: hr
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <hr> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!--
var epaisseur = 3;
function epaissis() {
epaisseur += epaisseur;
document.getElementById("Linie").size = epaisseur;
}
//-->
</script></head><body>
<hr id="Linie" noshade size="3" onClick="epaissis()">
</body></html>
|
L'exemple contient une ligne de séparation d'une épaisseur 3 (size="3"). L'élément hr contient un gestionnaire d'événement onClick. En cliquant sur la ligne de séparation, la fonction JavaScript epaissis(), notée dans l'entête de fichier est appelée. Cette fonction augmente la valeur de la variable epaisseur de sa valeur et accède ensuite avec document.getElementById("Linie") à l'élément hr, pour donner à sa propriété size la nouvelle valeur de epaisseur. La ligne devient donc sensiblement plus épaisse à chaque clic de souris.
|
|
html (objet élément HTML)Référence HTML pour les éléments: voir Élément: html
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
L' élément HTML <html>...</html> a en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que sa propre propriété qui est la suivante.
|
<html version="-//W3C//DTD HTML 4.01 Transitional//EN">
<head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
document.write("Ceci est écrit en HTML " + document.getElementsByTagName("html")[0].version + " !");
//-->
</script>
</body></html>
|
L'exemple contient dans son repère d'ouverture <html> une mention version. À l'intérieur du document, cette mention est écrite dans le document avec document.write() . Pour cela il est accédé à l'élément html avec document.getElementsByTagName("html")[0].
L'utilisation d'autres propriétés universelles que dir et lang n'est pas prévue dans le standard HTML 4.0 pour l'élément html. C'est pourquoi vous devez éviter pour cet élément la méthode document.getElementsById().
|
|
i (objet élément HTML)Référence HTML pour les éléments: voir Élément: i
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <i>...</i> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<style type="text/css">
</style>
<script type="text/javascript">
<!--
function set_normal() {
document.getElementById("tordu").className = "normal";
}
//-->
</script>
</head><body>
<i id="tordu">Assertion tordue!</i><br>
<a href="javascript:set_normal()">redresser!</a>
</body></html>
|
L'exemple contient un texte formaté avec <i>...</i>, et au dessous un lien qui lorsqu'il est cliqué, appelle la fonction JavaScript set_normal()qui est notée dans l'entête de fichier. Cette fonction accède à l'élément i avec document.getElementById("tordu") et fixe à nouveau sa propriété universelle className. La classe correspondante normal est définie dans un passage de style dans l'entête de fichier.
|
|
iframe (objet élément HTML)Référence HTML pour les éléments: voir Élément: iframe
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <iframe> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function plus_grand() {
document.getElementById("Frame").width = "600";
document.getElementById("Frame").height = "400";
}
//-->
</script></head><body>
<iframe id="Frame" src="frame1.htm" width="400" height="300"></iframe>
<p><a href="javascript:plus_grand()">Élargir la fenêtre d'affichage</a></p>
</body></html>
|
L'exemple définit une fenêtre cadre incorporée. Au dessous est défini un lien. En cliquant sur le lien, la fonction JavaScript plus_grand(), notée dans l'entête de fichier est appelée. Celle-ci accède à l'élément iframe avec document.getElementById("Frame") et modifie ses propriétés width et height. La fenêtre cadre incorporée est ainsi modifiée de façon dynamique.
|
|
img (objet élément HTML)Référence HTML pour les éléments: voir Élément: img
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <img> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function nouvelle_image() {
if(document.getElementById("image").src.indexOf("iso8859_1.gif") > -1) {
document.getElementById("image").src = "../../../internationalisation/iso8859_2.gif";
document.getElementById("image").title = "image 2";
return;
}
if(document.getElementById("image").src.indexOf("iso8859_2.gif") > -1) {
document.getElementById("image").src = "../../../internationalisation/iso8859_3.gif";
document.getElementById("image").title = "image 3";
return;
}
if(document.getElementById("image").src.indexOf("iso8859_3.gif") > -1) {
document.getElementById("image").src = "../../../internationalisation/iso8859_1.gif";
document.getElementById("image").title = "image 1";
return;
}
}
//-->
</script></head><body>
<img id="image" src="../../../internationalisation/iso8859_1.gif" width="289" height="302" alt="image 1" title="image 1"><br>
<a href="javascript:nouvelle_image()">nouvelle image</a>
</body></html>
|
L'exemple contient une référence de graphique pour une ressource nommée 8859_1.gif. Au dessous est noté un lien. En cliquant sur le lien, la fonction JavaScript nouvelle_image(), notée dans l'entête de fichier est appelée. Cette fonction demande avec document.getElementById("image").src.indexOf(...), quelle image est actuellement affichée (voir aussi indexOf). En fonction de cela, les deux propriétés src et title se voient attribuer de nouvelles valeurs. L'exemple obtient qu'à chaque fois que le lien est cliqué une nouvelle image soit affichée.
Dans la propriété src l'URI complète de l'image est sauvegardée, et non pas la mention relative éventuelle qui a été affectée avec <img src=>. C'est pourquoi le contenu de src doit aussi être parcouru avec une méthode de chaîne de caractères telle que indexOf(), pour rechercher un nom de fichier.
Dans Netscape 6.x les propriétés hspace, vspace et border sont implémentées avec des erreurs.
Opera 5.12 interprète également cet exemple.
|
|
input (objet élément HTML)Référence HTML pour les éléments: voir Élément: input
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <inputt> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés et méthodes qui sont les suivantes.
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var largeur = 3;
function elargir() {
largeur += 1;
document.getElementsByName("saisie")[0].size = largeur;
}
//-->
</script></head><body>
<form name="formulaire">
Entrez du texte:<br>
<input size="3" name="saisie" onKeyPress="elargir()">
</form>
</body></html>
|
Dans le fichier d'exemple est noté un formulaire avec un assez petit champ de saisie dans un premier temps (size="3") . Le champ de saisie contient le gestionnaire d'événement onKeyPress. À chaque fois qu'une touche est appuyée, pendant que le champ de saisie est la zone de saisie active, la fonction JavaScript elargir(), notée dans l'entête de fichier, est appelée. Celle-ci accède avec document.getElementsByName("saisie")[0] au premier élément nommé saisie, à savoir au champ de saisie, et modifie sa propriété size avec la valeur actuelle de la variable largeur. Celle-ci est incrémentée de 1 à chaque appel de la fonction. L'exemple fait en sorte que le champ devient d'autant plus grand que la quantité de texte saisi augmente.
|
|
ins (objet élément HTML)Référence HTML pour les éléments: voir Élément: ins
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <ins>...</ins> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
</head><body>
<p>Texte <ins id="ajoute"
onMouseOver="document.getElementById('ajoute').title='Ceci est du texte ajouté'">avec du texte supplémentaire</ins></p>
</body></html>
|
L'exemple contient un paragraphe dont une partie du texte est marquée avec <ins>...</ins>. En passant sur ce texte avec la souris (onMouseOver) la propriété universelle title est occupée avec une valeur de façon dynamique. Pour ce faire, il est accédé avec document.getElementById('ajoute') à l'élément ins.
Avec Netscape 6.1beta il n'était pas possible de retracer cet exemple.
L'exemple est également interprété par Opera 5.12.
|
|
isindex (objet élément HTML)Référence HTML pour les éléments: voir Élément: ins
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <isindex> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
</head><body>
<isindex title="Élément HTML rarement employé" id="saisie" onMouseOver="alert(document.getElementById('saisie').title)">
</body></html>
|
L'exemple contient un élément isindex. En passant sur l'élément avec la souris, une fenêtre de dialogue est sortie qui affiche la valeur de l'attribut title, qui est noté dans l'élément. Pour cela, il est accédé à l'élément avec document.getElementById('saisie').
Le gestionnaire d'événement onMouseOver peut certes être appliqué à cet élément mais ne fait pourtant pas partie du standard.
L'exemple indiqué est également interprété par Opera 5.12, cependant il ne l'est pas par l'édition Macintosh de l'Explorer Internet MS 5.0.
|
|
kbd (objet élément HTML)Référence HTML pour les éléments: voir Élément: kbd
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <kbd>...</kbd> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function attention() {
document.getElementById("clavier").title = "Vous y êtes arrivés!";
alert(document.getElementById("clavier").title);
}
//-->
</script></head><body onKeyPress="attention()">
<kbd id="clavier">Appuyez sur une touche</kbd>:
</body></html>
|
L'exemple contient une invite à appuyer sur une touche, qui est enfermée judicieusement dans <kbd>...</kbd>. Le repère d'ouverture <body> du fichier contient le gestionnaire d'événement onKeyPress. Quand le document a la zone de saisie active et que l'utilisateur appuie sur une touche quelconque, la fonction JavaScript attention(), définie dans l'entête de fichier est appelée. Cette fonction accède à l'élément kbd avec document.getElementById("clavier") et affecte à sa propriété universelle title une valeur. Enfin pour contrôle, cette propriété universelle précisément est sortie dans une fenêtre de dialogue.
L'exemple indiqué est également interprété par Opera 5.12.
|
|
label (objet élément HTML)Référence HTML pour les éléments: voir Élément: label
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <label>...</label> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
</head><body>
<form name="formulaire" action="">
<table>
<tr>
<td><label id="VN" for="prenom">Votre prénom:</label></td>
<td><input type="text" id="prenom"></td>
</tr><tr>
<td><label id="ZN" for="nom">Votre nom:</label></td>
<td><input type="text" id="nom"></td>
</tr>
</table>
</form>
<script type="text/javascript">
<!--
document.getElementById("prenom").value = document.getElementById("VN").htmlFor;
document.getElementById("nom").value = document.getElementById("ZN").htmlFor;
//-->
</script>
</body></html>
|
L'exemple contient un formulaire avec deux champs de saisie. Les inscriptions des champs de saisie sont chacune marquées par un élément label. Sous le formulaire est noté un passage Script. Là, les deux champs reçoivent des valeurs par défaut, à savoir les valeurs affectées à l'attribut id de l'élément label correspondant. Pour cela, il est accédé avec document.getElementById("VN") et document.getElementById("ZN") aux éléments label. Leur propriété htmlFor est affectée aux champs du formulaire, auxquels il est accédé de la même façon avec getElementById() .
|
|
legend (objet élément HTML)Référence HTML pour les éléments: voir Élément: legend
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <legend>...</legend> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
</head><body>
<form name="formulaire" action="">
<fieldset>
<legend id="L1">Expéditeur</legend>
<input type="text" size="50" name="nom_expediteur"
onFocus="document.getElementById('L1').align='right'"
onBlur="document.getElementById('L1').align='left'">
</fieldset>
<fieldset>
<legend id="L2">Communication</legend>
<input type="text" size="50" name="texte_communique"
onFocus="document.getElementById('L2').align='right'"
onBlur="document.getElementById('L2').align='left'">
</fieldset>
</form>
</body></html>
|
L'exemple contient un formulaire, dans lequel est défini pour chacun des deux champs de saisie, un passage fieldset avec son élément legend. Aussitôt que l'un des deux champs de saisie devient la zone de saisie active (onFocus), le texte de légende correspondant est aligné à droite. Aussitôt que le champ de saisie perd la zone de saisie active (onBlur), le texte de légende est à nouveau aligné à gauche. Pour cela il est accédé aux éléments legend avec document.getElementById('L1') ou document.getElementById('L2') . Leur propriété align est fixée à nouveau.
Dans Netscape 6 l'alignement se fait en partant du bord droit du champ de saisie. Dans l'Explorer Internet MS 5.0 cet exemple ne pouvait pas être retracé.
|
|
li (objet élément HTML)Référence HTML pour les éléments: voir Élément: li
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <li>...</li> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<style type="text/css">
<!--
.rehausse { background-color:yellow }
-->
</style>
<script type="text/javascript">
<!--
function modifier() {
for(var i = 0; i < document.getElementsByTagName("li").length; i++)
if(i % 2 != 0) {
document.getElementsByTagName("li")[i].className = "rehausse";
document.getElementsByTagName("li")_i].type = "I";
}
}
//-->
</script>
</head><body>
<ol>
<li>Un élément de liste impair</li>
<li>Un élément de liste pair</li>
<li>Un élément de liste impair</li>
<li>Un élément de liste pair</li>
<li>Un élément de liste impair</li>
<li>Un élément de liste pair</li>
<li>Un élément de liste impair</li>
<li>Un élément de liste pair</li>
</ol>
<a href="javascript:modifier()">Mettre en valeur les éléments de la liste pairs!</a>
</body></html>
|
L'exemple contient une liste numérotée avec quelques éléments de liste. Au dessous est noté un lien. En cliquant sur le lien, la fonction JavaScript modifier(), notée dans l'entête de fichier, est appelée. Cette fonction parcourt dans l'ordre dans une boucle "for" tous les éléments li, auxquels elle accède avec document.getElementsByTagName("li"). Pour les éléments de liste pairs, deux modifications sont effectuées: D'abord ces éléments de liste se voient attribuer une classe CSS définie en haut dans un passage de style, qui affecte à l'élément une autre couleur d'arrière-plan, et deuxièmement, le type de numérotation de ces éléments de liste est fixé sur "chiffres romains majuscules".
|
|
link (objet élément HTML)Référence HTML pour les éléments: voir Élément: link
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <link> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<link id="CSS" rel="stylesheet" href="styles_1.css">
<script type="text/javascript">
<!--
function changement_CSS() {
document.getElementById("CSS").href = "styles_2.css";
}
//-->
</script>
</head><body>
<h1>Ceci et cela</h1>
<a href="javascript:changement_CSS()">autre feuille de wtyle!</a>
</body></html>
|
L'exemple contient dans l'entête de fichier un repère HTML pour incorporer une feuille de style CSS. Dans le passage visible du document est noté un lien qui, si on le clique appelle la fonction JavaScript changement_CSS(), notée dans l'entête de fichier. Cette fonction accède avec document.getElementById("CSS") à l'élément link qui incorpore le fichier CSS, et affecte à la propriété href une nouvelle valeur, à savoir le nouveau fichier CSS. Ainsi le nouveau fichier CSS devient-il déterminant pour tous les formatages dans le fichier HTML.
Avec Netscape 6.1 et avec l'édition Macintosh de l'Explorer Internet MS 5.0, cet exemple ne pouvait être retracé.
|
|
map (objet élément HTML)Référence HTML pour les éléments: voir Élément: map
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <map>...</map> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function montre_coord() {
alert(document.getElementsByName("imagetest")[0].areas[0].coords);
}
//-->
</script>
</head><body>
<map name="imagetest">
<area id="lien" shape="rect" coords="1,1,249,49"
href="javascript:montre_coord()" alt="lien">
</map>
<img src="hypgraf.gif" width="400" height="400" usemap="#imagetest" alt="carte cliquable">
</body></html>
|
L'exemple contient un graphique qui mène à un passage composé de liens qu'il contient lui-même. Là est défini un rectangle pouvant être cliqué pour le graphique. En cliquant sur ce passage la - fonction JavaScript montre_coord(), notée dans l'entête de ficher, est appelée. La fonction sort les coordonnées du passage composé de liens en accédant au tableau area de l'élément map avec document.getElementsByName("imagetest")[0].areas[0].coords et en adressant la propriété coords de son premier élément.
|
|
menu (objet élément HTML)Référence HTML pour les éléments: voir Élément: menu
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <menu>...</menu> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function condense() {
document.getElementsByTagName("menu")[0].compact = true;
}
//-->
</script>
</head><body>
<menu onMouseOver="condense()">
<li>Fichier</li>
<li>Éditer</li>
<li>Affichage</li>
<li>Format</li>
</menu>
</body></html>
|
L'exemple contient une liste de menus. En passant sur la liste avec la souris (onMouseOver) la fonction JavaScript condense(), notée dans l'entête de fichier est appelée. La fonction accède au premier élément menu dans le fichier avec document.getElementsByTagName("menu")[0] et fixe sa script compact sur la valeur true ("vrai"). Ainsi, la liste complète est représentée sous forme compacte.
Ni Netscape ni l'Explorer Internet n'interprètent l'attribut HTML compact.
|
|
meta (objet élément HTML)Référence HTML pour les éléments: voir Élément: meta
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <meta>...</meta> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function arabe() {
document.getElementsByTagName("meta")[0].content="text/html; charset=iso-8859-6";
}
//-->
</script>
</head><body>
<p style="font-size:24pt">ÈÉÊËÌÍÎÏÐÑ</p>
<p><a href="javascript:arabe()">arabe</a></p>
</body></html>
|
L'exemple contient un paragraphe de texte qui crée avec des entités numériques des valeurs de caractère de 200 à 209. Au dessous est noté un lien. Lorsqu'on le clique, la fonction JavaScript arabe(), notée dans l'entête de fichier est appelée. Cette fonction accède avec document.getElementsByTagName("meta")[0] au repère meta lui aussi noté dans l'entête de fichier, et modifie sa propriété content de telle façon que le jeu de caractères arabe est mentionné (iso-8859-6).
Ni Netscape ni l'Explorer Internet n'interprètent cette modification.
|
|
noframes (objet élément HTML)Référence HTML pour les éléments: voir Élément: noframes
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <noframes>...</noframes> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
</head>
<frameset cols="50%,50%">
<frame id="F1" src="frame1.htm">
<frame id="F2" src="frame2.htm">
<noframes title="Ce navigateur ne vaut vraiment rien!">
Votre navigateur ne peut pas afficher de cadres!
<a href="javascript:alert(document.getElementsByTagName('noframes')[0].title)">autres informations</a>
</noframes>
</frameset>
</html>
|
L'exemple contient une définition de jeu de cadres et en alternative, un passage noframes. Dans celui-ci est noté un lien qui lorsqu'on le clique, sort dans une fenêtre de dialogue la valeur de la propriété universelle title du repère d'ouverture <noframes>.
Malheureusement, cet exemple ne peut pas être retracé avec les navigateurs courants, étant donné que ceux-ci supportent les cadres et ne permettent pas de désactiver les cadres. Opera constitue ici une exception car il permet de désactiver les cadres et interprète également l'exemple.
|
|
noscript (objet élément HTML)Référence HTML pour les éléments: voir Élément: noscript
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <noscript>...</noscript> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head><body>
<script language="tcl" type="text/tcl">
<!--
proc square {i} {
document write "The call passed $i to the function.<BR>"
return [expr $i * $i]
}
document write "The function returned [square 5]."
# -->
</script>
<noscript id="tcl" title="Je ne comprends pas tcl.">
<p onmouseover="alert(document.getElementById('tcl').title)">Un navigateur qui ne peut pas interpréter tcl.</p>
</noscript>
</body></html>
|
Dans l'exemple a été représenté un passage script dans le langage tcl. Les navigateurs qui n'interprètent pas ce langage, interprètent le passage noscript qui en fait partie et affichent l'alternative en texte. Étant donné qu'il s'agit d'un autre langage que JavaScript, vous pouvez accéder à l'élément script avec JavaScript. Quand la souris passe sur le paragraphe, le titre de l'élément noscript est affiché.
L'Explorer Internet MS et Netscape n'interprètent ce repère que lorsque JavaScript est désactivé. Avec Opera 5.12 vous pouvez par contre retracer cet exemple.
|
|
object (objet élément HTML)Référence HTML pour les éléments: voir Élément: object
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <object>...</object> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!--
function plus_grand() {
document.getElementById("TXT").width="640";
document.getElementById("TXT").height="480";
}
//-->
</script>
</head><body>
<p><object id="TXT" data="html.txt" type="text/plain" width="320" height="240"></object></p>
<p><a href="javascript:plus_grand()">en voir plus!</a></p>
</body></html>
|
L'exemple contient la définition d'objet d'un fichier TXT. Au dessous est noté un lien. Lorsque le lien est cliqué, la fonction JavaScript plus_grand(), notée dans l'entête de fichier est appelée. La fonction accède avec document.getElementById("TXT") à l'élément object et modifie ses propriétés pour width et height. L'objet est ainsi modifié de façon dynamique.
Avec Netscape 6.1 il n'était pas possible de retracer cet exemple.
|
|
ol (objet élément HTML)Référence HTML pour les éléments: voir Élément: ol
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <ol>...</ol> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function romain() {
document.getElementById("Liste").type="I";
}
function normal() {
document.getElementById("Liste").type="1";
}
//-->
</script>
</head><body>
<ol id="Liste">
<li>un</li>
<li>deux</li>
<li>trois</li>
<li>quatre</li>
<li>cinq</li>
</ol>
<a href="javascript:romain()">romain</a><br>
<a href="javascript:normal()">normal</a>
</body></html>
|
L'exemple contient une liste numérotée. Sous celle-ci sont notés deux liens. Le premier appelle une fonction JavaScript romain() et l'autre une fonction normal(). Les deux fonctions accèdent chacune avec document.getElementById("Liste") au repère d'ouverture de la liste numérotée et modifient sa propriété type. Dans le premier cas, la numérotation est remplacée par des chiffres romains de façon dynamique, dans l'autre ce sont à nouveau des chiffres arabes qui sont utilisés.
|
|
optgroup (objet élément HTML)Référence HTML pour les éléments: voir Élément: optgroup
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <optgroup>...</optgroup> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
</head><body>
<form name="choix" action="">
<select name="nom" size="1" onChange="alert(document.getElementById('A').label)">
<optgroup label="Noms commençant par A" id="A">
<option label="Anne"> Anne</option>
<option label="Anemone"> Anémone</option>
</optgroup>
</select>
</form>
</body></html>
|
L'exemple définit une structure de menus. Dès qu'un élément est choisi (onChange), la valeur de la propriété label de l'élément optgroup avec la valeur id A est sortie dans une fenêtre.
Ni Netscape ni l'Explorer Internet n'interprètent pas encore correctement les structures de menus à la date d'aujourd'hui - Netscape 6.x certes avec les noms de rubriques, mais pas encore comme c'est prévu. Cependant les deux navigateurs interprètent le Javascript ci-dessus.
|
|
option (objet élément HTML)Référence HTML pour les éléments: voir Élément: option
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <option>...</option> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
</head><body>
<form name="choix" action="">
<select name="ingredients" size="1">
<option value="Z_101">Salami</option>
<option value="Z_102">Champignons</option>
<option value="Z_103">Jambon</option>
<option value="Z_104">Olives</option>
<option value="Z_105">Anchois</option>
</select>
</form>
<script language="JavaScript" type="text/javascript">
<!--
document.write("<table border=\"1\">");
for(i = 0; i < document.getElementsByTagName("option").length; i++) {
document.write("<tr><td><b>Ingrédient:<\/b><\/td><td>");
document.write(document.getElementsByTagName("option")[i].text);
document.write("<\/td><td><b>valeur d'envoi interne:<\/b><\/td><td>");
document.write(document.getElementsByTagName("option")[i].value);
document.write("<\/td><\/tr>");
}
document.write("<\/table>");
//-->
</script>
</body></html>
|
L'exemple contient un formulaire avec une liste de choix. Au dessous est noté un script qui écrit un tableau de façon dynamique dans le document. Pour ce faire, il parcourt dans une boucle "for" et dans l'ordre tous les éléments option et accède avec document.getElementsByTagName("option") aux différents éléments option. Pour chaque élément la valeur d'envoi interne (value) et le texte de choix (text) sont écrits dans le tableau.
L'exemple indiqué est également interprété par Opera 5.12.
|
|
p (objet élément HTML)Référence HTML pour les éléments: voir Élément: p
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <p>...</p> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function aligner(comment) {
for(var i = 0; i < document.getElementsByTagName("p").length; i++) {
document.getElementsByTagName("p")[i].align = comment;
}
}
//-->
</script>
</head><body>
<p>Le premier</p>
<p>Le deuxième</p>
<p>Le troisième</p>
<form name="formulaire" action="">
<input type="button" value="à gauche" onClick="aligner('left')">
<input type="button" value="centré" onClick="aligner('center')">
<input type="button" value="à droite" onClick="aligner('right')">
</form>
</body></html>
|
L'exemple contient trois paragraphes de texte. Au dessous est noté un formulaire avec trois boutons pouvant être cliqués. Chaque bouton appelle lorsqu'il est cliqué la fonction JavaScript aligner(), notée dans l'entête de fichier, et lui transmet une valeur désirée pour l'alignement (left, center et right). La fonction aligner() parcourt dans une boucle "for" avec document.getElementsByTagName("p") et dans l'ordre tous les éléments p du document et affecte à leur propriété align le paramètre transmis pour l'alignement. Ainsi, un cliquement sur l'un des boutons provoque t-il un alignement dynamique de tous les paragraphes de texte.
|
|
param (objet élément HTML)Référence HTML pour les éléments: voir Élément: param
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <param>...</param> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
</head><body>
<applet id="Ticker" code="zticker.class" width="600" height="60">
<param name="msg" value="L'énergie de comprendre">
<param name="speed" value="5">
<param name="bgco" value="255,255,255">
<param name="txtco" value="000,000,255">
<param name="hrefco" value="255,255,255">
</applet>
<script type="text/javascript">
<!--
document.write("<table>");
for(var i = 0; i < document.getElementsByTagName("param").length; i++) {
document.write("<tr><td><b>Paramètre:<\/b><\/td><td>");
document.write(document.getElementsByTagName("param")[i].name);
document.write("<\/td><td><b>Valeur:<\/b><\/td><td>");
document.write(document.getElementsByTagName("param")[i].value);
document.write("<\/td><\/tr>");
}
document.write("<\/table>");
//-->
</script>
</body></html>
|
L'exemple contient un applet Java avec différents paramètres. Au dessous, est noté un script qui écrit un tableau dans le document de façon dynamique. Pour le faire, il parcourt dans une boucle "for" tous les éléments param dans l'ordre et accède avec document.getElementsByTagName("param") aux différents éléments param. Pour chacun des éléments, sont écrits dans le tableau le nom du paramètre (name) et la valeur correspondante (value).
Curieusement dans l'Explorer Internet MS jusqu'à la version 5.5 cet exemple ne peut être retracé que si les éléments param ne se trouvent pas à l'intérieur d'un élément parent valide. L'exemple indiqué est par contre également interprété par Opera 5.12 et par l'édition Macintosh de l'Explorer Internet MS 5.0 .
|
|
pre (objet élément HTML)Référence HTML pour les éléments: voir Élément: pre
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments <pre>...</pre>ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function largeur() {
document.getElementById("x").width = "15";
}
//-->
</script>
</head><body>
<pre id="x">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</pre>
<a href="javascript:largeur()">fixer la largeur sur 15 </a>
</body></html>
|
L'exemple contient un passage pre avec 30 signes x par ligne. Au dessous est noté un lien. En cliquant sur le lien, la fonction JavaScript largeur(), notée dans l'entête de fichier, est appelée. Cette fonction accède avec document.getElementById("x") à l'élément pre et lui affecte pour sa propriété width la valeur 15.
Ni Netscape ni l'Explorer Internet n'interprètent l'attribut width en relation avec des éléments pre.
|
|
q (objet élément HTML)Référence HTML pour les éléments: voir Élément: q
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <q>...</q> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Test</title>
</head><body>
<p>Comment disait Molière déjà?
<q id="citation_moliere" cite="dans Tartuffe"
onMouseOver="alert(document.getElementById('citation_moliere').cite)">j'ai, euh,
étudié le théâtre ...</q></p>
</body></html>
|
L'exemple contient une citation dans le repère d'ouverture de laquelle est noté un gestionnaire d'événement onMouseOver. En passant avec la souris une fenêtre de dialogue est sortie qui affiche la valeur de l'attribut cite= . Pour cela, il est accédé avec document.getElementById('citation_moliere').cite à la propriété correspondante de l'élément.
Netscape 6. Opera 5.12 et l'Explorer Internet MS 5.0 (édition Macintosh placent la cittion entre "...". Opera 5.12 interprète bien le gestionnaire d'événement mais renvoie comme propriété de l'attribut cite= la valeur undefined.
|
|
s (objet élément HTML)Référence HTML pour les éléments: voir Élément: s
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <s>...</s> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<style type="text/css">
<!--
.rouge { color:red }
-->
</style>
<script type="text/javascript">
<!--
function plus_clair() {
document.getElementById("cochon").className = "rouge";
}
//-->
</script>
</head><body>
<h1><s id="cochon">C'est si bon d'être un cochon</s></h1>
<a href="javascript:plus_clair()">Plus clairement!</a>
</body></html>
|
L'exemple contient un titre avec du texte rayé. Au dessous, se trouve un lien qui, si on le clique, appelle la fonction JavaScript plus_clair() . Cette fonction accède avec document.getElementById("cochon") à l'élément s-Element et lui attribue pour la propriété universelle className le nom de classe rouge zu, pour lequel existent des définitions CSS dans un passage de style dans l'entête du fichier. Le texte biffé devient ainsi rouge.
|
|
samp (objet élément HTML)Référence HTML pour les éléments: voir Élément: samp
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <samp>...</samp> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
</head><body>
<p>Je dis par exemple toujours <samp id="parexemple"
onMouseOver="alert(document.getElementById('parexemple').id)">par
exemple</samp></p>
</body></html>
|
L'exemple contient un texte marqué par <samp>...</samp>. Dans le repère d'ouverture est noté le gestionnaire d'événement onMouseOver. En passant avec la souris sur le texte s'affiche dans une fenêtre de dialogue, la valeur Id de l'élément. Pour cela, il est accédé avec document.getElementById('parexemple').id à la propriété correspondante.
L'exemple indiqué est également interprété par Opera 5.12.
|
|
script (objet élément HTML)Référence HTML pour les éléments: voir Élément: script
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <script>...</script> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
function hallo()
{
alert("Hallo Welt");
}
|
function hallo()
{
alert("hello world");
}
|
<html><head><title>Test</title>
<script src="hello_allemand.js" type="text/javascript">
</script>
<script type="text/javascript">
<!--
function anglais() {
if (document.getElementsByTagName("script")[0].src!="hello_anglais.js")
document.getElementsByTagName("script")[0].src="hello_anglais.js";
hallo();
}
function allemand() {
if (document.getElementsByTagName("script")[0].src!="hello_allemand.js")
document.getElementsByTagName("script")[0].src="hello_allemand.js";
hallo();
}
//-->
</script>
</head><body>
<a href="javascript:anglais()">Salut au monde en anglais</a><br>
<a href="javascript:allemand()">Salut au monde en allemand</a>
</body></html>
|
Pour cet exemple, on été définis deux fichiers externes JavaScript. Les deux fichiers contiennent la même fonction Hallo(). Ils se différencient pourtant en ce sens que dans le fichier hello_allemand.js, la sortie se fera en allemand et dans le fichier hello_anglais.js elle se fera en anglais.
Dans l'exemple, il y a deux passages scripts. Dans le premier passage, le fichier externe hello_allemand.js est chargé en employant la propriété src. Dans le deuxième passage sont notées les fonctions anglais() et allemand() . Le lien Salut au monde en anglais appelle la fonction die fonction anglais(). Dans la fonction, il est vérifié si le fichier hello_anglais.js a bien été affecté au premier élément script comme propriété src. Si ce n'est pas le cas, cet élément se voit affecter le fichier hello_anglais.js et le fichier est chargé. La fonction hallo() sort maintenant le message en anglais. Si au contraire le lien Salut au monde en allemand est cliqué, il est vérifié si le fichier hello_allemand.js a été affecté et la propriété modifiée le cas échéant. La sortie du message s'effectue alors en langue allemande.
Avec Opera 5.12 et Netscape 6.1 cet exemple ne peut pas être retracé, étant donné que les deux navigateurs n'interprètent pas le fichier venant d'être affecté.
L'utilisation de propriétés universelles n'est pas prévue dans le standard HTML-4.0-Standard pour l'élément script. C'est pourquoi vous devez éviter d'employer pour cet élément la méthode document.getElementsById().
La version Macintosh de l'Explorer Internet 5.0 Macintosh réagit avec un message d'erreur pour cet exemple, étant donné qu'il ne peut visiblement pas accéder à cet élément avec document.getelementsByTagName().
Opera 5.12 n'interprète pas l'attribut type. Si vous désirez par exemple insérer un passage script en VB-Script , alors l'attribut réprouvé language pour la mention du langage est absolument indispensable, étant donné que le navigateur génère autrement des messages d'erreurs, vu qu'il utilise JavaScript comme langage par défaut.
|
|
select (objet élément HTML)Référence HTML pour les éléments: voir Élément: select
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <select>...</select> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés et méthodes qui sont les suivantes.
| |||||||||||||||||||||||||||||||||||||||||||||||||||
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var valeur = 1;
function ajout() {
var position=null;
if (document.all) position=position=document.getElementsByName("choix")[0].length;
var element = document.createElement("option");
element.text = document.getElementsByName("saisie")[0].value;
element.value = valeur;
valeur += 1;
document.getElementsByName("choix")[0].add(element,position);
}
//-->
</script>
</head><body>
<form name="formulaire" action="">
<select name="choix" size="10">
<option value="0">Liste</option>
</select><br>
element: <input name="saisie" size="30">
<input type="button" value="ajouter" onClick="ajout()">
</form>
</body></html>
|
L'exemple contient un formulaire avec une liste de choix avec un champ de saisie et un bouton pouvant être cliqué. Si l'utilisateur clique sur le bouton, la valeur entrée dans le champ de saisie est ajoutée comme élément de la liste de choix de façon dynamique. Pour cela, la fonction JavaScript ajout(), notée dans l'entête de fichier est appelée. Avant que l'élément ne puisse être ajouté avec la méthode objet add(), il faut d'abord qu'un nouvel élément option soit créé avec document.createElement(). L'élément est sauvegardé dans la variable element. Son texte visible lui est affecté avec element.text. Ici il est accédé avec document.getElementsByName("saisie")[0].value à la valeur du champ de saisie. L'élément de liste reçoit même une valeur d'envoi value. Pour cela la variable valeur est affectée, qui est ensuite incrémentée de 1, de façon à ce que chaque nouvel élément reçoive un nombre plus élevé comme valeur d'envoi. Enfin, il est accédé à la liste de choix avec document.getElementsByName("choix")[0] et le nouvel élément est ajouté à la fin de la liste.
La méthode add() attend comme premier paramètre l'entrée pour constituer le nouvel élément de liste et comme deuxième paramètre, la position avant laquelle l'élément doit être inséré.
Dans cet exemple, il est indispensable de distinguer entre les différents navigateurs. Netscape 6.1 n'interprète la méthode add() que lorsque null lui est transmis pour la position. Le paramètre null signifie d'ailleurs: insérer l'élément à la fin.
Dans l'Explorer Internet MS par contre, cet appel de la méthode mène à un conflit de types. Vous pouvez éviter celui-ci en transmettant comme paramètre, comme dans l'exemple, le longueur de la liste à compléter, ou bien au choix en omettant le paramètre position.
Netscape 6.1 n'interprète pas encore la mention de la position comme prévu. Pour programmer pour les deux navigateurs, vous devez donc insérer un "aiguillage pour navigateurs" à l'aide par exemple de l'objet navigator.
|
|
small (objet élément HTML)Référence HTML pour les éléments: voir Élément: small
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <small>...</small> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<style type="text/css">
<!--
.mini { font-family:Small Fonts; font-size:5pt }
-->
</style>
<script type="text/javascript">
<!--
function minuscule() {
document.getElementsByTagName("small")[0].className = "mini";
}
//-->
</script>
</head><body>
<small onClick="minuscule()">minuscule!</small>
</body></html>
|
L'exemple contient un texte marqué avec <small>...</small>. En cliquant sur le texte (onClick) la fonction JavaScript minuscule(), notée dans l'entête de fichier est appelée. Cette fonction accède avec document.getElementsByTagName("small")[0] au premier élément small dans le document et lui affecte la propriété className avec la valeur mini. Là se cache la classe CSS qui est définie dans un passage de style dans l'entête de fichier.
|
|
span (objet élément HTML)Référence HTML pour les éléments: voir Élément: span
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <span>...</span> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<style type="text/css">
<!--
#ceformat_ci { font-family:Arial; font-size:18pt }
#autre_format { font-family:Algerian; font-size:36pt }
-->
</style>
<script type="text/javascript">
<!--
function modifier() {
document.getElementById("ceformat_ci").id = "autre_format";
}
//-->
</script>
</head><body>
<span id="ceformat_ci" onClick="modifier()">Le format personnalisé</span>
</body></html>
|
L'exemple contient un texte qui est marqué avec <span>...</span>. L'élément span contient par ailleurs une liaison CSS, étant donné que son id a pour valeur ceformat_ci, pour lequel un format individuel a été défini dans l'entête de fichier. En cliquant sur le texte de span (onClick) la fonction JavaScript modifier(), notée dans l'entête de fichier est appelée. Cette fonction accède avec document.getElementById("ceformat_ci") à l'élément das span et lui attribue pour la propriété id la nouvelle valeur autre_format. Pour cette valeur Id est également notée une définition CSS dans un passage de style. L'exemple provoque donc un échange dynamique des propriétés CSS pour l'élément span.
|
|
strike (objet élément HTML)Référence HTML pour les éléments: voir Élément: strike
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <strike>...</strike> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
</head><body>
<strike id="strike" onMouseOver="alert(document.getElementById('strike').title)" title="NON, parce qu'il est en cours d'abandon">Utilisez cet élément!</strike>
</body></html>
|
L'exemple contient un texte qui est marqué avec <strike>...</strike>. Dans le repère d'ouverture est noté le gestionnaire d'événement onMouseOver. En passant sur le texte barré avec la souris, un message est sorti, à savoir le texte qui est noté dans l'attribut title de l'élément. Pour ce faire, il est accédé avec document.getElementById('strike').title à l'élément. Le nom id strike veut dire exactement la même chose que le nom de l'élément, ceci simplement pour démontrer que c'est tout à fait permis.
L'exemple indiqué est également interprété par Opera 5.12.
|
|
strong (objet élément HTML)Référence HTML pour les éléments: voir Élément: strong
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <strong>...</strong> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<style type="text/css">
<!--
.normal { font-size:20pt; color:blue; }
.extra { font-size:20pt; color:red; background-color:yellow; }
-->
</style>
<script type="text/javascript">
<!--
function changer() {
if(document.getElementById("fort").className == "normal")
document.getElementById("fort").className = "extra";
else
document.getElementById("fort").className = "normal";
}
//-->
</script>
</head><body>
<p><strong id="fort" class="normal" onMouseOver="changer()" onMouseOut="changer()">très fort!</strong></p>
</body></html>
|
L'exemple contient du texte qui est marqué avec <strong>...</strong>. Le repère d'ouverture contient une mention de classe CSS, une mention Id claire et sans ambiguïté et les gestionnaires d'événements onMouseOver et onMouseOut, qui appelle chacun la fonction JavaScript changer() qui est notée dans l'entête de fichier. Cette fonction interroge si le nom de classe affectée est bien normal. Si oui, il est modifié en extra sinon il est modifié en normal. Ainsi s'obtient l'effet qu'en passant sur le texte avec la souris les propriétés CSS soient modifiées de façon dynamique.
|
|
style (objet élément HTML)Référence HTML pour les éléments: voir Élément: style
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <style>...</style> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<style type="text/css">
<!--
h1 { font-size:36pt; color:red; }
-->
</style>
<script type="text/javascript">
<!--
function sansCSS() {
document.getElementsByTagName("style")[0].disabled = true;
}
//-->
</script>
</head><body>
<h1>Avec CSS!</h1>
<a href="javascript:sansCSS()"><b>sans CSS!</b></a>
</body></html>
|
L'exemple contient un titre et un lien. En cliquant sur le lien, la fonction JavaScript sansCSS(), notée dans l'entête de fichier est appelée. La fonction accède avec document.getElementsByTagName("style")[0] au premier élément style et fixe sa propriété disabled sur la valeur booléenne true ("vrai"). Ainsi, tous les formats définis dans le passage de style cessent de s'appliquer au document. Le titre perd ses propriétés CSS de façon dynamique.
|
|
sub (objet élément HTML)Référence HTML pour les éléments: voir Élément: sub
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <sub>...</sub> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
</head><body>
<a href="javascript:alert(document.getElementsByTagName('sub')[0].title)">Bas</a> et <sub title="très bas">plus bas</sub>
</body></html>
|
L'exemple contient un mot qui est marqué avec <sub>...</sub>, et un lien. Encliquant sur le lien, la valeur de l'attribut title de l'élément sub est affichée dans une fenêtre de dialogue. Pour cela, il est accédé avec document.getElementsByTagName('sub')[0] au premier élément sub du fichier.
L'exemple indiqué est également interprété par Opera 5.12.
|
|
sup (objet élément HTML)Référence HTML pour les éléments: voir Élément: sup
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <sup>...</sup> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function echange() {
var swap = document.getElementById("base").firstChild.nodeValue;
document.getElementById("base").firstChild.nodeValue =
document.getElementById("exposant").firstChild.nodeValue;
document.getElementById("exposant").firstChild.nodeValue = swap;
}
//-->
</script>
</head><body><span style="font-size:200%">
<a id="base" href="javascript:echange()">x</a><sup id="exposant">y</sup>
</span></body></html>
|
L'exemple représente un texte "x puissance y". Le "x" est ici enfermé dans un lien qui, si on le clique, appelle la - fonction JavaScript echange(), notée dans l'entête de fichier. Cette fonction accède aussi bien à l'élément-lien (document.getElementById("base")) qu'à l'élément sup (document.getElementById("exposant")) et échange leurs contenus. L'accès aux contenus se fait avec node.nodeValue (firstChild est un type de nœud bien précis).
|
|
table (objet élément HTML)Référence HTML pour les éléments: voir Élément: table
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <table>...</table> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés et méthodes qui sont les suivantes.
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var rangee = 0;
function inserer_rangee() {
if (rangee==0) document.getElementById("tableau").deleteRow(0);
var TR = document.getElementById("tableau").insertRow(rangee);
rangee += 1;
var TD1 = document.createElement("td");
var TD1text = document.createTextNode(document.formulaire.textegauche.value);
TD1.appendChild(TD1text);
var TD2 = document.createElement("td");
var TD2text = document.createTextNode(document.formulaire.textedroit.value);
TD2.appendChild(TD2text);
TR.appendChild(TD1);
TR.appendChild(TD2);
document.formulaire.textegauche.value = "";
document.formulaire.textedroit.value = "";
}
function bordure() {
if(document.getElementsByName("Option")[0].checked == true)
document.getElementById("tableau").border = "2";
else
document.getElementById("tableau").border = "0";
}
function couleur() {
if(document.getElementsByName("Option")[1].checked == true)
document.getElementById("tableau").bgColor = "#CCCCFF";
else
document.getElementById("tableau").bgColor = "";
}
//-->
</script>
</head><body>
<form name="formulaire" action="">
<input type="text" name="textegauche">
<input type="text" name="textedroit">
<input type="button" value=" OK " onClick="inserer_rangee()"><br>
<input type="checkbox" name="Option" onClick="bordure()"> bordure
<input type="checkbox" name="Option" onClick="couleur()"> Arrière-plan
</form>
<table id="tableau">
<tr><td>Un tableau</td></tr>
</table>
</body></html>
|
L'exemple contient un formulaire et au-dessous un tableau d'une rangée. Le formulaire est constitué de deux champs de saisie, d'un bouton pouvant être cliqué et de deux cases d'option. Les deux champs de saisie servent à remplir le tableau avec un nouveau contenu. Si l'utilisateur entre quelque chose dans les deux champs, et clique ensuite sur le bouton à cliquer, la fonction JavaScript inserer_rangee(), notée dans l'entête de fichier, est appelée. Au premier appel de la fonction - la variable rangee est ici encore égale à 0 - la rangée existante du tableau est effacée avec document.getElementById("tableau").deleteRow(0).
Avec document.getElementById("tableau").insertRow(rangee) la fonction accède au tableau et lui ajoute une nouvelle rangée avec insertRow(). La valeur transmise rangee stipule à quel endroit la rangée doit être insérée. Étant donné que la variable rangee est enfin incrémenté de 1, La rangée sera, au prochain appel de la fonction, ajoutée sous la dernière ligne.
La valeur retournée par insertRow() est l'élément tr venant d'être créé pour la rangée de tableau. L'élément est sauvegardé dans la variable TR.
Pour remplir la rangée de tableau avec du contenu, deux cellules de tableau sont créées. Les éléments sont créés avec document.createElement(). Pour le contenu des cellules de tableau, sont créés deux nœuds texte avec document.createTextNode() qui se voient affecter comme valeur, le contenu des deux champs de saisie du formulaire.
Avec la méthode node.appendChild() les nœuds texte sont ajoutés aux cellules du tableau et pour finir, les cellules de tableau sont ajoutées avec la même méthode comme nœuds-enfant à la rangée du tableau .
Les deux cases d'option appellent lorsqu'elles sont cliquées (onClick) les fonctions bordure() ou couleur(). Là est vérifié pour chacune si la case d'option est cochée (checked) ou non. Ensuite il est accédé avec document.getElementById("tableau") au tableau et selon le cas - la case est-elle cochée ou non - ses propriétés pour border ou bien bgColor sont modifiées de façon dynamique.
|
|
tbody (objet élément HTML)Référence HTML pour les éléments: voir Élément: tbody
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <tbody>...</tbody> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés et méthodes qui sont les suivantes.
| |||||||||||||||||||||||||||
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function droite() {
document.getElementById("donnees_tableau").align = "right";
}
//-->
</script>
</head><body>
<table border="1">
<tr><th width="200">Nom</th><th width="200">age</th></tr>
<tbody id="donnees_tableau">
<tr><td>Jean</td><td>18</td></tr>
<tr><td>Mylène</td><td>17</td></tr>
</tbody>
</table>
<a href="javascript:droite()">aligner à droite</a>
</body></html>
|
L'exemple contient un tableau avec un passage marqué par tbody. Au dessous du tableau est noté un lien qui, lorsqu'il est cliqué, appelle la fonction JavaScript droite(), notée dans l'entête de fichier. Cette fonction accède avec document.getElementById("donnees_tableau") à l'élément tbody et modifie sa propriété align sur la valeur right. Ainsi, toutes les cellules du tableau dans le passage tbody sont alignées à droite.
Avec Netscape (6.1) et avec l'édition Macintosh de l'Explorer Internet 5.0 il était impossible de retracer l'exemple indiqué.
|
|
td (objet élément HTML)Référence HTML pour les éléments: voir Élément: td
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <td>...</td> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
</head><body>
<table cellspacing="2" border="2">
<tr><td>Jean</td><td>18</td></tr>
<tr><td>Mylène</td><td>17</td></tr>
</table>
<script type="text/javascript">
<!--
var couleurs = new
Array("#CCFFCC","#CCCCFF","#FFCCCC","#FFCCFF","#FFFFCC");
for(var i = 0; i < document.getElementsByTagName("td").length; i++) {
var index = parseInt((Math.random() * 100) % (couleurs.length - 1));
document.getElementsByTagName("td")[i].bgColor = couleurs[index];
}
//-->
</script>
</body></html>
|
L'exemple contient un tableau. Au dessous est noté un passage JavaScript. Là dans une boucle "for" il est accédé dans l'ordre avec document.getElementsByTagName("td") à tous les éléments td du fichier. Par l'appel de Math.random() des nombres aléatoires sont recherchés il leur est appliqué, après les avoir multiplié par 100 et opéré une division modulo, la fonction parseInt() de telle façon que des nombres entiers soient créés. Ceux-ci sont utilisés comme index pour le tableau (array) couleurs défini auparavant. Avec document.getElementsByTagName("td")[i].bgColor la couleur d'arrière plan des cellules actuelles respectives est finalement fixée sur une valeur de couleur aléatoire. Le tableau est ainsi joliment multicolore et chaque cellule reçoit une couleur d'arrière plan choisie par hasard.
|
|
textarea (objet élément HTML)Référence HTML pour les éléments: voir Élément: textarea
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <textarea>...</textarea> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés et méthodes qui sont les suivantes.
| ||||||||||||||||||||||||||||||||||||||||||||||||
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function setText() {
document.getElementById("Text").firstChild.nodeValue = document.getElementById("saisie").value;
}
//-->
</script>
</head><body>
<form name="formulaire" action="">
Texte:<br>
<textarea id="saisie" rows="10" cols="50"
onKeyPress="setText()"></textarea>
</form>
<div id="Text" style="font-size:16pt; background-color:#FFFFCC; padding:10px;
border:solid 1px red"> </div>
</body></html>
|
L'exemple contient un formulaire avec un passage de saisie textarea. Sous le formulaire est noté un passage div élégamment formaté, qui n'a d'abord pour tout contenu qu'un espace imposé . Dans le repère d'ouverture <textarea> est noté le gestionnaire d'événement onKeyPress. Quand l'utilisateur entre quelque chose dans le champ, est appelée à chaque fois que la touche est relâchée, la fonction JavaScript setText() qui est notée dans l'entête de fichier. Cette fonction accède avec document.getElementById("Text").firstChild.nodeValue au contenu de l'élément div et affecte à celui-ci la valeur du champ de saisie (document.getElementById("saisie").value). Ainsi le texte que l'utilisateur entre dans le champ de texte est-il écrit dans le passage div de façon dynamique.
|
|
tfoot (objet élément HTML)Référence HTML pour les éléments: voir Élément: tfoot
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <tfoot>...</tfoot> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés et méthodes qui sont les suivantes.
| |||||||||||||||||||||||||||
<html><head><title>Test</title>
</head><body>
<table border="1">
<tfoot id="pied" valign="top">
<tr><td colspan="2" height="40">
Mentions sans garantie!
</td></tr></tfoot>
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
<!--
var Alignement = document.getElementById("pied").vAlign;
document.write("Les mentions sans garantie ont leur alignement: " + Alignement);
//-->
</script>
</body></html>
|
L'exemple contient un tableau avec un passage marqué par tfoot. Sous le tableau est noté un passage JavaScript. Là, il est accédé avec document.getElementById("pied").vAlign à l'élément tfoot et la valeur de sa propriété vAlign est lue. Enfin, le résultat est écrit dans le document.
L'exemple indiqué est également interprété par Opera 5.12.
|
|
th (objet élément HTML)Référence HTML pour les éléments: voir Élément: th
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <th>...</th> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
</head><body>
<table border="1">
<tr><th width="200">Nom</th><th width="200">Age</th></tr>
<tr><td>Jean</td><td>18</td></tr>
<tr><td>Mylène</td><td>17</td></tr>
</table>
<script type="text/javascript">
<!--
for(var i = 0; i < document.getElementsByTagnom("th").length; i++)
document.getElementsByTagName("th")[i].align = "left";
//-->
</script>
</body></html>
|
L'exemple contient un tableau et au-dessous un passage JavaScript. Là sont recherchées dans une boucle "for" et dans l'ordre, tous les éléments th du document. La valeur left leur est affectée pour leur propriété align.
Avec l'édition Macintosh de l'Explorer Internet 5.0 cet exemple n'est pas interprété.
|
|
thead (objet élément HTML)Référence HTML pour les éléments: voir Élément: thead
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <thead>...</thead> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
| |||||||||||||||||||||||||||
<html><head><title>Test</title>
</head><body>
<table border="1">
<thead id="entete">
<tr><th width="200">nom</th><th width="200">age</th></tr>
</thead>
<tr><td>Hans</td><td>18</td></tr>
<tr><td>Flora</td><td>17</td></tr>
</table>
<script type="text/javascript">
<!--
var rangee = document.getElementById("entete").rows.length;
document.write("L'entête de tableau a " + rangee + " rangées");
//-->
</script>
</body></html>
|
L'exemple contient un tableau et au dessous un passage JavaScript. Là le nombre des rangées dans le passage de l'élément thead est recherché avec document.getElementById("entete").rows.length pour être enfin écrit dans le document.
|
|
title (objet élément HTML)Référence HTML pour les éléments: voir Élément: title
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <title>...</title> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.
|
<html><head><title>Un jour tout à fait particulier</title>
</head><body>
<script type="text/javascript">
<!--
document.write("<h1>" + document.getElementsByTagName('title')[0].text + "<\/h1>");
//-->
</script>
</body></html>
|
L'exemple contient un passage JavaScript dans lequel un titre N°1 est écrit de façon dynamique dans le document. Le contenu de l'élément title est écrit comme texte du titre. Pour cela, il est accédé avec document.getElementsByTagName('title')[0] à l'élément title.
|
|
tr (objet élément HTML)Référence HTML pour les éléments: voir Élément: tr
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <tr>...</tr> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés et méthodes qui sont les suivantes.
| ||||||||||||||||||||||||||||||||||||
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var cellule = 0;
function nouvelle_cellule() {
if (cellule==0) document.getElementById("rangee").deleteCell(0);
var Text = document.createTextNode(document.formulaire.saisie.value);
var TD = document.getElementById("rangee").insertCell(cellule);
cellule += 1;
TD.appendChild(Text);
document.formulaire.saisie.value = "";
}
//-->
</script>
</head><body>
<table border="1">
<tr id="rangee"><td>cellule</td></tr>
</table>
<form name="formulaire" action="">
<input type="text" name="saisie">
<input type="button" value=" OK " onClick="nouvelle_cellule()">
</form>
</body></html>
|
L'exemple contient un tableau avec une rangée de tableau à une colonne et au dessous un formulaire avec un champ de saisie et un bouton pouvant être cliqué. En cliquant sur le bouton la fonction JavaScript nouvelle_cellule(), notée dans l'entête de fichier est appelée. Au premier appel de la fonction - la variable cellule est encore ici égale à 0 - la cellule de tableau existante est effacée avec document.getElementById("rangee").deleteCell(0). La fonction crée d'abord un nœud texte avec document.createTextNode() qui reçoit comme valeur le contenu du champ de saisie du formulaire. Enfin il est accédé avec document.getElementById("rangee") à la rangée du tableau et une nouvelle cellule de tableau est insérée avec la méthode insertCell(). Le paramètre transmis détermine à quel endroit la cellule doit être insérée dans la rangée. Dans l'exemple la variable cellule est utilisée à cet effet; elle est incrémentée de 1 à chaque appel de la fonction. Ainsi on s'assure que des nouvelles cellules sont toujours ajoutées à la fin de la ligne.
La valeur retournée par insertCell() est l'élément td venant d'être créé. Il est sauvegardé dans la variable TD. Avec la méthode node.appendChild() le nœud texte créé auparavant est ajouté comme élément enfant dans l'élément td. La rangée de tableau est ainsi élargie de façon dynamique par le nouvel élément de cellule.
|
|
tt (objet élément HTML)Référence HTML pour les éléments: voir Élément: tt
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <tt>...</tt> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
</head><body>
<tt title="un télétexte!"
onMouseover="alert(document.getElementsByTagName('tt')[0].title)">Que suis-je?</tt>
</body></html>
|
L'exemple contient un texte marqué avec <tt>...</tt>, qui contient lui-même le gestionnaire d'événement onMouseOver. En passant sur le texte avec la souris la valeur de l'attribut title s'affiche dans une fenêtre de dialogue. Pour cela il est accédé à l'élément avec document.getElementsByTagName('tt')[0].
L'exemple indiqué est également interprété par Opera 5.12.
|
|
u (objet élément HTML)Référence HTML pour les éléments: voir Élément: u
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <u>...</u> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Un jour tout à fait particulier</title>
<style type="text/css">
<!--
.ainsi { text-decoration:overline; }
-->
</style>
<script type="text/javascript">
<!--
function autrement() {
document.getElementById("uText").className = "ainsi";
}
//-->
</script>
</head><body>
<u id="uText" onClick="autrement()">c'est le texte</u>
</body></html>
|
L'exemple contient du texte souligné. Dans le repère d'ouverture <u> est noté le gestionnaire d'événement onClick. Lorsque le texte de cet élément est cliqué la fonction JavaScript autrement(), notée dans l'entête de fichier est appelée. Celle-ci accède à l'élément u avec document.getElementById("uText") et lui affecte la classe de style ainsi définie dans un passage de style de l'entête de fichier. Le texte est représenté ainsi "surligné" au lieu d'être souligné.
Dans l'Explorer Internet MS 5.0 l'appel de la fonction a pour résultat que le texte est représenté aussi bien souligné que "surligné". Netscape 6.1 et l' Explorer Internet 5.5 se comportent par contre comme c'est décrit dans l'exemple.
|
|
ul (objet élément HTML)Référence HTML pour les éléments: voir Élément: ul
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <ul>...</ul> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function puce(symbole) {
document.getElementById("Liste").type = symbole;
}
//-->
</script>
</head><body>
<ul id="Liste">
<li>un point</li>
<li>et encore un point</li>
</ul>
<a href="javascript:puce('disc')">Puce ronde</a>
<a href="javascript:puce('square')">Puce carrée</a>
</body></html>
|
L'exemple contient une liste énumérative. Au dessous sont notés deux liens. En cliquant sur ces liens, la fonction JavaScript puce(), notée dans l'entête de fichier est appelée pour chacun. Cette fonction accède avec document.getElementById("Liste") à l'élément ul de la liste et affecte à sa propriété type la valeur que la fonction s'est vu transmettre à son appel à partir des liens.
|
|
var (objet élément HTML)Référence HTML pour les éléments: voir Élément: var
accéder aux objets éléments HTML voir Objets éléments HTML: généralités sur l'utilisation
Les éléments HTML <var>...</var> ont en tant qu'objet du modèle DOM des Propriétés universelles pour l'accès des langages script.
<html><head><title>Test</title>
</head><body>
Fichier: <var id="fichier" title="/usr/docs/web/projets/nomfichier.html">nomfichier.html</var><br>
plus précisément:
<script type="text/javascript">
<!--
document.write("<var>" + document.getElementById('fichier').title + "<\/var>");
//-->
</script>
</body></html>
|
L'exemple contient un texte marqué avec <var>...</var>. Au dessous est noté un passage JavaScript. Là, il est accédé avec document.getElementById('fichier') à l'élément var et la valeur de sa propriété title est écrite de façon dynamique dans le document.
L'exemple indiqué est également interprété par Opera 5.12.
|
| |
 |
node
|
 |
document
|
| 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
