M3203 - Programmation objet et événementielle - TP1

Objectifs de la séance

  • Comprendre la notion de DOM
  • Savoir accéder aux éléments du DOM
  • Savoir modifier les éléments du DOM
  • Savoir manipuler le DOM, ajouter et supprimer des éléments

Pré-requis

  • Connaître les bases de la programmation : notions de variables, structures conditionnelles, structures itératives, sous-programme
  • Connaître la syntaxe de Javascript

Le Document Object Model (DOM)

Quand une page web est chargée, le navigateur crée un Document Object Model (DOM) de la page. Le DOM est un modèle objet standard, défini par le W3C, et une interface de programmation (API). Il représente de façon structurée la page HTML sous la forme d'une arborescence.

Chaque entité de l'arborescence est appelée nœud. Un nœud peut être un élément HTML, un attribut ou un élément textuel.

Le DOM définit :

  • les éléments HTML comme des objets
  • les propriétés de tous les éléments HTML
  • les méthodes pour accéder aux éléments HTML
  • les évènements de tous les éléments HTML.

Autrement dit, le DOM est un standard qui définit comment accéder, modifier, ajouter et supprimer des éléments HTML.

Vous pouvez visualiser l'arborescence d'un document à l'aide des outils de développement. Dans Firefox : Menu > Développement web > Inspecteur 

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Exemple</title>
	</head>

	<body>
		<h1 id="demo">Pour visualiser</h1>
		<p id="para">le DOM</p>
	</body>

</html>

Le DOM représente ainsi une page web sous la forme d'une hiérarchie d'objets, où chaque objet correspond à un nœud de l'arborescence de la page. Les objets du DOM disposent de propriétés et de méthodes permettant de les manipuler avec JavaScript. Les propriétés sont des valeurs auxquelles on peut accéder ou que l'on peut modifier. Les méthodes sont des actions que l'on peut effectuer.

Lorsqu'un programme JavaScript s'exécute dans le contexte d'un navigateur web, il peut accéder à la racine du DOM en utilisant la variable document qui correspond à l'élément <html>.

Accès aux éléments HTML

Accéder à un élément HTML par id : document.getElementById("id")


// On récupère l'élément h1 qui porte l'id "demo"
// Et on le stocke dans la variable titre
var titre = document.getElementById("demo")
Vous pouvez tester ceci avec l'exemple donné dans la console du navigateur :
  • Enregistrez le document HTML donné ci-dessus dans un fichier puis ouvrez-le dans Firefox ou Chrome.
  • Ensuite, ouvrez la console (dans Firefox : Menu > Développement web > Console web)
  • Entrez l'instruction var titre = document.getElementById("demo")
  • Et affichez le contenu de la variable en tapant son nom "titre" puis Entrée.

Accéder aux enfants d'un nœud : childNodes


document.body.childNodes; //On obtient une liste de tous les nœuds enfants de body (ici h1 et p)
document.body.childNodes[0]; //On récupère le premier élément de la liste de nœuds : l'élément h1
document.body.childNodes[1]; //On récupère le deuxième élément de la liste de nœuds : l'élément p

Accéder au parent d'un nœud : parentNode


document.getElementById("demo").parentNode // On affiche le parent de l'élément portant l'id demo ; c'est body

Accéder aux éléments HTML par le nom de leur balise : document.getElementsByTagName("balise")


document.getElementsByTagName("p"); // On obtient tous les éléments "p" du document
									// dans une structure similaire à un tableau

document.getElementsByTagName("p")[0]; //le premier élément de ce tableau

Et d'autres..

Usage Exemple
Accéder aux éléments HTML par classe document.getElementsByClassName("maclasse")
Accéder aux éléments HTML par sélecteur CSS document.querySelectorAll("element.maclasse")
Accéder aux éléments HTML par leur attribut name document.getElementsByName("xyz")

Modifier des éléments HTML

Changer la valeur de l'attribut d'un élément : setAttribute(attribut, valeur)


// On veut que le paragraphe avec l'id "para" ait l'attribut class="rouge"
document.getElementById("para").setAttribute("class", "rouge");
// Ou :
document.getElementById("para").className = "rouge" ;

Accéder/modifier le contenu HTML d'un élément : innerHTML


document.getElementById("para").innerHTML = "le <em>DOM</em>"; //Maintenant le "DOM" est en italique

Accéder/modifier le contenu textuel d'un élément : textContent


document.getElementById("para").textContent = "toto" //Le paragraphe contient maintenant "toto"

Changer le style d'un élément : style


document.getElementById("demo").style.color = "yellow"; //Couleur du titre h1 en jaune
document.getElementById("demo").style.backgroundColor = "black"; //Fond du titre h1 en noir

Créer, ajouter, supprimer des éléments HTML

Créer un élément : document.createElement(element)


var lien = document.createElement("a"); // Création d'un lien
lien.href="http://www.google.com"; //On met une url dans l'attribut href
lien.textContent="Google"; //et le texte affiché sera "Google"

Ajouter un élément : appendChild(element)


// On ajoute notre lien à son parent dans l'arbre DOM, ici ce sera le paragraphe avec l'id para
document.getElementById("para").appendChild(lien) 
|_____________________________|            |____|
           le parent                        notre nouvel élément

Supprimer un élément : removeChild(element)


//On supprime notre lien finalement								
document.getElementById("para").removeChild(lien)
|_____________________________|            |____|
           le parent                        l'élément à supprimer

Pour approfondir

Aller au TP