»DOM (Dynamic Object Model)
Le DOM est une spécifiation pour l'accsés à une arborescence de balises. Les fonctionnalités que nous allons voir pour javaScript se retrouve dans tous les langages de programmation capable de parcourir une arborescence.
l'objet document
l'objet document représente la page qui vous est affichée dans votre navigateur, au sens HTML du terme: c'est à dire toute les balises XHTML que vous venez de taper
C'est l'objet document qui offre les méthodes DOM qui permettent de parcourir une arborescence de balise.
Nous nous concentrerons pour la démonstration sur une de ces méthodes :
document.getElementById('id_de_la_balise');
Cette méthode vous permet de vous positionner sur la balise qui a pour id id_de_la_balise.
Ce qui est intéressant la dedans c'est le parallèle entre les attributs html (notamment les attributs CSS vus à la section précédentes) et les attributs de l'élément du DOM sur lequel on est positionné avec javaScript.
Cas pratique : Je vais faire afficher la couleur avec la quelle est affiché le grand titre de ma page, dans mon code HTML je vais ajouter un attribut id à la balise h1 qui contient le titre de la page
<h1 id="monTitre" style="font-size:18pt">Vincent Mazenod</h1>
<script>
/* ici la page n'est pas complètement chargée, juste la tête et le h1 */
alert("regardez bien!!")
/* on affecte l'attribut style de la balise h1 ayant l'id monTitre à la variable styleh1 */
var styleh1 = document.getElementById("monTitre").style;
/* on modifie l'attribut color de l'objet style qu'on vient de récupérer */
styleh1.color="#0000FF";
</script>
Une fois que vous avez cliqué sur l'alerte, le bouton s'est affiché en bleu. On va garder ce patit exemple pour l'associer à des évènements utilisateur
