fbpx
i

Class aptent taciti sociosqu
ad litorato rquent per conubia nostra

icone-cours-time-80

14h

icone-cours-level-intermediaire-80

niveau
intermédiaire

puis 25€ /mois

icone-cours-time-80

14h

icone-cours-level-intermediaire-80

niveau
intermédiaire

puis 25€ /mois

icone-cours-time-80

14h

icone-cours-level-intermediaire-80

niveau
intermédiaire

puis 25€ /mois

Les objectifs de ce module sont multiples. Assimiler les manipulations qui sont propres au JavaScript dans un environnement browser, comme cibler des éléments html afin de pouvoir effectuer des actions en fonction d'événements utilisateurs. Dans ce module, autant les anciennes méthodes sont abordées que les standards actuels de programmation.

Part #1 - Les sélecteurs de noeuds html

Les « anciens » sélecteurs

Il faut quand même les connaître car même s’ils sont de moins en moins utilisés, vous les rencontrerez souvent dans des projets de maintenance de code.

– document.getElementById()

La méthode getElementById() renvoie un objet de type Element représentant l’élément dont la propriété id correspond à la chaîne de caractères spécifiée. (L’id est censé être unique sur votre page)

var elem = document.getElementById(‘paragraph1’);

– document.getElementsByTagName()

Renvoie une HTMLCollection des éléments avec le nom de balise HTML donné.

Part #2 - Insérer dans le DOM et modifier le CSS à la volée

Insérer dans le DOM et modifier le CSS à la volée

ous connaissez l’instruction document.write() pour écrire dans une zone html mais elle est plutôt limitée. Vous allez voir ici dans cette première partie deux autres manières d’insérer des données dans l’arbre du DOM de manière plus ciblée.

Les instructions innerHTML et textContent

innerHTML va en fait vous permettre de remplacer du contenu par un autre ou de le concaténer:

Par exemple, vous pouvez EFFACER le contenu entier du document en affectant la propriété innerHTML du body à une chaîne de caractère vide.

document.body.innerHTML = «  »;

Si vous voulez rajouter du contenu avant la fin du body il faut tout simplement utiliser l’opérateur de concaténation:

document.body.innerHTML += « 
A new line! »;

Attention, innerHTML renverra à la place les chaînes suivantes: &, <, > respectivement « & », « <" et ">« . Utilisez textContent pour obtenir une copie exacte du contenu de ces nœuds.

Part #3 - Les évenements

avaScript est un langage événementiel asynchrone. La gestion des événements est un sujet essentiel dans le cadre de ce langage. JavaScript n’est pas limité à l’écoute d’événements liés au DOM. Vous verrez dans un prochain module que l’on peut aussi par exemple écouter les événements liés au chargement d’un document. Mais dans ce module, vous vous focaliserez essentiellement sur les différentes manières de déclarer/supprimer des gestionnaires d’événements liés au DOM.

Certificat de réussite