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

00_gebi.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>getElementById | parag</title>
</head>
<body>
 
 
<h1>La page web où on choppe les éléments par id</h1>
<p id="parag1">ceci est mon premier paragraphe, il a pour id parag1, 
	pour l'attrapper, il faut taper quelque chose comme 
	<code>document.getElementById("parag1")</code> dans la console de 
	<a href="http://getfirebug.com/">Firebug</a>.
	</p>
 
<p id="parag2">Attention, quand on écrit <code>getElementById</code>, 
	respectez la casse (les majuscules) et ne mettez pas de 
	<code>s</code> à Element</p>
</body>
</html>

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

01_gebi_innerhtml.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>getElementById | innerHTML</title>
</head>
<body>
 
 
<h1 id="titre">Ce tire doit changer</h1>
 
<p>Le but de cet exercice est de changer le titre et son pokémon préféré.</p>
 
<p>Mon pokémon préféré, c'est <b id="pokemon">Rattata</b></p>
 
<p>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.
</p>
 
</body>
</html>

getElementsByClassName

gebcn sélectionner un tableau d'éléments

En utilisant getElementsByClassName dans Firebug, affichez dans la console liste des joours

02_gebcn_jours.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>getElementsByClassName | jours 1</title>
</head>
<body>
 
 
<h1>Les jours de la semaine</h1>
 
 
<ul>
	<li class="jours">Lundi</li>
	<li class="jours">Mardi</li>
	<li class="jours">Mercredi</li>
	<li class="jours">Jeudi</li>
	<li class="jours">Vendredi</li>
	<li class="jours">Samedi</li>
	<li class="jours">Dimanche</li>
</ul>
 
</body>
</html>

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.

03_gebcn_one.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>getElementsByClassName | jours 2</title>
</head>
<body>
 
 
<h1>Les jours de la semaine</h1>
 
 
<p>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.
</p>
 
<ul>
	<li class="jours">Lundi</li>
	<li class="jours">Mardi</li>
	<li class="jours">Mercredi</li>
	<li class="jours">Jeudi</li>
	<li class="jours">Vendredi</li>
	<li class="jours">Samedi</li>
	<li class="jours">Dimanche</li>
</ul>
 
</body>
</html>

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 </body>.

04_gebcn_for.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>getElementById 02</title>
</head>
<body>
 
 
<h1>La liste de mes amis imaginaires</h1>
 
 
<p>J'ai 12 amis imaginaires, mais je ne m'en souviens pas toujours, 
	ce serait bien plus pratique s'ils s'ppaient tous bob</p>
 
<ul>
	<li class="amis">Pierre</li>
	<li class="amis">André</li>
	<li class="amis">Jacques Majeur</li>
	<li class="amis">Jean</li>
	<li class="amis">Philippe</li>
	<li class="amis">Barthélémy</li>
	<li class="amis">Thomas</li>
	<li class="amis">Matthieu</li>
	<li class="amis">Jacques Mineur</li>
	<li class="amis">Simon</li>
	<li class="amis">Thaddée</li>
	<li class="amis">Judas</li>
</ul>
 
</body>
</html>

getElementsByTagName

Vous pouvez lire documentation de 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.

05_gebtn_length.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>getElementsByTagName | addressboook</title>
</head>
<body>
 
 
<h1>Address Book</h1>
 
 
<ul>
	<li>Jacob</li>
	<li>Sophia</li>
	<li>Mason</li>
	<li>Isaella</li>
	<li>William</li>
	<li>Emma</li>
	<li>Olivia</li>
	<li>Jayden</li>
	<li>Noah</li>
	<li>Ava</li>
	<li>Michael</li>
	<li>Emily</li>
	<li>Ethan</li>
	<li>Abigail</li>
	<li>Alexander</li>
	<li>Madison</li>
	<li>Aiden</li>
	<li>Mia</li>
	<li>Daniel</li>
	<li>Chloe</li>
</ul>
 
</body>
</html>

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.

07_gebtn_gebcn.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>getElementsByTagName | baby</title>
</head>
<body>
 
 
<h1>Top 10 Baby Names For 2011</h1>
 
 
<ul>
	<li class="male">Jacob</li>
	<li class="female">Sophia</li>
	<li class="male">Mason</li>
	<li class="female">Isaella</li>
	<li class="male">William</li>
	<li class="female">Emma</li>
	<li class="female">Olivia</li>
	<li class="male">Jayden</li>
	<li class="male">Noah</li>
	<li class="female">Ava</li>
	<li class="male">Michael</li>
	<li class="female">Emily</li>
	<li class="male">Ethan</li>
	<li class="female">Abigail</li>
	<li class="male">Alexander</li>
	<li class="female">Madison</li>
	<li class="male">Aiden</li>
	<li class="female">Mia</li>
	<li class="male">Daniel</li>
	<li class="female">Chloe</li>
</ul>
 
</body>
</html>

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 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!”.

X_click_me.html
<!DOCTYPE html>
<html>
<head>
	<title>click me</title>
	<meta charset="utf-8">
</head>
<body>
 
<div id="trigger">click me</div>
 
<script>
 
var trigger = document.getElementById("trigger");
trigger.addEventListener("click",function(){
 
});
 
</script>
</body>
</html>

x,y

Intervenez sur les propriétés style.left et style.top de l'objet sight pour le placer à 300px / 300px.

X_xy.html
<!DOCTYPE html>
<html>
<head>
	<title>click somewhere</title>
	<meta charset="utf-8">
	<style>
		#sight{
			position:fixed;
			top:100px;
			left:100px;
			background:red;
		}
	</style>
</head>
<body>
 
<div id="sight">+</div>
 
<script>
 
 
</script>
</body>
</html>

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.

X_xy_cursor.html
<!DOCTYPE html>
<html>
<head>
	<title>click somewhere</title>
	<meta charset="utf-8">
	<style>
		#sight{
			position:fixed;
			top:100px;
			left:100px;
			background:red;
		}
	</style>
</head>
<body>
 
<div id="sight">+</div>
 
<script>
 
 
</script>
</body>
</html>

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

08_ce_li.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>dom | creteelement</title>
</head>
<body>
 
<h1>Des mots du dictionnaire</h1>
 
<ul id="list">
	<li>chiffonnés</li>
	<li>dérater</li>
	<li>ernes</li>
	<li>fangeux</li>
	<li>herniaires</li>
	<li>hyperorganiser</li>
	<li>moineau</li>
	<li>sabbathienne</li>
	<li>syrphes</li>
	<li>épousailles</li>
</ul>
 
<script>
 
var li = document.createElement("li");
var t = document.createTextNode("rhutabaga")
var ul = document.getElementById("list");
 
li.appendChild(t);
 
</script>
 
</body>
</html>

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

09_ce_todo.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>dom | creteelement</title>
</head>
<body>
 
<h1>Des choses à faire</h1>
 
<ul id="list">
	<li>Voir une aurore boréale</li>
	<li>Prendre le transsibérien</li>
	<li>Voir des caribous sauvages</li>
	<li>Apprendre à un lama à danser</li>
	<li>Fumer des poils de Yak</li>
	<li>Surfer sur une tortue</li>
</ul>
 
<form id="new">
	<input type="text" id="idea">
	<input type="submit">
</form>
 
<script>
 
 
</script>
 
</body>
</html>

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;
ressources/javascript/dom_fr.txt · Last modified: 2013/06/16 22:51 (external edit)
 
 
Creative Commons License Powered by PHP Valid XHTML 1.0 April