| Accueil | table JavaScript | index JavaScript | précédent | suivant |

L'objet DOM HTMLElement

HTMLElement est l'objet associé à toute balise HTML. Nous décrivons ci-dessous les méthodes et attributs généraux communs à tous les objets lorsqu'ils sont applicables.

Les principales méthodes sont :

blur() rend l'élément inactif
focus() rend l'élément actif
click() simule un click sur l'élément

Les attributs sont accessibles en lecture et en écriture, permettant ainsi de modifier l'aspect de l'élément :

className nom de la classe lorsqu'elle existe
innerHTML contenu de la balise
id, name, title, type, value lorsqu'ils existent

style cet attribut joue un rôle particulier en permettant d'affecter à l'objet les spécifications CSS. La syntaxe à employer dérive de la syntaxe utilisée dans les feuilles de style comme suit :

margin-left devient element.style.marginLeft
margin-top devient element.style.marginTop
font-size devient element.style.fontSize
text-align devient element.style.textAlign
etc ...

La forme du curseur peut être modifiée par :
element.style.cursor="forme" où forme prend les valeurs
default forme normale définie par le navigateur
wait sablier d'attente
pointer main de pointage
crosshair croisillon de pointage
(Voir la référence pour les autres formes)

Certains objets ont des méthodes et des attributs spécifiqus :
formulaires
attributs action (page effectuant le traitement), method (post, get), target
méthode submit() envoie le formulaire en simulant le click sur le bouton d'envoi

boutons radio et cases à cocher
attribut checked prenant les valeurs true ou false

Le document de référence cité dans les liens utiles fournit une liste complète de toutes les méthodes et attributs applicables aux divers éléments.

Voici un premier exemple de script qui affiche les attributs du contenu de la page et modifie le style d'un paragraphe :


/* feuille de style Jstyle05 */

h2
{
font-size : 12pt;
color : rgb(100,0,0);
text-align : center;
}

#cadre1
{
padding : 10px;
position : absolute;
top : 10px;
left : 150px;
width : 600px;
background-color : rgb(255,245,230);
font-family : Verdana;
font-size : 10pt;

}

#cadre2
{
background-color : rgb(245,255,230);

}

.texte1
{
margin-top : 20px;
margin-left: 20px;
margin-right : 20px;
color : rgb(150,20,20);
}

.texte2
{
margin-top : 20px;
margin-left: 20px;
margin-right : 20px;
color : rgb(20,80,20);
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple10</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Jstyle05.css" />
</head>

<body>
<!-- Jscript10 -->
<div id="cadre1">
<h2>Les objets DOM <b>Document</b> et <b>Element</b></h2>
<p class="texte1">
Premier paragraphe
</p>
<p class="texte1">
Deuxième paragraphe
</p>

<div id="cadre2">
<p class="texte2">
<script type="text/javascript">

document.write("attributs de la page", "<br/>");
document.write("<b>document.URL : </b>", document.URL, "<br/>");
document.write("<b>document.referrer : </b>", document.referrer, "<br/>");
document.write("<b>document.title : </b>", document.title, "<br/><br/>");

document.write("cadre de la page :<br/>");
var cadre=document.getElementById("cadre1");
document.write("<b>cadre=document.getElementById("cadre1")</b>", "<br/><br/>");
document.write("attributs du cadre :<br/>");
document.write("<b>cadre.id</b> : ",cadre.id, "<br/>");
document.write("position du cadre après modification par le script :<br/>");
cadre.style.top='1px';
cadre.style.left='1px';
document.write("<b>cadre.style.top</b> : ",cadre.style.top, " (position modifiée)", "<br/>");
document.write("<b>cadre.style.left</b> : ",cadre.style.left, " (position modifiée)", "<br/>");
document.write("<br/>");

document.write("tableau des objets paragraphes :<br/>");
var par=document.getElementsByTagName("p");
document.write("<b>par=document.getElementsByTagName("p")</b><br/><br/>");
document.write("attributs des paragraphes :<br/>");
document.write("<b>par[0].innerHTML : </b>", par[0].innerHTML, "<br/>");
document.write("<b>par[1].innerHTML : </b>", par[1].innerHTML, "<br/>");
document.write("<b>par[0].className : </b>", par[0].className, "<br/>");
document.write("style du paragraphe 2 après modification par le script :<br/>");
par[1].style.marginLeft="50px";
document.write("<b>par[1].style.marginLeft : </b>", par[1].style.marginLeft, " (marge modifiée)", "<br/>");
par[1].style.fontStyle="italic";
document.write("<b>par[1].style.fontStyle : </b>", par[1].style.fontStyle, " (police modifiée)", "<br/>");
par[1].style.color="rgb(0,0,150)";
document.write("<b>par[1].style.color : </b>", par[1].style.color, " (couleur modifiée)", "<br/>");

</script>
</p>
</div>

</div>

</body></html>


Afficher cette page


Dans le script suivant, un champ de saisie et un bouton d'envoi sont inclus dans une page HTML. Un clic sur le bouton provoque l'affichage du contenu du champ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple11</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Jstyle05.css" />
</head>

<body>
<!-- Jscript11 -->
<div id="cadre1">
<h2>Les objets DOM <b>Document</b> et <b>Element</b></h2>

<p class="texte1">
Nom à saisir :
<input type="text" name="texte" size="20" maxlength="20" value="" />
<input onclick="Display()" type="submit" name="envoi" value="afficher" />
</p>

<div id="cadre2">

<p class="texte2">

<script type="text/javascript">
function Display()
{
var champs=document.getElementsByTagName("input");
var saisie=document.getElementsByTagName("p");
saisie[1].innerHTML=champs[0].value;
}
</script>

</p>
</div>
</div>
</body>
</html>


Afficher cette page



suivant