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 cous 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://www.selfhtml.com.fr/";
document.getElementById("selfhtml_link").firstChild.nodeValue = "SELFHTML actuel";
}
//-->
</script>
</head><body>
<a id="selfhtml_link" href="http://selfhtml.selfhtml.com.fr/">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&eac
