====== Document Object Model ======
Les effets visuels comme le déplacement de calques au sein de la page, l'affichage ou non de certaines sections, les menus déroulants, etc. sont souvent appelés [[https://developer.mozilla.org/fr/docs/DHTML|"DHTML" ou "Dynamic HTML"]].
Le DOM fournit une représentation structurelle des documents HTML qui permet de modifier son contenu ou son aspect. En d'autres termes, **le DOM connecte le javascript au HTML**.
Pour aller plus loin, consultez [[https://developer.mozilla.org/fr/docs/DOM|la documentation officielle sur Mozilla Developper Network]].
===== Sélecteurs =====
==== getElementById ====
''%%document.getElementById("monID")%%'' permet de sélectionner un élement qui a pour id ''%%monID%%'' dans le body d'une page HTML.
=== gebi simple ===
Dans le fichier suivant, uniquement en utilisant la console de firebug, sélectionnez le premier paragraphe, puis le deuxième.
getElementById | parag
La page web où on choppe les éléments par id
ceci est mon premier paragraphe, il a pour id parag1,
pour l'attrapper, il faut taper quelque chose comme
document.getElementById("parag1")
dans la console de
Firebug.
Attention, quand on écrit getElementById
,
respectez la casse (les majuscules) et ne mettez pas de
s
à Element
=== gebi et innerHTML ===
La méthode innerHTML permet d'accéder à ce qui est contenu dans une balise
Elle peut récupérer le contenu d'une balise pour par exemple l'afficher avec ''%%alert%%''.
var contenu = document.getElementById("monID").innerHTML;
alert(contenu)
Elle peut aussi changer le contenu d'une balise.
document.getElementById("monID").innerHTML = "Nouvelle valeur";
Toujours à partir de Firebug, changez le titre et le nom de votre pokémon préféré.
getElementById | innerHTML
Ce tire doit changer
Le but de cet exercice est de changer le titre et son pokémon préféré.
Mon pokémon préféré, c'est Rattata
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
==== getElementsByClassName ====
=== gebcn sélectionner un tableau d'éléments ===
En utilisant ''%%getElementsByClassName%%'' dans Firebug, affichez dans la console liste des joours
getElementsByClassName | jours 1
Les jours de la semaine
- Lundi
- Mardi
- Mercredi
- Jeudi
- Vendredi
- Samedi
- Dimanche
=== gebcn sélectionner un seul élément ===
En utilisant ''%%getElementsByClassName%%'' ainsi que ce que vous savez faire avec les ''%%Array%%'' (tableaux), mettez un autre mot à la place de "dimanche". N'oubliez pas que les tableaux numérten à partir de 0 et pas de 1.
getElementsByClassName | jours 2
Les jours de la semaine
C'est un peu galère ces jours qui ne finissent pas tous par "di",
je poropose qu'on renomme dimanche en Glandedi, ou en Finidi.
- Lundi
- Mardi
- Mercredi
- Jeudi
- Vendredi
- Samedi
- Dimanche
=== gebcn et boucle for ===
Dans cette page web, changez tous les amis en Bob.
Vous ne pouvez pas utiliser directement ''%%innerHTML%%'' parce que le résultat du sélecteur est un tableau, vous devez donc faire une boucle ''%%for%%''.
Pour cet exercice, vous allez devoir taper plusieurs lignes de code, c'est possible dans Firebug, mais peut être préfèrerez-vous écrire le code dans le document HTML. Dans ce cas, le ''%%script%%'' doit être en bas du document, juste avant le ''%%