L’objet document représente l’ensemble du document html.
Lorsque le document HTML est chargé dans le navigateur, il devient un objet. C’est l’élément racine qui représente le document HTML. Il a des propriétés et des méthodes. À l’aide d’un objet de document, nous pouvons ajouter un contenu dynamique à notre page Web.
Comme mentionné précédemment, c’est l’objet windows. Alors
window.document
Est identique à
document
Selon le W3C – « Le modèle d’objet de document (DOM) du W3C est une plate-forme et une interface indépendante du langage qui permettent aux programmes et aux scripts d’accéder et de mettre à jour de manière dynamique le contenu, la structure et le style d’un document. »
Propriétés de l’objet document
Voyons les propriétés de l’objet document qui peuvent être consultées et modifiées par l’objet lui même.
Méthodes de l’objet document
Nous pouvons accéder et modifier le contenu du document par ses méthodes.
Les méthodes importantes d’objet document sont les suivantes:
| Méthode | La description |
|---|---|
| write (« chaîne ») | écrit la chaîne donnée sur le document. |
| Writeln (« chaîne ») | écrit la chaîne donnée sur le document avec un caractère de nouvelle ligne à la fin. |
| getElementById () | renvoie l’élément ayant la valeur id donnée. |
| getElementsByName () | renvoie tous les éléments ayant la valeur du nom donné. |
| getElementsByTagName () | renvoie tous les éléments ayant le nom de tag donné. |
| getElementsByClassName () | renvoie tous les éléments ayant le nom de classe donné. |
Accéder à la valeur de champ par l’objet document
Dans cet exemple, nous allons obtenir la valeur du texte saisi par utilisateur. Ici, nous utilisons document.form1.nom.value pour obtenir la valeur du champ nom.
Ici, le document est l’élément racine qui représente le document html.
form1 est le nom du formulaire.
nom est le nom de l’attribut du texte saisi.
value est la propriété, qui renvoie la valeur du texte d’entrée.
Voyons un exemple simple de l’objet document qui imprime le nom avec le message de bienvenue.
<script type = "text/javascript">
function printvalue () {
var nom = document .form1.nom.value;
alert ("Bienvenue:" + nom);
}
</script>
<form name="form1">
Entrez le nom: <input type ="text" name ="nom"/>
<input type = "button" onclick = "printvalue ()" value = "afficher le nom" />
</form>
Résultat :
