====== 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

=== 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.

=== 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 ''%%%%''. getElementById 02

La liste de mes amis imaginaires

J'ai 12 amis imaginaires, mais je ne m'en souviens pas toujours, ce serait bien plus pratique s'ils s'ppaient tous bob

==== getElementsByTagName ==== Vous pouvez lire documentation de [[https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByTagName|getElementsByTagName]]. === gebtn length === En utilisant ''%%getElementsByTagName%%'' dans Firebug, ainsi que la propriété ''%%length%%'' qui permet de compter le nombre d'éléments d'un tableau, comptez le nombre de personnes dans le carnet d'adresses. getElementsByTagName | addressboook

Address Book

=== gebtn et gebcn === Voici une liste des prénoms les plus populaires pour les bébés américains nés en 2011. Quel pourcentage d'entre eux sont des filles ? Rappel: pour calculer un pourcentage, c'est : population échanillonnée / population totale * 100. getElementsByTagName | baby

Top 10 Baby Names For 2011

===== Méthodes utiles ===== Pour la suite de ces exercices, vous devez savoir utiliser les Evenements. Si ce n'est pas le cas, faites les exercices de la page [[events_fr|events]] puis revenez ici. ==== length ==== Combien y a-t-il de span sur [[http://www.csszengarden.com/]] ? Soit vous les comptez à la main dans la source, soit vous tapez la bonne ligne dans Firebug. ==== innerHTML ==== Quand on clique sur ce texte, à la place de "click me" il y a écrit "thanks!". click me
click me
==== x,y ==== Intervenez sur les propriétés ''style.left'' et ''style.top'' de l'objet sight pour le placer à 300px / 300px. click somewhere
+
==== x,y cursor ==== Récupérez les positions du curseur en utilisant ''.clientX'' et ''.clientY''. document.addEventListener("mousemove",function(e){ console.log(e.clientX+"px"); }); Placez votre sight sous le curseur. click somewhere
+
===== Modifications ===== ''createElement()'' permet de créer un élément, ''createTextNode()'' permet de créer du texte, ''appendChild()'' permet de mettre un élément dans un autre. Dans ce bout de code, on crée un paragraphe, dans-lequel on écrit "hello". var parag = document.createElement("p"); var t = document.createTextNode("hello"); parag.appendChild(t); console.log(parag); Ce texte "hello" n'est pas affiché sur la page parce que le paragraphe n'est pas placé dans le DOM. La méthode, c'est donc de créer un élément, de créer du texte, placer le texte dans l'élément puis placer l'élément dans le DOM. Dans l'exercice suivant, ajoutez un mot à la liste dom | creteelement

Des mots du dictionnaire

===== todo list ===== Faire une todo list. Quand on ajoute une idée dans la case et qu'on appuie sur submit, ça l'ajoute à la liste dom | creteelement

Des choses à faire

Pour faire ceci, vous allez devoir * capturer l'événement "submit" du formulaire, * empêcher son comportement par défaut * récupérer les informations contenues dans le input * créer un objet li dans-lequel vous allez placer le contenu du input * effacer la valeur du input. Vous savez faire tout ceci, sauf récupérer la valeur d'un input, en voici la syntaxe. document.getElementById("idea").value;