DOM: le modèle objet
d'une page HTML
Qu'est-ce que le "DOM" ?
* DOM: Document Object Model
* Ensemble d'objets JavaScript
* Références aux éléments du navigateur
* Fenêtre
* Historique
* Document
* Cadres
* ...
* Références aux éléments d'une page HTML
* Images
* Formulaires
* ...
* Accès aux propriétés des éléments
* Modification des propriétés
* Changement de l'apparence de la page
Structure hiérarchique
Navigation dans la hiérarchie
* Sommet de la hiérarchie: l'objet "window"
* Représente la fenêtre du navigateur
* Sous-objet: objet contenu dans un autre objet
* "images" sous-objet de "document"
* Parent: objet contenant un autre objet
* "window" est le parent de "document"
* "." = liaison entre un objet et ses sous-objets
<form id="form1">
<input type="text" id="text1"/>
</form>
...
<script type="text/javascript">
document.forms["form1"].elements["text1"].value = "...";
</script>
Propriétés d'un objet DOM
* Comment connaître les propriétés d'un objet DOM ?
* Site de référence: "Tout Javascript"
* http://www.toutjavascript.com/reference/
* Code JavaScript qui liste les propriétés
var objet = variable_objet;
for (prop in objet) {
document.write(prop + " = " + objet[prop] + "<br/>");
}
* Remarque: "window" est facultatif pour accéder à "document"
* window.document.write
* document.write
Objet "window" (1/3)
* Objet racine de la hiérarchie
* Représente la fenêtre de navigation
* Principaux sous-objets
* document
* Document contenu dans la fenêtre
* frames
* Cadres qui composent la fenêtre
* Sont également des objets "window"
* parent
* Fenêtre parente dans la hiérarchie des cadres
* top
* Fenêtre racine dans la hiérarchie des cadres
Objet "window" (2/3)
* Quelques propriétés
* status: texte dans la barre d'état
* defaultStatus: texte par défaut dans la barre d'état
* Gestion de la fenêtre
* moveTo(x,y): déplace la fenêtre
* resizeTo(largeur,hauteur): redimensionne la fenêtre
* scrollTo(x,y): fait défiler le contenu de la fenêtre
* Boîtes de dialogue
* alert(message);
* Message + bouton OK
* reponse = confirm(message);
* Message + bouton OK + bouton annuler
* Réponse = booléen
* reponse = prompt(message);
* Message + zone de saisie + bouton OK + bouton annuler
* Réponse = chaîne de caractères ou null
Objet "window" (3/3)
* Gestion du temps
* var boucle = setInterval("f()",n);
* Exécute la fonction "f()" toutes les "n" millisecondes
* clearInterval(boucle);
* Stoppe la répétition de l'exécution
* var echeance = setTimeout("f()",n);
* Exécute la fonction "f()" dans "n" millisecondes
* clearTimeout(echeance);
* Stoppe l'exécution programmée
* Exemple: affichage de l'heure dans la barre d'état
function afficher_date() {
var date = new Date();
window.status = date.getHours() + ":" + date.getMinutes()
+ ":" + date.getSeconds();
setTimeout("afficher_date()",1000);
}
afficher_date();
Objet "document" (1/2)
* Sous-objet de "window"
* Représente une page HTML
* Permet d'accéder à tous les éléments de la page
* Principaux sous-objets
* images
* Tableau des images du document
* forms
* Tableau des formulaires du document
* getElementById("identifiant")
* Accès à un élément à partir de son identifiant
Objet "document" (2/2)
* Quelques propriétés
* bgColor: couleur de fond
* fgColor: couleur du texte
* alinkColor: couleur des liens
* vlinkColor: couleur des liens visités
* location: URL de la page
* title: titre du document
* lastModified: date de dernière modification
* Quelques méthodes
* write(t): écrit le texte "t" dans la page à l'endroit de l'appel
* writeln(t): idem, mais ajoute un retour à la ligne "\n"
Objet "document.images"
* Contient toutes les images de la page
* Tableau JavaScript: Array
* Nombre d'images
* document.images.length
* Accès à une image
* Numéro de l'image
* Numérotation commence à 0
* document.images[i]
* Nom de l'image
* Attribut "id" dans la balise "img"
* document.images["nom_image"]
* Direct
* document.nom_image
Classe "Image"
* Ne possède pas de méthodes
* Quelques propriétés modifiables
* width: largeur de l'image
* height: hauteur de l'image
* src: URL de l'image
* alt: texte alternatif de l'image
* Quelques propriétés non modifiables
* name: nom de l'image
* id: identifiant de l'image
* complete: indique si l'image est chargée
* fileSize: taille de l'image
Objet "document.forms"
* Contient tous les formulaires de la page
* Comme "images": tableau JavaScript
* Accès par numéro: document.forms[i]
* Accès par nom: document.forms["nom_formulaire"]
* Accès direct: document.nom_formulaire
* Quelques propriétés d'un formulaire
* action: URL où sont transmises les données
* elements: tableau des éléments composant le formulaire
* method: méthode de transmission
* name: nom du formulaire
* Quelques méthodes d'un formulaire
* submit(): soumet le formulaire
* reset(): réinitialise le formulaire
Objet "forms.elements"
* Contient tous les champs de saisie d'un formulaire
* Tableau JavaScript
* Comme "forms" et "images"
* Quelques attributs d'un champ
* name: nom du champ
* value: valeur du champ
* Données transmises par le formulaire
* Couple "name" + "value"
* Méthode "get": données visibles dans l'URL
* cible.htm?name1=value1&name2=value2
* Méthode "post": données non visibles dans l'URL
Objet "history"
* Sous-objet de "window"
* Permet de naviguer dans l'historique du navigateur
* Permet de fournir ses propres boutons
"page précédente" et "page suivante"
* Seulement accessible en lecture
* Quelques propriétés
* length: nombre d'URL stockées dans l'historique
* Quelques méthodes
* back(): retourne à la page précédente
* forward(): retourne à la page suivante
* go(n): déplacement de n pages
* n > 0: en avant
* n < 0: en arrière
Objet "location"
* Sous-objet de "window"
* Informations sur l'URL en cours de visualisation
* Quelques propriétés
* host: nom du domaine de l'URL
* href: URL complète
* Modification possible
* window.location.href = "nouvelle_page";
* port: numéro du port de l'URL
* Quelques méthodes
* reload(): recharge la page
* replace("nouvelle_page"): charge une nouvelle page
* Ecrase l'enregistrement courant de l'historique
Objet "screen"
* Sous-objet de "window"
* Contient des informations sur l'écran
* Quelques propriétés
* availWidth: largeur utile de l'écran
* availHeight: hauteur utile de l'écran
* colorDepth: profondeur de couleurs
* width: largeur réelle de l'écran
* height: hauteur réelle de l'écran