SELFHTML

Objets éléments HTML

Page d'information: vue d'ensemble

vers le bas Objets éléments HTML: généralités sur l'utilisation
vers le bas Propriétés universelles (valeur d'attributs universels)

Objets éléments

vers le bas a vers le bas abbr vers le bas acronym vers le bas address vers le bas applet vers le bas area vers le bas b vers le bas base
vers le bas basefont vers le bas bdo vers le bas big vers le bas blockquote vers le bas body vers le bas br vers le bas button vers le bas caption
vers le bas center vers le bas cite vers le bas code vers le bas col vers le bas colgroup vers le bas dd vers le bas del vers le bas dfn
vers le bas dir vers le bas div vers le bas dl vers le bas dt vers le bas em vers le bas fieldset vers le bas font vers le bas form
vers le bas frame vers le bas frameset vers le bas h1-h6 vers le bas head vers le bas hr vers le bas html vers le bas i vers le bas iframe
vers le bas img vers le bas input vers le bas ins vers le bas isindex vers le bas kbd vers le bas label vers le bas legend vers le bas li
vers le bas link vers le bas map vers le bas menu vers le bas meta vers le bas noframes vers le bas noscript vers le bas object vers le bas ol
vers le bas optgroup vers le bas option vers le bas p vers le bas param vers le bas pre vers le bas q vers le bas s vers le bas samp
vers le bas script vers le bas select vers le bas small vers le bas span vers le bas strike vers le bas strong vers le bas style vers le bas sub
vers le bas sup vers le bas table vers le bas tbody vers le bas td vers le bas textarea vers le bas tfoot vers le bas th vers le bas thead
vers le bas title vers le bas tr vers le bas tt vers le bas u vers le bas ul vers le bas var
 
 vers le bas 

Objets éléments HTML: généralités sur l'utilisation

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.

Accès par l'attribut name:

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:

vers le bas a vers le bas applet vers le bas form vers le bas frame vers le bas img vers le bas input vers le bas iframe
vers le bas map vers le bas meta vers le bas object vers le bas param vers le bas select vers le bas textarea

Avec la méthode Autre page d'information document.getElementsByName() vous pouvez adresser les éléments HTML qui ont un attribut name.

Accès par l'attribut id:

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 Autre page d'information document.getElementById() vous pouvez adresser des éléments HTML ayant un attribut id.

Accès par l'arborescence d'éléments:

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 Autre page d'information document.getElementsByTagName() de tels accès dont possibles.

Propriétés et méthodes d'objets éléments HTML:

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.

Attention:

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 Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x Propriétés universelles

Les propriétés universelles correspondent aux Autre page d'information attributs universels de HTML. Ces propriétés s'appliquent à presque tous les éléments HTML.

accéder aux objets éléments HTMLvoir vers le haut Objets éléments HTML: généralités sur l'utilisation
Propriété État Signification
className lecture/écriture Nom de classe CSS
dir lecture/écriture Sens de lecture
id lecture/écriture Nom sans ambiguïté clair pour tout le document
lang lecture/écriture Langue du pays (de, en, fr, it etc...)
title lecture/écriture Titre

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un paragraphe de texte avec un id="p_italiano". Le paragraphe de texte contient également un Autre page d'information 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.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x a (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: a
accéder aux objets éléments HTML voir vers le haut 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 #nach oben 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.

Propriété État Signification
accessKey lgcture/écriture Raccourci clavier pour le lien
charset lecture/écriture Jeu de caractères de la cible du lien
coords lecture/écriture Passages composés de liens pour les objets
href lecture/écriture Cible du lien
hreflang lecture/écriture Langue de la cible du lien
name lecture/écriture nom de l'ancre
rel lecture/écriture Cible du lien comme "page suivante"
rev lecture/écriture Cible du lien comme "page précédente"
shape lecture/écriture Passages composés de liens pour les objets
tabIndex lecture/écriture Recherche par tabulateur pour les liens
target lecture/écriture Nom de fenêtre de la cible du lien
type lecture/écriture Type Mime de la cible du lien
Méthode Signification
blur() Retire la zone de saisie active de cet élément
focus() Place la zone de saisie active sur ce champ

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

Le fichier d'exemple contient deux liens. Le premier lien mène à une adresse sur la toile et le deuxième appelle la Autre page d'information 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 à Autre page d'information node.nodeValue (firstChild désigne le premier nœud enfant d'un nœud).

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.x abbr (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: abbr
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information gestionnaires d'événement onMouweOver et onMouseOut, qui appellent l'un et l'autre la Autre page d'information 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.

Attention:

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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x acronym (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: acronym
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script..

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x address (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: address
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information gestionnaires d'événement onMouseOver et onMouseOut, qui appellent chacun une Autre page d'information 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 Autre page d'information node.nodeValue (firstChild désigne le premier nœud-enfant d'un nœud).

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x applet (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: applet
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
align lecture/écriture Alignement
alt lecture/écriture Alternative en texte
archive lecture/écriture Liste de fichiers archive séparés par des virgules
code lecture/écriture Fichier de classe de l'applet
codeBase lecture/écriture URI de base de l'applet
height lecture/écriture Hauteur d'affichage
hspace lecture/écriture Espace horizontal entre l'applet et le cours du texte
name lecture/écriture Nom pour l'applet
object lecture/écriture Id objet de l'applet
vspace lecture/écriture Espace vertical entre l'applet et le cours du texte
width lecture/écriture Largeur d'affichage

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

Attention:

Netscape 6.1 n'interprète pas cet exemple.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x area (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: area
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
accesskey lecture/écriture Raccourci clavier pour le lien
alt lecture/écriture Court descriptif de la cible du lien
coords lecture/écriture Coordonnées du passage composé de liens
href lecture/écriture Cible du lien
nohref lecture/écriture Passage ne pouvant être cliqué
shape lecture/écriture Type d'un passage pouvant être cliqué
tabindex lecture/écriture Recherche tabulateur pour les liens
target lecture/écriture Nom de fenêtre de la cible du lien

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x b (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: b
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0MS IE 5.x base (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: base
accéder aux objets éléments HTML voir vers le haut 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.

Propriété État Signification
href lecture/écriture URI de base
target lecture/écriture Fenêtre cible par défaut pour les liens

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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.

Attention:

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().

 vers le hautvers le bas 

DOM 1.0MS IE 5.x basefont (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: basefont
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
color lecture/écriture Couleur d'écriture de base
face lecture/écriture Police d'écriture de base
size lecture/écriture Taille de police de base

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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.

Attention:

Avec Netscape (6.1) il n'etait pas possible de retracer l'exemple avec l'élément basefont.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x bdo (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: bdo
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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.

Attention:

Avec l'édition Macintosh de l'Explorer Internet 5.0 il était impossible de retracer l'exemple.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x big (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: big
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information gestionnaire d'événement onClick. Lorsqu'on clique le texte de cet élément, la Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x blockquote (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: blockquote
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
cite lecture/écriture URI de la source de la citation

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information gestionnaire d'événement onMouseOver, qui fait en sorte que le passage avec la souris sur la citation appelle la Autre page d'information 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.

Attention:

Opera 5.12 renvoie dans cet exemple undefined.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x body (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: body
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
aLink lecture/écriture Couleur pour tout le document pour les liens activés
background legture/écriture URI d'un graphique d'arrière plan pour tout le document
bgColor lecture/écriture Couleur d'arrière plan pour tout le document
link lecture/écriture Couleur pour tout le document pour les liens aux pages non encore visitées
text lecture/écriture Couleur du texte pour tout le document
vLink lecture/écriture Couleur pour tout le document pour les liens aux pages déjà visitées

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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.

Attention:

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 Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x br (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: br
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
clear lecture/écriture Position de la poursuite du texte

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x button (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: button
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
accessKey lecture/écriture Raccourci clavier pour l'accès par clavier
disabled lecture/écriture Le bouton ne peut pas être confirmé
form lecture Élément de formulaire dont il fait partie
name lecture/écriture Nom pour le bouton
tabIndex lecture/écriture Recherche par tabulateur
type lecture Type du bouton
value lecture/écriture Valeur d'envoi du bouton

Exemple:

Démonwtration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple définit dans un formulaire un bouton qui contient un Autre page d'information gestionnaire d'événement onClick. C'est pourquoi, lorsque le bouton et cliqué, la Autre page d'information fonction JavaScript bouton_heure(), notée dans l'entête du fichier est appelée. Cette fonction recherche à l'aide de l'objet Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0MS IE 5.x caption (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: caption
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
align lecture/écriture Alignement

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un petit tableau avec un titre de tableau, marqué par <caption>...</caption>. De plus, le repère d'ouverture contient le Autre page d'information gestionnaire d'événement onClick. Ainsi, lorsque le titre du tableau est cliqué la Autre page d'information 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).

Attention:

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é.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x center (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: center
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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').

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x cite (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: cite
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un passage marqué avec <cite>...</cite>. Dans le repère d'ouverture est noté le Autre page d'information 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').

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x code (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: code
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information gestionnaire d'événement onClick. En cliquant sur le texte de cet élément, la Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x col (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: col
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
align lecture/écriture Alignement
ch lecture/écriture Signe d'alignement comptable
chOff lecture/écriture Position du signe d'alignement comptable
span lecture/écriture Nombre de colonnes pour lesquelles s'appliquent les mentions
vAlign lecture/écriture Aligner les colonnes de tableau verticalement
width lecture/écriture Largeur de colonne

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information fonction JavaScript meme_largeur(). Celle-ci accède dans une Autre page d'information 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.

Attention:

Avec l'édition Macintosh de l'Explorer Internet 5.0 il était impossible de retracer l'exemple..

 vers le hautvers le bas 

DOM 1.0MS IE 5.x colgroup (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: colgroup
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
align lecture/écriture Alignement
ch lecture/écriture Signe d'alignement comptable
chOff lecture/écriture Position du signe d'alignement comptable
span lecture/écriture Nombre de colonnes pour lesquelles s'appliquent les mentions
vAlign lecture/écriture Aligner les colonnes de tableau verticalement
width lecture/écriture Largeur de colonne

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un tableau avec une définition colgroup. Sous le tableau est noté un lien qui, si on le clique, appelle la Autre page d'information 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.

Attention:

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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x dd (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: dd
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information fonction JavaScript Titre(), qui est notée dans l'entête de fichier. Celle-ci accède dans une Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x del (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: del
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
cite lecture/écriture URI pour les motifs de la modification
dateTime lecture/écriture Date et heure de la modification

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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 Autre page d'information 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.

Attention:

Opera 5.12 ne permet que l'accès en lecture à cette propriété.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x dfn (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: dfn
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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').

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0 dir (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: dir
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
compact lecture/écriture Représentation avec police condensée

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient une liste de répertoires. Lorsqu'on passe avec la souris sur la liste (onMouseOver) la -Autre page d'information 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.

Attention:

Ni Netscape ni l'Explorer Internet n'interprètent l'attribut HTML compact.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x div (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: div
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
align lecture/écriture Alignement

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient en tout trois passages div. En dessous est noté un lien. En cliquant sur le lien, la -Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0 dl (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: dl
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
compact lecture/écriture Représentation dans une police compacte

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient une liste de définitions. Lorsqu'on y passe avec la souris (onMouseOver) la Autre page d'information 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.

Attention:

Ni Netscape ni l'Explorer Internet n'interprètent l'attribut HTML compact.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5MS IE 5.x dt (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: dt
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient une liste de définitions. Chacun des éléments dt contient une affectation de classe de style vide et le Autre page d'information gestionnaire d'événement onClick. En cliquant sur les éléments la Autre page d'information 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.

Attention:

Netscape 6.1 n'interprète pas cet exemple.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x em (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: em
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un paragraphe dont une partie est marquée avec <em>...</em>. Le repère d'ouverture <em> contient les Autre page d'information gestionnaires d'événement onMouseOver et onMouseOut. Dans un cas, la Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.x fieldset (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: fieldset
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
form lecture élément de formulaire dont il fait partie

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un formulaire avec un passage fieldset- . Dans le repère d'ouverture <fieldset> est noté le Autre page d'information gestionnaire d'événement onMouseOver, qui appelle la Autre page d'information 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.

Attention:

L'Explorer Internet MS n'interprète la propriété form qu'à partir de la version 6.0(beta).

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x font (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: font
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
color lecture/écriture Couleur de police
face lecture/écriture Genre de police
size lecture/écriture Taille de police

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information fonction JavaScript jouer() est appelée. Auparavant ont été déjà définis différents Autre page d'information Arrays. La fonction jouer() recherche au moyen de Autre page d'information Math.random() des nombres aléatoires et leur applique, après les avoir multiplié par 100 et opéré une division modulo, la fonction Autre page d'information 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 (Autre page d'information window.setTimeout()) et se rappelle elle-même. Ainsi s'obtient un interminable jeu de modifications de texte aléatoires.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x form (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: form
accéder aux objets éléments HTML voir vers le haut 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 #nach oben 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.

Propriété État Signification
agceptCharset lecture/écriture Jeux de caractères soutenus
action lecture/écriture URI pour le traitement des données d'un formulaire
elements lecture Tableau pour les éléments faisant partie du formulaire
enctype lecture/écriture Type Mime pour la transmission des données du formulaire
length lecture Nombre d'éléments du formulaire
name lecture/écriture Nom du formulaire
method lecture/écriture Méthode de transmission pour les données du formulaire
target lecture/écriture Nom de fenêtre pour les sorties de réponse
Méthode Signification
reset() réinitialiser le formulaire
submit() Envoyer le formulaire

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

Attention:

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.

 vers le hautvers le bas 

DOM 1.0 frame (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: frame
accéder aux objets élémentw HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
frameBorder lecture/écriture Bordure visible ou non visible
longDesc lecture/écriture URI pour un descriptif plus long du contenu de la fenêtre-cadre
marginHeight lecture/écriture Nombre de pixels pour l'espace supérieur et inférieur séparant le contenu de la fenêtre et le bord de celle-ci
marginWidth lecture/écriture Nombre de pixels pour l'espace gauche et droit séparant le contenu de la fenêtre et le bord de celle-ci
name lecture/écriture Nom pour la fenêtre cadre
noResize lecture/écriture Taille modifiable ou non-modifiable
scrolling lecture/écriture Avec ou sans barres de défilement
src lecture/écriture URI pour le contenu de la fenêtre cadre

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple définit un jeu de cadres avec deux cadres. Pour le premier élément frame est noté le Autre page d'information gestionnaire d'événement onLoad. Après le chargement de la fenêtre cadre, la Autre page d'information 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.

Attention:

L'exemple ne pouvait être retracé ni avec Netscape ni avec l'Explorer Internet.

 vers le hautvers le bas 

DOM 1.0Netscape 6.xIE 5.x frameset (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: frameset
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
cols lecture/écriture Largeurs relatives pour des fenêtres cadres disposées en colonnes
rows lecture/écriture Hauteurs relatives pour des fenêtres cadres disposées en rangées

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information document.createElement(), auquel est affecté avec Autre page d'information setAttribute() un fichier à afficher. Enfin le nouveau nœud élément est inséré avec Autre page d'information appendChild() comme dernier nouvel élément enfant de l'élément frameset.

Attention:

L'exemple ne peut être que partiellement retracé avec l'Explorer Internet 5.0.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x h1-h6 (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: h1-h6
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
align lecture/écriture Alignement

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient en tout trois titres N°1. Tout en bas est noté un lien qui, si on le clique, appelle la Autre page d'information fonction JavaScript droitegauche() qui de trouve dans l'entête de fichier. Celle-ci accède dans une Autre page d'information 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é.

Attention:

L'exemple ne peut pas être retracé avec Netscape 6.1.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x head (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: head
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que sa propre propriété qui est la suivante.

Propriété État Signification
profile lecture/écriture URI pour le profil des données Meta

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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].

Attention:

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().

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x hr (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: hr
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
align lecture/écriture Alignement de la ligne de séparation
noShade lecture/écriture La ligne de séparation est représentée plate et sans effet de relief
size lecture/écriture Épaisseur de la ligne de séparation
width lecture/écriture Longueur de la ligne de séparation

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient une ligne de séparation d'une épaisseur 3 (size="3"). L'élément hr contient un Autre page d'information gestionnaire d'événement onClick. En cliquant sur la ligne de séparation, la Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x html (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: html
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que sa propre propriété qui est la suivante.

Propriété État Signification
version lecture/écriture Version de langage HTML

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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].

Attention:

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().

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x i (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: i
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un texte formaté avec <i>...</i>, et au dessous un lien qui lorsqu'il est cliqué, appelle la Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x iframe (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: iframe
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
align lecture/écriture Alignement
frameBorder lecture/écriture Bordure visible ou non visible
height lecture/écriture Hauteur d'affichage
longDesc lecture/écriture URI pour un descriptif plus détaillé de la fenêtre cadre
marginHeight lecture/écriture Nombre de pixels pour l'espace supérieur et inférieur séparant le contenu de la fenêtre et le bord de celle-ci
marginWidth lecture/écriture Nombre de pixels pour l'espace gauche et droit séparant le contenu de ls fenêtre et le bord de celle-cm
name lecture/écriture Nom pour la fenêtre cadre
scrolling lecture/écriture Avec ou sans barres de défilement
src lecture/écriture URI pour le contenu de la fenêtre cadre
width lecture/écriture Largeur d'affichage

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple définit une fenêtre cadre incorporée. Au dessous est défini un lien. En cliquant sur le lien, la Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x img (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: img
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
align lecture/écriture Alignement du graphique
alt lecture/écriture Alternative en texte
border lecture/écriture Épaisseur de la bordure autour du graphique
height lecture/écriture Hauteur d'affichage
hspace lecture/écriture Espace horizontal entre le graphique et le flux de texte
isMap lecture/écriture Le graphique utilise un traitement côté serveur pour les surfaces composées de liens
longDesc lecture/écriture URI pour un descriptif long du graphique
lowSrc lecture/écriture URI d'un aperçu du graphique
name lecture/écriture Nom du graphique
src lecture/écriture URI du graphique
useMap lecture/écriture Lien à un passage vers le bas map
vspace lecture/écriture Espace vertical entre le graphique et le flux de texte
width lecture/écriture Largeur d'affichage

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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 Autre page d'information 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.

Attention:

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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x input (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: input
accéder aux objets éléments HTML voir vers le haut 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 #nach oben 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.

Propriété État Signification
accept lecture/écriture Pour type="file"Types Mime autorisés pour la transmission de fichiers
accessKey lecture/écriture Raccourci clavier pour l'élément
align lecture/écriture Alignement
alt lecture/écriture Alternative en texte pour type="image"
checked lecture/écriture Choisir pour type="radio" ou bien type="checkbox"
defaultValue lecture/écriture Valeur par défaut
defaultChecked lecture/écriture Choix par défaut ou non
disabled lecture/écriture L'élément ne peut pas être modifié
form lecture Formulaire dont il fait partie
maxLength lecture/écriture Nombre maximum de signes pouvant être saisis
name lecture/écriture Nom de l'élément
readOnly lecture/écriture La valeur de l'élément ne peut pas être modifiée
size lecture/écriture Largeur d'affichage pour type="text"
src lecture/écriture URI du graphique pour type="image"
tabIndex lecture/écriture Recherche pat tabulateur
type lecture Type l'élément du formulaire
useMap lecture/écriture Lien à un passage vers le bas map pour type="image"
value lecture/écriture Valeur de l'élément
Méthode Signification
blur() Retire la zone de saisie active de cet élément
focus() Place la zone de saisie active sur cet élément
select() choisir une valeur
click() Cliquer sur l'élément

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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 Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0Netscape 6.xMS IE 5.x ins (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: ins
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
cite lecture/écriture URI pour les motifs de l'insertion
dateTime lecture/écriture Date et heure de l'insertion

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

Attention:

Avec Netscape 6.1beta il n'était pas possible de retracer cet exemple.

L'exemple est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x isindex (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: ins
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
form lecture formulaire dont il font partie
prompt lecture/écriture Texte de l'étiquette

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<isindex title="Élément HTML rarement employé" id="saisie" onMouseOver="alert(document.getElementById('saisie').title)">
</body></html>

Explication:

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').

Attention:

Le Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x kbd (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: kbd
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information gestionnaire d'événement onKeyPress. Quand le document a la zone de saisie active et que l'utilisateur appuie sur une touche quelconque, la Autre page d'information 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.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x label (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: label
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
accessKey lecture/écriture Raccourci clavier pour l'élément concerné
form lecture Formulaire dont elle fait partie
htmlFor lecture/écriture Id de l'élément auquel l'étiquette appartient

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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() .

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x legend (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: legend
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
accessKey lecture/écriture Raccourci clavier pour l'élément
align lecture/écriture Alignement
form lecture formulaire auquel il appartient

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

Attention:

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é.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x li (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: li
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
type lecture/écriture Puce pour l'énumération ou type de numérotation
value lecture/écriture Refixer la valeur de la numérotation en cours

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information fonction JavaScript modifier(), notée dans l'entête de fichier, est appelée. Cette fonction parcourt dans l'ordre dans une Autre page d'information 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".

 vers le hautvers le bas 

DOM 1.0MS IE 5.x link (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: link
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
charset lecture/écriture Jeu de caractères de la cible du lien
disabled lecture/écriture Comme bouton pouvant être cliqué ou non
href lecture/écriture Cible du lien
hreflang lecture/écriture Langue de la cible du lien
media lecture/écriture Mode de sortie
rel lecture/écriture Cible du lien comme "page suivante"
rev lecture/écriture Cible du lien comme "page précédente"
target lectuve/écriture Nom de fenêtre de la cible du lien
type lecture/écriture Type Mime de la cible du lien

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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.

Attention:

Avec Netscape 6.1 et avec l'édition Macintosh de l'Explorer Internet MS 5.0, cet exemple ne pouvait être retracé.

 vers le hautvers le bas 

DOM 1.0Netscape 6.xMS IE 5.x map (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: map
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
areas lecture/écriture Tableau des définitions d'vers le haut area
name lecture/écriture Nom d'ancre du passage de définitions

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 -Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0 menu (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: menu
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
compact lecture/écriture Représentation dans une police condensée

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient une liste de menus. En passant sur la liste avec la souris (onMouseOver) la Autre page d'information 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.

Attention:

Ni Netscape ni l'Explorer Internet n'interprètent l'attribut HTML compact.

 vers le hautvers le bas 

DOM 1.0 meta (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: meta
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
content lecture/écriture Valeur/contenu de la mention Meta
httpEquiv lecture/écriture Propriété pour les informations Meta (pour les données d'entête HTTP)
name lecture/écriture Propriété pour les informations Meta
scheme lecture/écriture Schéma pour la valeur de la propriété

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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">&#200;&#201;&#202;&#203;&#204;&#205;&#206;&#207;&#208;&#209;</p>
<p><a href="javascript:arabe()">arabe</a></p>
</body></html>

Explication:

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 Autre page d'information 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).

Attention:

Ni Netscape ni l'Explorer Internet n'interprètent cette modification.

 vers le hautvers le bas 

DOM 1.0 noframes (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: noframes
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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>.

Attention:

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.

 vers le hautvers le bas 

DOM 1.0 noscript (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: noscript
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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é.

Attention:

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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x object (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: object
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
align lecture/écriture Alignement de l'objet
archive lecture/écriture Liste de fichiers archive séparés par des virgules pour l'objet
border lecture/écriture Épaisseur de la bordure autour de l'objet
code lecture/écriture Fichiers de classe pour les applets Java
codeBase lecture/écriture URI de base pour les mentions sur data et archive
codeType lecture/écriture Type Mime de la source de donnéew
data lecture/écriture URI de la source de données
declare lecture/écriture Objet est chargé mais pas initialisé
form lecture Élément du formulaire enfaisant partie
height lecture/écriture Hauteur d'affichage
hspace lecture/écriture Espace horizontal entre l'objet et le flux de texte qui l'entoure
name lecture/écriture Nom du graphique
standBy lecture/écriture Message affiché pendant le chargement de l'objet
tabIndex lecture/écriture Recherche par tabulateur pour les objets
type lecture/écriture Type Mime de la source de données
useMap lecture/écriture Lien à un passage vers le bas map
vspace lecture/écriture Espace vertical entre l'objet et le flux de texte qui l'entoure
width lecture/écriture Largeur d'affichage

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient la définition d'objet d'un fichier TXT. Au dessous est noté un lien. Lorsque le lien est cliqué, la Autre page d'information 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.

Attention:

Avec Netscape 6.1 il n'était pas possible de retracer cet exemple.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x ol (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: ol
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
compact lecture/écriture Représentation avec une police condensée
start lecture/écriture Valeur de départ pour la numérotation
type lecture/écriture Genre de la numérotation

Exemple:

Démonwtration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient une liste numérotée. Sous celle-ci sont notés deux liens. Le premier appelle une Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x optgroup (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: optgroup
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
disabled lecture/écriture Le groupe d'éléments ne peut pas être choisi
label lecture/écriture Texte de l'élément du groupe

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

Attention:

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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x option (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: option
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
defaultSelected lecture/écriture Élément de liste de choix choisi par défaut
disabled lecture/écriture Élément de liste de choix ne peut pas être choisi
form lecture Formulaire auquel il appartient
index lecture Numéro d'index de l'élément de la liste de choix (le premier élément a le numéro 0, le deuxième le numéro 1 etc...)
label lecture/écriture Texte de l'élément dans le cadre des structures de menus
selected lecture/écriture Élément de liste de choix est choisi
text lecture Texte de l'élément de liste de choix
value lecture/écriture Valeur pour l'envoi de l'élément de liste de choix

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x p (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: p
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
align lecture/écriture Alignement

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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 Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x param (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: param
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
name lecture/écriture Nom du paramètre
type lecture/écriture Type Mime de la valeur
value lecture/écriture Valeur d'initialisation pour le paramètre
valueType lecture/écriture Informations sur l'attribut type

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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).

Attention:

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 .

 vers le hautvers le bas 

DOM 1.0 pre (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: pre
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
width lecture/écriture Largeur fixe pour le contenu

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un passage pre avec 30 signes x par ligne. Au dessous est noté un lien. En cliquant sur le lien, la Autre page d'information 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.

Attention:

Ni Netscape ni l'Explorer Internet n'interprètent l'attribut width en relation avec des éléments pre.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x q (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: q
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
cite lecture/écriture URI pour la source de la citation

Exemple:

Démonwtration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient une citation dans le repère d'ouverture de laquelle est noté un Autre page d'information 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.

Attention:

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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x s (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: s
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un titre avec du texte rayé. Au dessous, se trouve un lien qui, si on le clique, appelle la Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x samp (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: samp
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un texte marqué par <samp>...</samp>. Dans le repère d'ouverture est noté le Autre page d'information 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.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0Netscape 6.xMS IE 5.x script (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: script
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
charset lecture/écriture Jeu de caractères du fichier script mentionné avec src.
defer lecture/écriture Script ne peut ni créer, ni modifier de contenus dans une fenêtre de document
event lecture/écriture événement pour l'exécution du script
htmlFor lecture/écriture Élément pour lequel le script est exécuté
src lecture/écriture URI d'un fichier script
text lecture/écriture Contenu du script
type lecture/écriture Type Mime du langage script

Exemple: fichier JavaScript hello_allemand.js

function hallo()
{
alert("Hallo Welt");
}

Exemple: fichier JavaScript hello_anglais.js

function hallo()
{
alert("hello world");
}

Exemple: fichier HTML

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

Attention:

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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x select (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: select
accéder aux objets éléments HTML voir vers le haut 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 #nach oben 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.

Propriété État Signification
disabled lecture/écriture Liste de choix ne peut être utilisée
form lecture Élément du formulaire dont il fait partie
length lecture Nombre d'éléments option
multiple lecture/écriture Fixer ou non le choix multiple
name lecture/écriture Nom de la liste de choix
options lecture Tableau des éléments option de la liste de choix
selectedIndex lecture/écriture Index de l'élément choisi
size lecture/écriture Nombre d'éléments visibles
tabIndex lecture/écriture Recherche par tabulateur
type lecture Type de la liste de choix: ou bien select-multiple ou bien select-one
value lecture/écriture Valeur actuelle de choix
Méthode Signification
add() Insérer un élément à la liste de choix
blur() Retirer la zone de saisie active de la liste de choix
focus() Mettre la zone de saisie active sur la liste de choix
remove() Effacer un élément de la liste de choix

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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 Autre page d'information 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é.

Attention:

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 Autre page d'information navigator.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x small (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: small
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un texte marqué avec <small>...</small>. En cliquant sur le texte (onClick) la Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x span (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: span
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x strike (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: strike
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un texte qui est marqué avec <strike>...</strike>. Dans le repère d'ouverture est noté le Autre page d'information 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.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x strong (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: strong
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information gestionnaires d'événements onMouseOver et onMouseOut, qui appelle chacun la Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x style (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: style
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
disabled lecture/écriture Utiliser ou ne pas utiliser une feuille de style
media lecture/écriture Média de sortie pour la feuille de style
type lecture/écriture Type Mime du langage de feuille de style

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un titre et un lien. En cliquant sur le lien, la Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x sub (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: sub
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x sup (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: sup
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple représente un texte "x puissance y". Le "x" est ici enfermé dans un lien qui, si on le clique, appelle la -Autre page d'information 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 Autre page d'information node.nodeValue (firstChild est un type de nœud bien précis).

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x table (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: table
accéder aux objets éléments HTML voir vers le haut 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 #nach oben 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.

Propriété État Signification
align lecture/écriture Alignement du tableau
border lecture/écriture Épaisseur de la bordure du tableau
bgColor lecture/écrituve Couleur d'arrière plan du tableau
caption lecture/écriture Titre du tableau existant ou non
cellPadding lecture/écriture Espace entre le bord des cellules et leur contenu
cellSpacing lecture/écriture Espace séparant les cellules les unes des autres
frame lecture/écriture Mention des bordures du tableau définies comme visibles
rows lecture Tableau de toutes les rangées du tableau
rules lecture/écriture Mention des lignes de quadrillage du tableau définies comme visibles
summary lecture/écriture Texte qui explique le tableau aux non-voyants dans le cas d'une sortie vocale
tBodies lecture Tableau de tous les éléments tbody du tableau
tFoot lecture/écriture Élément de pied d'un tableau ou null
tHead lecture/écriture Élément d'entête d'un tableau ou null
width lecture/écriture Largeur du tableau
Méthode Signification
createCaption() Créer un élément de titre d'un tableau caption
createTFoot() Créer un élément de pied d'un tableau tfoot
createTHead() Créer un élément d'entête d'un tableau thead
deleteCaption() Effacer un élément de titre d'un tableau caption
deleteTFoot() Effacer un élément de pied d'un tableau tfoot,
deleteTHead() Effacer un élément d'entête d'un tableau thead
deleteRow() Effacer une rangée de tableau
insertRow() Ajouter une rangée de tableau

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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 Autre page d'information document.createElement(). Pour le contenu des cellules de tableau, sont créés deux nœuds texte avec Autre page d'information document.createTextNode() qui se voient affecter comme valeur, le contenu des deux champs de saisie du formulaire.
Avec la méthode Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0MS IE 5.x tbody (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: tbody
accéder aux objets éléments HTML voir vers le haut 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 #nach oben 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.

Propriété État Signification
align lecture/écriture Alignement des cellules du passage du tableau
ch lecture/écriture Signe d'alignement pour les cellules du passage du tableau
chOff lecture/écriture Position du signe d'alignement dans les cellules du passage du tableau
rows lecture Tableau de toutes les rangées du tableau dans le passage de tableau
vAlign lecture/écriture Alignement vertical des cellules dans le passage de tableau
Méthode Signification
deleteRow() Effacer une rangée de tableau du passage de tableau
insertRow() Ajouter une rangée de tableau dans le passage de tableau

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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.

Attention:

Avec Netscape (6.1) et avec l'édition Macintosh de l'Explorer Internet 5.0 il était impossible de retracer l'exemple indiqué.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x td (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: td
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
abbr lecture/écriture Texte de remarque pour l'affectation des cellules de tableau et qui par exemple pour une restitution vocale, est annoncé avant le contenu de la cellule
align lecture/écriture Alignement
axis lecture/écriture Liste de catégories dont la cellule fait partie
bgColor lecture/écriture Couleur d'arrière-plan
cellIndex lecture Numéro d'index de la cellule dans la rangée (début à 0)
ch lecture/écriture Signe d'alignement
chOff lecture/écriture Position du signe d'alignement
colSpan lecture/écriture Nombre de colonnes sur lesquelles s'étend la cellule
headers lecture/écriture Liste de noms ID de titres de colonnes ou de rangées auxquelles appartient la cellule
height lecture/écriture Hauteur de la cellule (hauteur de la rangée)
noWrap lecture/écriture Passage à la ligne automatique ou pas de passage à la ligne automatique
rowSpan lecture/écriture Nombre de rangées du tableau sur lesquelles s'étend la cellule
scope lecture/écriture Pour quelles autres rangées ou colonnes, la cellule actuelle a le caractère de titre
vAlign lecture/écriture Alignement vertical
width lecture/écriture Largeur de cellule (largeur de colonne)

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un tableau. Au dessous est noté un passage JavaScript. Là dans une Autre page d'information boucle "for" il est accédé dans l'ordre avec document.getElementsByTagName("td") à tous les éléments td du fichier. Par l'appel de Autre page d'information 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 Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x textarea (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: textarea
accéder aux objets éléments HTML voir vers le haut 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 #nach oben 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.

Propriété État Signification
accessKey lecture/écriture Raccourci clavier pour l'élément
cols lecture Signes par ligne (largeur d'affichage)
defaultValue lecture/écriture Valeur par défaut
disabled lecture/écriture Élément ne peut pas être modifié
form lecture formulaire dont il fait partie
name lecture/écriture Nom de l'élément
readOnly lecture/écriture Valeur de l'élément ne peut pas être modifiée
rows lecture Lignes (hauteur d'affichage)
tabIndex lecture/écriture Recherche par tabulateur
type lecture Type de l'élément du formulaire
value lecture/écriture Valeur de l'élément
Méthode Signification
blur() Retirer la zone de saisie active de l'élément
focus() Mettre la zone de saisie active sur l'élément
select() Sélectionner le contenu

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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">&nbsp;</div>
</body></html>

Explication:

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é &nbsp;. Dans le repère d'ouverture <textarea> est noté le Autre page d'information 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 Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x tfoot (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: tfoot
accéder aux objets éléments HTML voir vers le haut 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 #nach oben 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.

Propriété État Signification
align lecture/écriture Alignement des cellules du passage de tableau
ch lecture/écriture Signe d'alignement pour les cellules du passage de tableau
chOff lecture/écriture Position du Signe d'alignement pour les cellules du passage de tableau
rows lecture Tableau de toutes les rangées du tableau du passage de tableau
vAlign lecture/écriture Alignement vertical des cellules dans le passage du tableau
Méthode Signification
deleteRow() Effacer une rangée du tableau du passage de tableau
insertRow() Ajouter une rangée du tableau du passage de tableau

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x th (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: th
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
abbr lecture/écriture Texte de remarque pour l'affectation des cellules de tableau et qui par exemple pour une restitution vocale, est annoncé avant le contenu de la cellule
align lecture/écriture Alignement
axis lecture/écriture Liste de catégories dont la cellule fait partie
bgColor lecture/écriture Couleur d'arrière-plan
cellIndex lecture Numéro d'index de la cellule dans la rangée (début à 0)
ch lecture/écriture Signe d'alignement
chOff lecture/écriture Position du signe d'alignement
colSpan lecture/écriture Nombre de colonnes sur lesquelles s'étend la cellule
headers lecture/écriture Liste de noms ID de titres de colonnes ou de rangées auxquelles appartient la cellule
height lecture/écriture Hauteur de la cellule (hauteur de la rangée)
noWrap lecture/écriture Passage à la ligne automatique ou pas de passage à la ligne automatique
rowSpan lecture/écriture Nombre de rangées du tableau sur lesquelles s'étend la cellule
scope lecture/écriture Pour quelles autres rangées ou colonnes, la cellule actuelle a le caractère de titre
vAlign lecture/écriture Alignement vertical
width lecture/écriture Largeur de cellule (largeur de colonne)

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un tableau et au-dessous un passage JavaScript. Là sont recherchées dans une Autre page d'information 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.

Attention:

Avec l'édition Macintosh de l'Explorer Internet 5.0 cet exemple n'est pas interprété.

 vers le hautvers le bas 

DOM 1.0MS IE 5.x thead (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: thead
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
align lecture/écriture Alignement des rangées du passage du tableau
ch lecture/écriture Signe d'alignement pour les cellules du passage du tableau
chOff lecture/écriture Position du signe d'alignement dans les cellules du passage du tableau
rows lecture Tableau de toutes les rangées du tableau dans le passage de tableau
vAlign lecture/écriture Alignement vertical des cellules dans le passage de tableau
Méthode Signification
deleteRow() Effacer une rangée de tableau du passage de tableau
insertRow() Ajouter une rangée de tableau du passage de tableau

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x title (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: title
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leur propre propriété qui est la suivante.

Propriété État Signification
text lecture/écriture Contenu du titre

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x tr (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: tr
accéder aux objets éléments HTML voir vers le haut 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 #nach oben 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.

Propriété État Signification
align lecture/écriture Alignement des cellules de la rangée de tableau
bgColor lecture/écriture Couleur d'arrière-plan des cellules de la rangée de tableau
cells lecture Tableau des cellules de tableau de cette rangée de tableau
ch lecture/écriture Signe d'alignement pour les cellules de la rangée de tableau
chOff lecture/écriture Position du Signe d'alignement pour les cellules de la rangée de tableau
rowIndex lecture Numéro d'index de la rangée de tableau (début à 0) par rapport au tableau
sectionRowIndex lecture Numéro d'index de la rangée de tableau (début à 0) par rapport au passage de tableau (thead, tbody ou tfoot)
vAlign lecture/écriture Alignement vertical des cellules dans le passage de tableau
Méthode Signification
deleteCell() Effacer des cellules de tableau de la rangée de tableau
insertCell() Ajouter des cellules de tableau dans la rangée de tableau

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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 Autre page d'information 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 Autre page d'information 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 Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x tt (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: tt
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient un texte marqué avec <tt>...</tt>, qui contient lui-même le Autre page d'information 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].

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x u (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: u
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

L'exemple contient du texte souligné. Dans le repère d'ouverture <u> est noté le Autre page d'information gestionnaire d'événement onClick. Lorsque le texte de cet élément est cliqué la Autre page d'information 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é.

Attention:

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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.x ul (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: ul
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script ainsi que leurs propres propriétés qui sont les suivantes.

Propriété État Signification
compact lecture/écriture Représentation dans une police condensée
type lecture/écriture Genre de la puce d'énumération

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function puce(symbole) {
 document.getElementById("Liste").type = symbole;
}
//-->
</script>
</head><body>
<ul id="Liste">
<li&gtun 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>

Explication:

L'exemple contient une liste énumérative. Au dessous sont notés deux liens. En cliquant sur ces liens, la Autre page d'information 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.

 vers le hautvers le bas 

DOM 1.0JavaScript 1.5Netscape 6.xMS IE 5.x var (objet élément HTML)

Référence HTML pour les éléments: voir Autre page d'information Élément: var
accéder aux objets éléments HTML voir vers le haut 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 #nach oben Propriétés universelles pour l'accès des langages script.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<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>

Explication:

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.

Attention:

L'exemple indiqué est également interprété par Opera 5.12.

 vers le haut
page suivante Autre page d'information node
page précédente Autre page d'information document
 

© 2001 Stefan Münz / © 2002 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@fr.selfhtml.org